cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <audio class="customPlayer" src="http://audio.eatenbymonsters.com/reviews/daughter/human.mp3" title="Human" data-artist="Daughter" controls>
  Your browser does not support the <code>audio</code> element.
</audio>

<p style="font-family:sans-serif;">Built using <a href="http://audio.tomhazledine.com/">Picobel.js</a></p>
            
          
!
            
              .bbc.customAudioPlayer .playerTrigger:focus,.bbc.customAudioPlayer .songMuteButton:focus{outline:0}.bbc.customAudioPlayer{margin:2em 0;padding:0 0 0 4em;position:relative;overflow:visible;box-sizing:border-box;background:#fff;font-family:Arial,sans-serif;height:6em}.bbc.customAudioPlayer *,.bbc.customAudioPlayer :after,.bbc.customAudioPlayer :before{box-sizing:inherit}.bbc.customAudioPlayer .loader{position:absolute;top:0;left:0;width:100%;height:3em;background:#000;z-index:2;pointer-events:none;opacity:0;transition:opacity .2s;text-align:center;line-height:1;padding:1em;overflow:hidden}.bbc.customAudioPlayer .loader:after{content:'Loading';display:block;width:6em;text-align:left;color:#fff;animation:ellipsis linear infinite .8s;position:absolute;top:1em;padding-left:1em;left:50%;margin-left:-3em;z-index:2}.bbc.customAudioPlayer .loader:before{display:block;content:'';width:130%;height:100%;position:absolute;z-index:1;top:0;left:0;box-shadow:inset #000 0 0 0 0,inset #f54997 1em 0 0 0,inset #000 2em 0 0 0,inset #f54997 3em 0 0 0,inset #000 4em 0 0 0,inset #f54997 5em 0 0 0,inset #000 6em 0 0 0,inset #f54997 7em 0 0 0,inset #000 8em 0 0 0,inset #f54997 9em 0 0 0,inset #000 10em 0 0 0,inset #f54997 11em 0 0 0,inset #000 12em 0 0 0,inset #f54997 13em 0 0 0,inset #000 14em 0 0 0,inset #f54997 15em 0 0 0,inset #000 16em 0 0 0,inset #f54997 17em 0 0 0,inset #000 18em 0 0 0,inset #f54997 19em 0 0 0,inset #000 20em 0 0 0,inset #f54997 21em 0 0 0,inset #000 22em 0 0 0,inset #f54997 23em 0 0 0,inset #000 24em 0 0 0,inset #f54997 25em 0 0 0,inset #000 26em 0 0 0,inset #f54997 27em 0 0 0,inset #000 28em 0 0 0,inset #f54997 29em 0 0 0,inset #000 30em 0 0 0,inset #f54997 31em 0 0 0,inset #000 32em 0 0 0,inset #f54997 33em 0 0 0,inset #000 34em 0 0 0,inset #f54997 35em 0 0 0,inset #000 36em 0 0 0,inset #f54997 37em 0 0 0,inset #000 38em 0 0 0,inset #f54997 39em 0 0 0,inset #000 40em 0 0 0,inset #f54997 41em 0 0 0,inset #000 42em 0 0 0,inset #f54997 43em 0 0 0,inset #000 44em 0 0 0,inset #f54997 45em 0 0 0,inset #000 46em 0 0 0,inset #f54997 47em 0 0 0,inset #000 48em 0 0 0,inset #f54997 49em 0 0 0,inset #000 50em 0 0 0,inset #f54997 51em 0 0 0,inset #000 52em 0 0 0,inset #f54997 53em 0 0 0,inset #000 54em 0 0 0,inset #f54997 55em 0 0 0,inset #000 56em 0 0 0,inset #f54997 57em 0 0 0,inset #000 58em 0 0 0,inset #f54997 59em 0 0 0,inset #000 60em 0 0 0,inset #f54997 61em 0 0 0,inset #000 62em 0 0 0,inset #f54997 63em 0 0 0,inset #000 64em 0 0 0,inset #f54997 65em 0 0 0,inset #000 66em 0 0 0,inset #f54997 67em 0 0 0,inset #000 68em 0 0 0,inset #f54997 69em 0 0 0,inset #000 70em 0 0 0,inset #f54997 71em 0 0 0,inset #000 72em 0 0 0,inset #f54997 73em 0 0 0,inset #000 74em 0 0 0,inset #f54997 75em 0 0 0,inset #000 76em 0 0 0,inset #f54997 77em 0 0 0,inset #000 78em 0 0 0,inset #f54997 79em 0 0 0,inset #000 80em 0 0 0,inset #f54997 81em 0 0 0,inset #000 82em 0 0 0,inset #f54997 83em 0 0 0,inset #000 84em 0 0 0,inset #f54997 85em 0 0 0,inset #000 86em 0 0 0,inset #f54997 87em 0 0 0,inset #000 88em 0 0 0,inset #f54997 89em 0 0 0,inset #000 90em 0 0 0,inset #f54997 91em 0 0 0,inset #000 92em 0 0 0,inset #f54997 93em 0 0 0,inset #000 94em 0 0 0,inset #f54997 95em 0 0 0,inset #000 96em 0 0 0,inset #f54997 97em 0 0 0,inset #000 98em 0 0 0,inset #f54997 99em 0 0 0,inset #000 100em 0 0 0;animation:slide linear infinite .2s}.bbc.customAudioPlayer.loading .loader{opacity:1}.bbc.customAudioPlayer .playerTrigger{border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:3em;height:3em;font-size:1em;background:#000;border-right:1px solid #363733;position:absolute;bottom:0;margin-top:-1.3em;left:0;cursor:pointer;transition:background .2s}.bbc.customAudioPlayer .playerTrigger .buttonText{display:none}.bbc.customAudioPlayer .playerTrigger:hover{background:#f54997}.bbc.customAudioPlayer .playerTrigger:before{content:'';display:block;position:absolute;top:50%;left:50%;margin-top:-.6em;margin-left:-.25em;border-top:.6em solid transparent;border-left:.8em solid #fff;border-bottom:.6em solid transparent}.bbc.customAudioPlayer .playerTrigger:after{content:'';display:block;position:absolute;top:50%;right:50%;height:1em;margin-top:-.5em;margin-right:-.5em;border-top:0;border-left:.4em solid #fff;border-bottom:0;opacity:0}.bbc.customAudioPlayer .playerTrigger.songPlaying:before{height:1em;margin-top:-.5em;margin-left:-.5em;border-top:0;border-left:.4em solid #fff;border-bottom:0}.bbc.customAudioPlayer .playerTrigger.songPlaying:after{opacity:1}.bbc.customAudioPlayer .metaWrapper{color:#fff;background:#000;padding:1em;margin-bottom:1em;position:absolute;top:3em;height:3em;left:12em;right:6em}.bbc.customAudioPlayer .titleDisplay{line-height:1;padding-bottom:.2em}.bbc.customAudioPlayer .artistDisplay{color:grey;margin-left:1em;line-height:1}.bbc.customAudioPlayer .timingsWrapper{padding:1em;position:absolute;top:0;left:0;height:3em;font-size:1em;width:100%;float:left;background:rgba(0,0,0,.5)}.bbc.customAudioPlayer .timingsWrapper .songDuration,.bbc.customAudioPlayer .timingsWrapper .songPlayTimer{position:absolute;display:block;top:3em;height:3em;width:3em;color:#fff;background:#000;border:0;padding:1em 0;text-align:center;border-radius:0}.bbc.customAudioPlayer .timingsWrapper .songPlayTimer{right:3em;border-left:1px solid #363733}.bbc.customAudioPlayer .timingsWrapper .songDuration{right:0;color:grey}.bbc.customAudioPlayer .timingsWrapper .songDuration:before{display:block;position:absolute;top:1em;left:0;content:'/'}.bbc.customAudioPlayer .songProgressSliderWrapper{height:1em;line-height:1;position:absolute;top:1em;left:1em;right:1em}.bbc.customAudioPlayer .songProgressSliderWrapper .songProgressSlider{width:100%;padding:0;height:1em;margin:0;position:absolute;top:0;left:0;opacity:0}.bbc.customAudioPlayer .songProgressSliderWrapper .pseudoProgressBackground{height:.5em;position:absolute;top:.25em;left:0;background:#000;width:100%}.bbc.customAudioPlayer .songProgressSliderWrapper .pseudoProgressIndicator{height:.5em;position:absolute;top:.25em;left:0;background:#f54997;width:0}.bbc.customAudioPlayer .songProgressSliderWrapper .pseudoProgressPlayhead{background:#000;box-shadow:inset #fff 0 0 0 .2em;width:.5em;height:1em;position:absolute;top:0;left:0;margin-left:-.25em}.bbc.customAudioPlayer input[type=range].songProgressSlider::-webkit-slider-runnable-track{width:100%;font-size:.6rem;height:2em;cursor:pointer}.bbc.customAudioPlayer input[type=range].songProgressSlider::-moz-range-track{width:100%;height:.6rem;cursor:pointer}.bbc.customAudioPlayer input[type=range].songProgressSlider::-ms-track{width:100%;height:.6rem;cursor:pointer}.bbc.customAudioPlayer .songVolume{width:9em;height:3em;position:absolute;bottom:0;left:3em;background:#000;border-right:1px solid #363733}.bbc.customAudioPlayer .songMuteButton{width:3em;height:3em;font-size:1em;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;bottom:0;left:0;cursor:pointer;background:#000;color:transparent}.bbc.customAudioPlayer .songMuteButton:after,.bbc.customAudioPlayer .songMuteButton:before{display:block;width:.5em;height:.5em;position:absolute;content:'';top:50%;right:50%}.bbc.customAudioPlayer .songMuteButton:before{margin-right:.1em;transform:translateY(-50%);background:#fff}.bbc.customAudioPlayer .songMuteButton:after{margin-top:-.5em;border-top:.5em solid transparent;border-right:.5em solid #fff;border-bottom:.5em solid transparent}.bbc.customAudioPlayer .songVolumeLabel,.bbc.customAudioPlayer .songVolumeValue{top:50%;font-size:0;left:50%;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg);position:absolute;display:block}.bbc.customAudioPlayer .songVolume:hover .songMuteButton{background:#f54997}.bbc.customAudioPlayer .songVolumeLabel{height:1rem;margin-top:-.5rem;width:1rem;border-radius:0 .8rem 0 0}.bbc.customAudioPlayer .songVolumeValue{height:.6rem;margin-top:-.3rem;width:.6rem;border-radius:0 .5rem 0 0}.bbc.customAudioPlayer .songMuteButton.songMuted+.songVolumeLabelWrapper .songVolumeLabel{border-right:0;border-radius:0;width:.6rem;transform-origin:center;transform:rotate(-45deg);height:0;margin-top:-.05rem;margin-left:.2rem}.bbc.customAudioPlayer .songMuteButton.songMuted+.songVolumeLabelWrapper .songVolumeValue{border-right:0;border-radius:0;height:0;width:.6rem;margin-top:-.05rem;transform-origin:center;margin-left:.2rem}.bbc.customAudioPlayer .songVolumeLabelWrapper{position:absolute;height:3em;width:3em;top:0;left:0;pointer-events:none}.bbc.customAudioPlayer .songVolumeSliderWrapper{transform-origin:0 0;top:0;left:3em;height:3em;position:relative;background:#000;border-left:1px solid #363733;width:6em}.bbc.customAudioPlayer .songVolumeSliderWrapper .songVolumeSlider{width:100%;padding:0;margin:0;height:3em;left:0;opacity:0}.bbc.customAudioPlayer .songVolumeSliderWrapper .pseudoVolumeBackground{height:1.5em;position:absolute;bottom:.5em;left:0;background:grey;width:100%;background-image:linear-gradient(to right,grey 0,grey .25em,#000 .25em,#000 .5em,grey .5em,grey .75em,#000 .75em,#000 1em,grey 1em,grey 1.25em,#000 1.25em,#000 1.5em,grey 1.5em,grey 1.75em,#000 1.75em,#000 2em,grey 2em,grey 2.25em,#000 2.25em,#000 2.5em,grey 2.5em,grey 2.75em,#000 2.75em,#000 3em,grey 3em,grey 3.25em,#000 3.25em,#000 3.5em,grey 3.5em,grey 3.75em,#000 3.75em,#000 4em,grey 4em,grey 4.25em,#000 4.25em,#000 4.5em,grey 4.5em,grey 4.75em,#000 4.75em,#000 5em,grey 5em,grey 5.25em,#000 5.25em,#000 5.5em,grey 5.5em,grey 5.75em,#000 5.75em,#000 6em,grey 6em,grey 6.25em,#000 6.25em,#000 6.5em,grey 6.5em,grey 6.75em,#000 6.75em,#000 7em,grey 7em,grey 7.25em,#000 7.25em,#000 7.5em,grey 7.5em,grey 7.75em,#000 7.75em,#000 8em,grey 8em,grey 8.25em,#000 8.25em,#000 8.5em,grey 8.5em,grey 8.75em,#000 8.75em,#000 9em,grey 9em,grey 9.25em,#000 9.25em,#000 9.5em,grey 9.5em,grey 9.75em,#000 9.75em,#000 10em)}.bbc.customAudioPlayer .songVolumeSliderWrapper .pseudoVolumeIndicator{height:1.5em;position:absolute;bottom:.5em;left:0;background:#f54997;width:100%;background-image:linear-gradient(to right,#f54997 0,#f54997 .25em,#000 .25em,#000 .5em,#f54997 .5em,#f54997 .75em,#000 .75em,#000 1em,#f54997 1em,#f54997 1.25em,#000 1.25em,#000 1.5em,#f54997 1.5em,#f54997 1.75em,#000 1.75em,#000 2em,#f54997 2em,#f54997 2.25em,#000 2.25em,#000 2.5em,#f54997 2.5em,#f54997 2.75em,#000 2.75em,#000 3em,#f54997 3em,#f54997 3.25em,#000 3.25em,#000 3.5em,#f54997 3.5em,#f54997 3.75em,#000 3.75em,#000 4em,#f54997 4em,#f54997 4.25em,#000 4.25em,#000 4.5em,#f54997 4.5em,#f54997 4.75em,#000 4.75em,#000 5em,#f54997 5em,#f54997 5.25em,#000 5.25em,#000 5.5em,#f54997 5.5em,#f54997 5.75em,#000 5.75em,#000 6em,#f54997 6em,#f54997 6.25em,#000 6.25em,#000 6.5em,#f54997 6.5em,#f54997 6.75em,#000 6.75em,#000 7em,#f54997 7em,#f54997 7.25em,#000 7.25em,#000 7.5em,#f54997 7.5em,#f54997 7.75em,#000 7.75em,#000 8em,#f54997 8em,#f54997 8.25em,#000 8.25em,#000 8.5em,#f54997 8.5em,#f54997 8.75em,#000 8.75em,#000 9em,#f54997 9em,#f54997 9.25em,#000 9.25em,#000 9.5em,#f54997 9.5em,#f54997 9.75em,#000 9.75em,#000 10em)}.bbc.customAudioPlayer .songVolumeSliderWrapper .pseudoVolumePlayhead{background:#fff;width:.2em;height:2em;position:absolute;bottom:.5em;left:100%;margin-left:-.1em}.bbc.customAudioPlayer .songVolume:hover .songVolumeSliderWrapper{display:block}.bbc.customAudioPlayer input[type=range].songVolumeSlider::-webkit-slider-runnable-track{width:100%;font-size:1em;height:3em;cursor:pointer}.bbc.customAudioPlayer input[type=range].songVolumeSlider::-moz-range-track{width:100%;height:3em;cursor:pointer}.bbc.customAudioPlayer input[type=range].songVolumeSlider::-ms-track{width:100%;height:3em;cursor:pointer}@keyframes slide{0%{transform:translateX(-2em)}100%{transform:translateX(0)}}@keyframes ellipsis{0%,100%{content:'Loading'}25%{content:'Loading.'}50%{content:'Loading..'}75%{content:'Loading...'}}
            
          
!
            
              // Picobel.js
function Picobel(e){function t(){var e=document.getElementsByTagName("audio"),t=[].slice.call(e);return t}function n(e){output=[];for(var t=0;t<e.length;t++)item={},item.url=e[t].src,output.push(item);return output}function a(t){for(var n=0;n<t.length;n++){var a=document.createElement("div");a.className="customAudioPlayer loading player_"+n;var s=H[n].className;""!==s&&M(a,s),M(a,e.theme),a.setAttribute("data-song-index",n);var r=document.createElement("div");r.className="loader",a.appendChild(r);var i=document.createElement("button");i.className="playerTrigger";var d=document.createElement("span");d.className="buttonText",d.innerHTML="play",i.appendChild(d);var l=document.createElement("div");l.className="metaWrapper";var o=document.createElement("span");o.className="titleDisplay",o.innerHTML="File "+(n+1),l.appendChild(o);var u=document.createElement("span");u.className="artistDisplay",l.appendChild(u);var m=document.createElement("div");m.className="timingsWrapper";var c=document.createElement("span");c.className="songPlayTimer",c.innerHTML="0:00",m.appendChild(c);var p=document.createElement("div");p.className="songProgressSliderWrapper";var g=document.createElement("div");g.className="pseudoProgressBackground",p.appendChild(g);var v=document.createElement("div");v.className="pseudoProgressIndicator",p.appendChild(v);var h=document.createElement("div");h.className="pseudoProgressPlayhead",p.appendChild(h);var N=document.createElement("input");N.type="range",N.min=0,N.max=100,N.value=0,N.className="songProgressSlider",p.appendChild(N),m.appendChild(p);var y=document.createElement("span");y.className="songDuration",y.innerHTML="-:--",m.appendChild(y);var E=document.createElement("div");E.className="songVolume";var f=document.createElement("button");f.className="songMuteButton",f.innerHTML="Mute",E.appendChild(f);var C=document.createElement("div");C.className="songVolumeLabelWrapper";var L=document.createElement("span");L.className="songVolumeLabel",L.innerHTML="Volume",C.appendChild(L);var P=document.createElement("span");P.className="songVolumeValue",P.innerHTML="10",C.appendChild(P),E.appendChild(C);var T=document.createElement("div");T.className="songVolumeSliderWrapper";var b=document.createElement("div");b.className="pseudoVolumeBackground",T.appendChild(b);var x=document.createElement("div");x.className="pseudoVolumeIndicator",T.appendChild(x);var B=document.createElement("div");B.className="pseudoVolumePlayhead",T.appendChild(B);var A=document.createElement("input");A.type="range",A.min=0,A.max=1,A.value=1,A.step=.1,A.className="songVolumeSlider",T.appendChild(A),E.appendChild(T),a.appendChild(i),a.appendChild(l),a.appendChild(m),a.appendChild(E),t[n].parentNode.replaceChild(a,t[n])}}function s(e){for(var t=[],n=0;n<e.length;n++)t[n]=new Audio(e[n].url),t[n].currentTime=0,w[n].addEventListener("click",h,!1),U[n].addEventListener("input",m,!1),O[n].addEventListener("input",c,!1),t[n].addEventListener("timeupdate",y,!1),t[n].addEventListener("loadstart",r,!1),t[n].addEventListener("canplaythrough",d,!1),D[n].addEventListener("click",N,!1),t[n].addEventListener("error",C,!1),t[n].addEventListener("stalled",L,!1),t[n].addEventListener("waiting",C,!1),t[n].addEventListener("progress",P,!1),t[n].setAttribute("data-song-index",n);return t}function r(){}function d(){var e=this.getAttribute("data-song-index");f(e),x(S[e],"loading"),l(e)}function l(e){var t=G[e].src,n=B(t),a=A(t),s=H[e].title;""!==s?k[e].innerHTML=s:k[e].innerHTML=a+"."+n;var r=H[e].getAttribute("data-artist");""!==r&&(R[e].innerHTML=r)}function o(){for(var e=0;e<V.length;e++)G[e].pause()}function u(e){J=e;for(var t=0;t<V.length;t++)t!=e&&G[t].pause();G[e].play()}function m(){var e=this.value,t=this.parentNode.parentNode.parentNode.getAttribute("data-song-index"),n=G[t].duration,a=n*(e/100);a=a.toFixed(2),G[t].currentTime=a,E(t)}function c(){var e=this.value,t=this.parentNode.parentNode.parentNode.getAttribute("data-song-index");g(t,!1),p(t,e)}function p(e,t){var n=10*t,a=100*t;G[e].volume=t,_[e].innerHTML=n,O[e].value=t,q[e].style.width=a+"%",z[e].style.left=a+"%"}function g(e,t){var n;t?(n=G[e].volume,D[e].setAttribute("data-saved-volume",n),p(e,0),M(D[e],"songMuted"),x(D[e],"songUnmuted"),D[e].innerHTML="unmute"):(n=D[e].getAttribute("data-saved-volume"),"undefined"!=typeof n&&n>0?p(e,n):p(e,1),x(D[e],"songMuted"),M(D[e],"songUnmuted"),D[e].innerHTML="mute")}function v(e,t){var n=F[e],a=w[e];if(t){for(i=0;i<w.length;i++)x(w[i],"songPlaying"),M(w[i],"songPaused"),F[i].innerHTML="play";u(e),M(a,"songPlaying"),x(a,"songPaused"),n.innerHTML="pause"}else o(),x(a,"songPlaying"),M(a,"songPaused"),n.innerHTML="play"}function h(){var e=this.parentNode.getAttribute("data-song-index");if("undefined"!=typeof e){var t=!b(this,"songPlaying");v(e,t)}else console.log("too soon to play!")}function N(){var e=this.parentNode.parentNode.getAttribute("data-song-index");F[e];b(this,"songMuted")?g(e,!1):g(e,!0)}function y(){var e=this.getAttribute("data-song-index");E(e)}function E(e){var t=G[e].currentTime,n=G[e].duration;progressParsed=T(t),I[e].innerHTML=progressParsed,t>=n&&x(w[e],"songPlaying");var a=(t/n*100).toFixed(2);U[e].value=a,j[e].style.width=a+"%",$[e].style.left=a+"%"}function f(e){var t=G[e].duration,n=T(t);W[e].innerHTML=n}function C(e){this.getAttribute("data-song-index")}function L(e){var t=this.getAttribute("data-song-index");v(t,!1)}function P(e){var t=this.getAttribute("data-song-index");G[t].readyState}function T(e){var t=Math.floor(e%3600/60);t=t.toFixed(0),t=t.toString();var n=Math.floor(e%3600%60);n=n.toFixed(0),n=n.toString(),n<10&&(n="0"+n);var a=t+":"+n;return a}function b(e,t){var n;return n=e.classList?e.classList.contains(t):new RegExp("(^| )"+t+"( |$)","gi").test(e.className)}function M(e,t){e.classList?e.classList.add(t):e.className+=" "+t}function x(e,t){e.classList?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\b)"+t.split(" ").join("|")+"(\\b|$)","gi")," ")}function B(e){return e.substr((~-e.lastIndexOf(".")>>>0)+2)}function A(e){var t=e.replace(/^.*[\\\/]/,""),n=t.split(".")[0];return n}e="undefined"!=typeof e?e:{},e.theme=e.theme||"basicPlayer";var H=t(),V=n(H);a(H);var S=document.getElementsByClassName("customAudioPlayer"),w=document.getElementsByClassName("playerTrigger"),D=document.getElementsByClassName("songMuteButton"),F=document.getElementsByClassName("buttonText"),I=document.getElementsByClassName("songPlayTimer"),W=document.getElementsByClassName("songDuration"),k=document.getElementsByClassName("titleDisplay"),R=document.getElementsByClassName("artistDisplay"),U=document.getElementsByClassName("songProgressSlider"),$=document.getElementsByClassName("pseudoProgressPlayhead"),j=document.getElementsByClassName("pseudoProgressIndicator"),O=document.getElementsByClassName("songVolumeSlider"),_=document.getElementsByClassName("songVolumeValue"),q=document.getElementsByClassName("pseudoVolumeIndicator"),z=document.getElementsByClassName("pseudoVolumePlayhead"),G=s(V),J=0;return{sliderScrub:m,playSong:u,pauseAll:o}}

Picobel({theme:'bbc'});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console