JSFiddle - React, Tailwind, and code Playground

over 25 versions so far - michiganradio - forked from jPlayer 2015

by dledle2

HTML

<link rel="stylesheet" href="//rawgit.com/happyworm/jPlayer/master/dist/skin/blue.monday/css/jplayer.blue.monday.css">
<!--
http://michiganradio.org/michigan-radio-online-streaming-help
http://playerservices.streamtheworld.com/pls/WUOMFM.pls
http://playerservices.streamtheworld.com/api/livestream-redirect/WUOMFM.mp3
http://playerservices.streamtheworld.com/api/livestream-redirect/WUOMFM.mp3
http://19303.live.streamtheworld.com/WUOMFM.mp3

    //  -->
<script src='//cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.min.js'></script>
<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/skin/blue.monday/css/jplayer.blue.monday.min.css'>

<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
    <div class="jp-type-single">
        <div class="jp-gui jp-interface">
            <div class="jp-controls">
                <button class="jp-play" role="button" tabindex="0">play</button>
                <button class="jp-stop" role="button" tabindex="0">stop</button>
            </div>
            <div class="jp-progress">
                <div class="jp-seek-bar">
                    <div class="jp-play-bar">
                        <div class="jp-ball"><div>
                    </div>
                </div>
                <div class="jp-volume-controls">
                    <button class="jp-mute" role="button" tabindex="0">mute</button>
                    <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
                    <div class="jp-volume-bar">
                        <div class="jp-volume-bar-value"></div>
                    </div>
                </div>
                <div class="jp-time-holder">
                    <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
                    <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
     ...

CSS

.jp-progress{
border-radius: 30px;
}

.jp-audio, .jp-video, .jp-audio:focus, .jp-video:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline-style:none;
    /*IE*/
}
.jp-ball {
    position: absolute;
z-index: 999;
    border-radius: 30px;
    top: 3px;
    left: 0;
    width: 1em;
    height: 1em;
    margin: -0.2em 0px 0px -0.5em;
    width: 14px;
    height: 14px;
  
    width: 0.9333em;
    height: 0.9333em;
    margin: -0.175em 0px 0px -0.466em;
    background-color: #fff;
    padding: 0px;
    /* z-index: 1; */
    -webkit-transition: -webkit-transform 0.15s ease-in-out;
    transition: transform 0.15s ease-in-out;
}

JavaScript

if (location.protocol != 'http:') {
  
try{location.href = 'http:' + window.location.href.substring(window.location.protocol.length);    }catch(e){}}




/* myStrURL= */
/* try{window.open(myStrURL , '' , '');    }catch(e){} */
window.boolWindowOpenedSuccessfullyAlready = false;

function inIframe () {
    try {
        /* below command will cause a permissions error when using iframes */ 
        /* and will break into the catch part for error handling           */
        return window.self !== window.top;
    } catch (e) {
        return true;
    }
}

function isURLjsfiddleshowlight () {
   if (       document.location.href.toLowerCase().contains('/show/light/')       )
      {return true;}
   else
      {return false;}
   /* below end bracket: end of function: isURLjsfiddleshowlight*/
}


try{
if (inIframe() === true){
   if (window.open(window.location.href)){window.boolWindowOpenedSuccessfullyAlready=true;}  
}
/* if (isURLjsfiddleshowlight() != true){window.open(window.location.href);    }  */
}catch(e){}
/* alert(window.boolWindowOpenedSuccessfullyAlready);    */




function myFuncinIframeAndAlsoWindowOpenSameFunction() {

if (typeof window.boolWindowOpenedSuccessfullyAlready == 'undefined')
{ window.boolWindowOpenedSuccessfullyAlready=false; }

console.log(window.boolWindowOpenedSuccessfullyAlready);
if (window.boolWindowOpenedSuccessfullyAlready ===false) {
   try {
      if(window.self !== window.top){
         if (window.open(window.location.href)){window.boolWindowOpenedSuccessfullyAlready=true;}
         /*   */ 
      }
   }catch(e){}
}
console.log(window.boolWindowOpenedSuccessfullyAlready);
   /* below end bracket: end of function: myFuncinIframeAndAlsoWindowOpenSameFunction */
}


myFuncinIframeAndAlsoWindowOpenSameFunction();

/* myStrURL=window.location.href;  */
/* try{window.open(myStrURL , '' , '');    }catch(e){}  */








function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which :...