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