Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <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>
              
            
!

CSS

              
                @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}
              
            
!

JS

              
                // 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

Console