css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

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