HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
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.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<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'});
Also see: Tab Triggers