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