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>
            
          
!
            
              @charset "UTF-8";.skeleton.customAudioPlayer .playerTrigger:focus,.skeleton.customAudioPlayer .songVolume .songMuteButton:focus{outline:0}@keyframes basic_slide{0%{transform:translateX(-2em)}100%{transform:translateX(0)}}.skeleton.customAudioPlayer{font-size:10px;position:relative;box-sizing:border-box;overflow:hidden;z-index:1;margin:1em 0;height:4em;border:.1em solid #555}.skeleton.customAudioPlayer *,.skeleton.customAudioPlayer :after,.skeleton.customAudioPlayer :before{box-sizing:inherit}.skeleton.customAudioPlayer .loader{position:absolute;bottom:0;left:4em;right:0;height:2em;overflow:hidden;opacity:0;transition:opacity .2s}.skeleton.customAudioPlayer .loader:before{display:block;content:'';width:200%;height:100%;position:absolute;z-index:1;top:0;left:0;transform-origin:center center;box-shadow:inset #555 0 0 0 0,inset #fff 1em 0 0 0,inset #555 2em 0 0 0,inset #fff 3em 0 0 0,inset #555 4em 0 0 0,inset #fff 5em 0 0 0,inset #555 6em 0 0 0,inset #fff 7em 0 0 0,inset #555 8em 0 0 0,inset #fff 9em 0 0 0,inset #555 10em 0 0 0,inset #fff 11em 0 0 0,inset #555 12em 0 0 0,inset #fff 13em 0 0 0,inset #555 14em 0 0 0,inset #fff 15em 0 0 0,inset #555 16em 0 0 0,inset #fff 17em 0 0 0,inset #555 18em 0 0 0,inset #fff 19em 0 0 0,inset #555 20em 0 0 0,inset #fff 21em 0 0 0,inset #555 22em 0 0 0,inset #fff 23em 0 0 0,inset #555 24em 0 0 0,inset #fff 25em 0 0 0,inset #555 26em 0 0 0,inset #fff 27em 0 0 0,inset #555 28em 0 0 0,inset #fff 29em 0 0 0,inset #555 30em 0 0 0,inset #fff 31em 0 0 0,inset #555 32em 0 0 0,inset #fff 33em 0 0 0,inset #555 34em 0 0 0,inset #fff 35em 0 0 0,inset #555 36em 0 0 0,inset #fff 37em 0 0 0,inset #555 38em 0 0 0,inset #fff 39em 0 0 0,inset #555 40em 0 0 0,inset #fff 41em 0 0 0,inset #555 42em 0 0 0,inset #fff 43em 0 0 0,inset #555 44em 0 0 0,inset #fff 45em 0 0 0,inset #555 46em 0 0 0,inset #fff 47em 0 0 0,inset #555 48em 0 0 0,inset #fff 49em 0 0 0,inset #555 50em 0 0 0,inset #fff 51em 0 0 0,inset #555 52em 0 0 0,inset #fff 53em 0 0 0,inset #555 54em 0 0 0,inset #fff 55em 0 0 0,inset #555 56em 0 0 0,inset #fff 57em 0 0 0,inset #555 58em 0 0 0,inset #fff 59em 0 0 0,inset #555 60em 0 0 0,inset #fff 61em 0 0 0,inset #555 62em 0 0 0,inset #fff 63em 0 0 0,inset #555 64em 0 0 0,inset #fff 65em 0 0 0,inset #555 66em 0 0 0,inset #fff 67em 0 0 0,inset #555 68em 0 0 0,inset #fff 69em 0 0 0,inset #555 70em 0 0 0,inset #fff 71em 0 0 0,inset #555 72em 0 0 0,inset #fff 73em 0 0 0,inset #555 74em 0 0 0,inset #fff 75em 0 0 0,inset #555 76em 0 0 0,inset #fff 77em 0 0 0,inset #555 78em 0 0 0,inset #fff 79em 0 0 0,inset #555 80em 0 0 0,inset #fff 81em 0 0 0,inset #555 82em 0 0 0,inset #fff 83em 0 0 0,inset #555 84em 0 0 0,inset #fff 85em 0 0 0,inset #555 86em 0 0 0,inset #fff 87em 0 0 0,inset #555 88em 0 0 0,inset #fff 89em 0 0 0,inset #555 90em 0 0 0,inset #fff 91em 0 0 0,inset #555 92em 0 0 0,inset #fff 93em 0 0 0,inset #555 94em 0 0 0,inset #fff 95em 0 0 0,inset #555 96em 0 0 0,inset #fff 97em 0 0 0,inset #555 98em 0 0 0,inset #fff 99em 0 0 0,inset #555 100em 0 0 0;animation:basic_slide linear infinite .4s}.skeleton.customAudioPlayer.loading .loader{opacity:1}.skeleton.customAudioPlayer .playerTrigger{font-size:1em;border:none;border-right:.1em solid #555;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:4em;height:4em;background:#fff;position:absolute;top:0;left:0;cursor:pointer}.skeleton.customAudioPlayer .playerTrigger .buttonText{display:none}.skeleton.customAudioPlayer .playerTrigger:before{content:'';display:block;position:absolute;top:50%;left:50%;margin-top:-.8em;margin-left:-.4em;border-top:.8em solid transparent;border-left:1em solid #555;border-bottom:.8em solid transparent}.skeleton.customAudioPlayer .playerTrigger:after{content:'';display:block;position:absolute;top:50%;right:50%;height:1.4em;margin-top:-.7em;margin-right:-.7em;border-top:0;border-left:.5em solid #555;border-bottom:0;opacity:0}.skeleton.customAudioPlayer .playerTrigger.songPlaying:before{height:1.4em;margin-top:-.7em;margin-left:-.7em;border-top:0;border-left:.5em solid #555;border-bottom:0}.skeleton.customAudioPlayer .playerTrigger.songPlaying:after{opacity:1}.skeleton.customAudioPlayer .metaWrapper{padding:0 1em 0 4.5em;height:4em;overflow:hidden;background:#fff;color:#555;line-height:1.6}.skeleton.customAudioPlayer .metaWrapper .titleDisplay{display:inline-block;line-height:1;font-weight:700;margin-right:.5em;font-family:monospace}.skeleton.customAudioPlayer .metaWrapper .titleDisplay:after{content:' – '}.skeleton.customAudioPlayer .metaWrapper .artistDisplay{font-family:monospace;display:inline-block;line-height:1}.skeleton.customAudioPlayer.loading .pseudoProgressIndicator,.skeleton.customAudioPlayer.loading .pseudoProgressPlayhead,.skeleton.customAudioPlayer.loading .songDuration,.skeleton.customAudioPlayer.loading .songPlayTimer{display:none}.skeleton.customAudioPlayer .timingsWrapper{position:absolute;bottom:0;left:10em;right:0;height:2em;border-left:.1em solid #555}.skeleton.customAudioPlayer .timingsWrapper .songDuration,.skeleton.customAudioPlayer .timingsWrapper .songPlayTimer{position:absolute;bottom:0;z-index:3;width:4em;text-align:center;background:0 0;color:#555;line-height:1;pointer-events:none;font-size:1em;padding-bottom:.5em;font-family:monospace}.skeleton.customAudioPlayer .timingsWrapper .songPlayTimer{left:0}.skeleton.customAudioPlayer .timingsWrapper .songDuration{right:0}.skeleton.customAudioPlayer .songProgressSliderWrapper{height:2em;font-size:1em;line-height:1;position:absolute;bottom:0;left:0;width:100%;background:#fff;overflow:hidden;border-top:.1em solid #555}.skeleton.customAudioPlayer .songProgressSliderWrapper .songProgressSlider{width:100%;padding:0;margin:0;position:absolute;top:0;left:0;opacity:0}.skeleton.customAudioPlayer .songProgressSliderWrapper .pseudoProgressIndicator{height:2em;position:absolute;top:0;left:0;background:#ddd;width:0}.skeleton.customAudioPlayer .songProgressSliderWrapper .pseudoProgressPlayhead{width:.5em;height:2em;position:absolute;top:0;left:0;margin-left:-.2em;background:#555}.skeleton.customAudioPlayer input[type=range].songProgressSlider::-webkit-slider-runnable-track{width:100%;font-size:1em;height:2em;cursor:pointer}.skeleton.customAudioPlayer input[type=range].songProgressSlider::-moz-range-track{width:100%;height:2em;cursor:pointer}.skeleton.customAudioPlayer input[type=range].songProgressSlider::-ms-track{width:100%;height:2em;cursor:pointer}.skeleton.customAudioPlayer .songVolume{position:absolute;bottom:0;left:4em;width:6em;height:2em;overflow:hidden;z-index:2;border-top:.1em solid #555;background:#fff}.skeleton.customAudioPlayer .songVolume .songMuteButton{display:block;z-index:2;float:left;width:2em;height:2em;font-size:1em;color:transparent;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;position:relative;cursor:pointer}.skeleton.customAudioPlayer .songVolume .songMuteButton:after,.skeleton.customAudioPlayer .songVolume .songMuteButton:before{display:block;width:.5em;position:absolute;top:50%;transform:translateY(-50%);right:50%;content:''}.skeleton.customAudioPlayer .songVolume .songMuteButton:before{height:.4em;margin-right:-.1em;background:#555}.skeleton.customAudioPlayer .songVolume .songMuteButton:after{height:.5em;margin-right:-.2em;border-top:.5em solid transparent;border-right:.5em solid #555;border-bottom:.5em solid transparent}.skeleton.customAudioPlayer .songVolume .songMuteButton.songMuted:before{background:#ddd}.skeleton.customAudioPlayer .songVolume .songMuteButton.songMuted:after{border-right-color:#ddd}.skeleton.customAudioPlayer .songVolumeValue{margin-left:.2em}.skeleton.customAudioPlayer .songVolumeLabelWrapper{display:none}.skeleton.customAudioPlayer .songVolumeSliderWrapper{display:block;height:1em;position:relative;margin:.5em;left:0;z-index:3;background:#ddd;width:3em;float:left;transform:rotate(180deg);overflow:hidden}.skeleton.customAudioPlayer .songVolumeSliderWrapper:after{content:'';display:block;width:100%;border-right:3em solid #fff;border-top:1em solid transparent;position:absolute;top:0;left:0;pointer-events:none}.skeleton.customAudioPlayer .songVolumeSliderWrapper .songVolumeSlider{width:100%;padding:0;margin:0;height:1em;position:absolute;top:0;left:0;opacity:0;transform:rotate(180deg)}.skeleton.customAudioPlayer .songVolumeSliderWrapper .pseudoVolumeIndicator{height:1em;position:absolute;top:0;right:0;background:#555;width:100%}.skeleton.customAudioPlayer .songVolumeSliderWrapper .pseudoVolumePlayhead{display:none}.skeleton.customAudioPlayer input[type=range].songVolumeSlider::-webkit-slider-runnable-track{width:100%;font-size:1em;height:1.5em;cursor:pointer}.skeleton.customAudioPlayer input[type=range].songVolumeSlider::-moz-range-track{width:100%;height:1.5em;cursor:pointer}.skeleton.customAudioPlayer input[type=range].songVolumeSlider::-ms-track{width:100%;height:1.5em;cursor:pointer}
            
          
!
            
              // 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:'skeleton'});
            
          
!
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