In 30 seconds or so add an audio player to your footer. Just copy/paste all of the following to your custom footer box on your admin’s appearance page. In the div at the end of the code, put your audio url. It’s this: https://github.com/Freeedle/Essential-Audio-Player
I may make another audio extension which uses this because it’s minimal, JS is only 8kb, yet it lets you play, pause, and seek.
<style>
div.essential_audio {
position: relative;
z-index: 0;
width: 100%;
}
/* 2. The Player Button – General */
div.essential_audio > div:nth-child(1) div {
width: 28px;
height: 28px;
margin-top: -13px;
border-radius: 14px;
background-color: #000;
}
div.essential_audio > div:nth-child(1) div:after {
position: absolute;
top: 2px;
left: 2px;
width: 24px;
height: 24px;
}
/* Set here how much the button exceeds the horizontal track limits: */
/* This must not be deleted! (but can be changed, of course) */
:root {
--button-protrusion: 4px;
}
/* 2.a) The Player Button – Off */
div.essential_audio > div:nth-child(1) div.off:after {
content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><polygon fill='%23FFF' points='10,6.9 10,23.1 24,15' /></svg>");
}
/* 2.b) The Player Button – Loading */
div.essential_audio > div:nth-child(1) div.load:after {
content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><circle opacity='0.64' fill='%23FFFFFF' cx='6.5' cy='18.5' r='2'/><circle opacity='0.76' fill='%23FFFFFF' cx='6.5' cy='11.5' r='2'/><circle opacity='0.88' fill='%23FFFFFF' cx='11.5' cy='6.5' r='2'/><circle fill='%23FFFFFF' cx='18.5' cy='6.5' r='2'/><circle opacity='0.16' fill='%23FFFFFF' cx='23.5' cy='11.5' r='2'/><circle opacity='0.28' fill='%23FFFFFF' cx='23.5' cy='18.5' r='2'/><circle opacity='0.4' fill='%23FFFFFF' cx='18.5' cy='23.4' r='2'/><circle opacity='0.52' fill='%23FFFFFF' cx='11.5' cy='23.4' r='2'/></svg>");
animation: audio_load_rotate 1s infinite linear;
}
@keyframes audio_load_rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 2.c) The Player Button – Playing */
div.essential_audio > div:nth-child(1) div.play {
background-color: #000!important;
}
div.essential_audio > div:nth-child(1) div.play:after {
content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><rect fill='%23FFF' x='17' y='8' width='3' height='14' /><rect fill='%23FFF' x='10' y='8' width='3' height='14' /></svg>");
}
/* 2.d) The Player Button – Dragging */
div.essential_audio > div:nth-child(1) div.drag {
transition: left 0s!important;
}
/* 2.e) The Player Button – Error */
div.essential_audio > div:nth-child(1) div.error {
background-color: rgba(0,0,0,0.35)!important;
}
div.essential_audio > div:nth-child(1) div.error:after {
content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path fill='%23FFF' d='M13.9,18.6c0-0.3,0-0.5,0-0.9c0-1.6,0.6-2.9,2.1-3.9l1.1-0.8c0.9-0.6,1.3-1.5,1.3-2.4c0-1.5-1-2.8-3-2.8c-2.2,0-3.1,1.6-3.1,3.2c0,0.2,0,0.4,0,0.5L10,11.9c-0.1-0.3-0.1-0.8-0.1-1.2c0-2.3,1.7-5.1,5.5-5.1c3.5,0,5.5,2.5,5.5,5c0,2-1.1,3.4-2.5,4.3l-1.2,0.8c-0.8,0.5-1.1,1.4-1.1,2.4c0,0.1,0,0.2,0,0.5H13.9z'/><path fill='%23FFF' d='M15,20.8c1,0,1.8,0.8,1.8,1.8S16,24.4,15,24.4c-1,0-1.8-0.8-1.8-1.8S14,20.8,15,20.8z'/></svg>");
}
/* 3. The Track */
div.essential_audio > div:nth-child(2) {
height: 2px;
}
div.essential_audio > div:nth-child(2):after {
content: "";
position: absolute;
z-index: 0;
background-color: #000;
opacity: 0.3;
mix-blend-mode: multiply;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
/* 4. The Loading Progress Bar */
div.essential_audio > div:nth-child(2) div {
background-color: #666;
mix-blend-mode: multiply;
}
/* 5. The Klick & Drag Sensor */
div.essential_audio > div:nth-child(3) {
height: 12px;
margin-top: -5px;
}
/****************************************/
/* */
/* Section 2: Core Values */
/* */
/****************************************/
/* 1. The Main Container + General Settings */
div.essential_audio,
div.essential_audio * {
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-overflow-scrolling: auto;
}
div.essential_audio *:focus {
outline: none;
}
/* 2. The Player Button */
div.essential_audio > div:nth-child(1) div {
position: absolute;
top: 0px;
left: 0px;
cursor: pointer;
}
/* 2.a) Container for Player Button */
div.essential_audio > div:nth-child(1) {
position: absolute;
z-index: 3;
height: 0px;
top: 0px;
left: calc(var(--button-protrusion) * -1);
width: calc(100% + (2 * var(--button-protrusion)));
}
/* 3. The Track */
div.essential_audio > div:nth-child(2) {
position: relative;
width: 100%;
overflow: hidden;
}
/* 4. The Loading Progress Bar */
div.essential_audio > div:nth-child(2) div {
position: absolute;
z-index: 1;
width: 0%;
height: 100%;
top: 0px;
left: 0px;
transition: width 0.5s;
}
/* 5. The Klick & Drag Sensor */
div.essential_audio > div:nth-child(3) {
position: absolute;
z-index: 2;
width: 100%;
top: 0px;
left: 0px;
}
</style>
<script>
// Essential Audio Player v1.0.2
var Essential_Audio=(()=>{var t=true;var f=false;var n=null;var A={};var b=[];var c=f;var d=f;var h=0;const g=[["mp3","mpeg"],["ogg","ogg"],["wav","wav"],["aac","mpeg"],["m4a","mpeg"]];var j;var k;var l;var m=f;var o;var p;var q=50;var pa="div.essential_audio";var pb="div:nth-child(1)";var pf="mousemove";var pg="touchmove";var ph="mouseup";var pj="touchend";var pk="?random="+Math.floor(Math.random()*1001);var pl=(a)=>{return a.duration};var pm=(a)=>{return a.currentTime};var pn=(a)=>{return a.buffered};var po=()=>{if(event.changedTouches){l=event.changedTouches[0].pageX}else{l=event.pageX}return l};if(document.readyState!="loading"){B()}else{document.addEventListener("DOMContentLoaded",B)};function B(){var ia=document.querySelectorAll(pa);ia.forEach((vr,ib)=>{vr.innerHTML="<div><div class=\"off\"><!----></div></div><div><div><!----></div></div><div><!----></div>";var ic;if(vr.hasAttribute("id")){ic=vr.getAttribute("id")}else{ic=ib+1;vr.setAttribute("id",ic)}A[ic]=document.createElement("audio");var a=A[ic];a.id=ic;a.za=vr.querySelector(pb).querySelector("div");a.zb=a.za.offsetWidth;a.zc=vr.querySelector(pb).offsetWidth-a.zb;if(a.zc<0){a.zc=0}a.zd=vr.getAttribute("data-url");a.ze=0;a.zf=0;a.zh=0;a.zi=0;a.zj=f;a.zks=0;a.zl=f;a.zm=f;a.zn=f;a.zo=f;a.zp=f;a.zq=f;b[ib]=ic;a.crossOrigin="anonymous";a.preload="metadata";if(vr.hasAttribute("data-loop")){a.loop=t}if(vr.hasAttribute("data-scratch")){a.zr=t}else{a.zr=f}if(vr.hasAttribute("data-autoplay")){if(h<1){h=1;a.autoplay=t;a.preload="auto";c=a;E(a)}}if(vr.hasAttribute("data-preload")){if(!a.autoplay){a.preload="auto";E(a)}}a.za.onmousedown=(e)=>{e.stopPropagation();e.preventDefault();Ba(a)};a.za.ontouchstart=(e)=>{e.stopPropagation();e.preventDefault();Ba(a)};var ie=vr.querySelector("div:nth-child(3)");ie.onmousedown=(e)=>{e.stopPropagation();e.preventDefault();Bb(a)};ie.ontouchstart=(e)=>{e.stopPropagation();e.preventDefault();Bb(a)}})};function Ba(a){a.zp=t;j=po();k=j-(a.za.getBoundingClientRect().left+window.scrollX);window.addEventListener(pf,Bc);var va=setTimeout(function(){window.addEventListener(pg,Bc)},100);function Bc(){if(j!=po()){m=t;if(a.zc>0){a.za.classList.add("drag")}}if(m&&(a.zc>0)){o=po()-(a.za.parentNode.getBoundingClientRect().left+window.scrollX)-k;a.zh=Math.min(Math.max(o,0),a.zc);a.za.style.left=a.zh+"px";if(a.zr&&a.zn){V(a);if(a.paused&&(pm(a)!=pl(a))){a.play()}}}};window.addEventListener(ph,Bd);window.addEventListener(pj,Bd);function Bd(){window.removeEventListener(pf,Bc);window.removeEventListener(pg,Bc);clearTimeout(va);window.removeEventListener(ph,Bd);window.removeEventListener(pj,Bd);if(m){if(pl(a)&&(a.zc>0)){if(!a.zr||!a.zn){V(a)}if(a.zn&&a.paused&&(pm(a)!=pl(a))){a.play()}}m=f;a.za.classList.remove("drag")}else{if(c.id&&(c.id==a.id)&&a.zn){P(a)}if(!a.zl){C(a)}}a.zp=f}};function Bb(a){if(a.zc>0){a.zp=t;j=po();k=Math.floor(a.zb/2);window.addEventListener(pf,Be);window.addEventListener(pg,Be);function Be(){m=t;a.za.classList.add("drag");o=po()-a.za.parentNode.getBoundingClientRect().left-k;a.zh=Math.min(Math.max(o,0),a.zc);a.za.style.left=a.zh+"px";if(a.zr&&a.zn){V(a);if(a.paused&&(pm(a)!=pl(a))){a.play()}}};window.addEventListener(ph,Bf);window.addEventListener(pj,Bf);function Bf(){window.removeEventListener(pf,Be);window.removeEventListener(pg,Be);window.removeEventListener(ph,Bf);window.removeEventListener(pj,Bf);if(m){if(pl(a)){if(!a.zr||a.zn){V(a)}if(a.zn&&a.paused&&(pm(a)!=pl(a))){a.play()}}m=f;a.za.classList.remove("drag")}else{p=po()-a.za.parentNode.getBoundingClientRect().left-k;a.zh=Math.min(Math.max(p,0),a.zc);a.za.style.left=a.zh+"px";if(pl(a)){V(a);if(a.zn){a.play()}}}a.zp=f}}};function C(a){if(c){if(a.id==c.id){R();return}else{ R()}}c=a;if(pl(a)){O(a)}else{if(!a.zj){a.play();a.pause();E(a)}}};function D(a,vq){a.za.setAttribute("class","");a.za.classList.add(vq)};function E(a){D(a,"load");a.zj=t;a.zm=t;a.onplay=()=>{if(!a.zm){clearTimeout(a.td);D(a,"play")}if(a.id==d.id){c=a;d=f;a.zn=t;if(a.zc>0){a.tc=setInterval(Q,q,a)}}};a.onplaying=()=>{clearTimeout(a.td);D(a,"play")};a.onwaiting=()=>{a.td=setTimeout(()=>{D(a,"load")},50)};a.onpause=()=>{if(!a.zm&&!a.zp&&!a.ended){D(a,"off")}if(a.zn&&!a.zm&&!a.ended){R()}};a.onended=()=>{if(a.zc==0&&!a.loop){R(0)}};a.onseeking=()=>{if(a.id==d.id){P(a)}};a.onseeked=()=>{if(a.id==d.id){P(a)}};a.onloadedmetadata=()=>{a.onloadedmetadata=n;J(a)};a.onprogress=()=>{a.onprogress=n;a.ta=setInterval(U,500,a);a.zq=t};var vc=a.zd.substr(a.zd.length-4,a.zd.length);vc=vc.toLowerCase();var vd=f;for(var i=0;i<g.length;i++){if(vc=="."+g[i][0]){var ve=a.zd+pk;F(a,ve,i);vd=t;break}}if(!vd){g.forEach((vr,i)=>{var ve=a.zd+"."+vr[0]+pk;F(a,ve,i)})}};function F(a,ve,vf){var vg=new XMLHttpRequest;vg.onreadystatechange=()=>{if(vg.readyState==2){vg.onreadystatechange=n;G(vg,a,ve,vf)}};vg.onerror=()=>{G(vg,a,ve,vf)};vg.open("HEAD",ve);vg.send()};function G(vg,a,ve,vf){if(vg.status==200){a.ze+=1;a.innerHTML+="<source id=\""+g[vf][0]+"\" src=\""+ve+"\" type=\"audio/"+g[vf][1]+"\" crossorigin=\"anonymous\">"}else{a.zf+=1;if((g.length-a.zf)==0){H(a)}}vg.onerror=n};function H(a){a.zj=f;a.zo=f;a.zn=f;a.zl=t;D(a,"error");if(a.id==c.id){c=f}};function J(a){if(a.preload=="auto"){if(/iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream){a.preload="metadata"}var vi=a.play();if(vi!==undefined){vi.then(()=>{if(a.autoplay){M(a)}else{K(a)}}).catch(error=>{K(a)})}}else{if(a.readyState>2){M(a)}else{V(a);if(a.zh==a.zc){T(a)}a.tb=setInterval(L,250,a)}}};function K(a){a.pause();D(a,"off");a.currentTime=0;a.zh=0;a.zm=f;if(a.autoplay&&c){if(a.id==c.id){d=c;c=f}}};function L(a){V(a);var vj=0;for(var i=0;i<pn(a).length;i++){if(pn(a).start(pn(a).length-1-i)<=pm(a)){vj=pn(a).end(pn(a).length-1-i);break}}if(vj>=pm(a)){clearInterval(a.tb);M(a)}};function M(a){a.zj=f;a.zm=f;if(!a.zn){if(!a.zo){O(a)}}else{R(a)}};function O(a){if(pm(a)==pl(a)){T(a)}V(a);d=f;a.zn=t;if(a.zc>0){a.tc=setInterval(Q,q,a)}a.play();var vs=setTimeout(function(){if(a.zn&&a.paused){R()}clearTimeout(vs)},25);D(a,"play")};function N(vr){if(!vr){if(d){vr=d.id}else{vr=b[0]}}var a=A[vr];if(!a.zn){C(a)}};function Q(a){if(!a.zp){P(a);if(pm(a)==pl(a)){if(a.loop){T(a)}else{R(0)}}}};function P(a){a.zh=Math.round(pm(a)*a.zc/pl(a));a.za.style.left=a.zh+"px"};function R(vp){if(c){clearInterval(c["tc"]);c.zo=t;c.zn=f;c.pause();D(c,"off");if(vp==0){T(c)}else{c.zh=c.za.offsetLeft}if(!c.zm){d=c}c=f}};function T(a){if(pl(a)){a.currentTime=0}a.zh=0;a.za.style.left=0+"px"};function S(vr){if(!vr){if(d){vr=d.id}else{vr=b[0]}}var a=A[vr];T(a)};function U(a){if(pl(a)){if(a.zc==0){var vk=0}else{var vk=Math.round(a.zh/a.zc*pl(a)*100)/100}var vl=0;for(var i=0;i<pn(a).length;i++){if(pn(a).start(pn(a).length-1-i)<=vk){vl=pn(a).end(pn(a).length-1-i);break}}a.zi=Math.round(vl/pl(a)*100);a.za.parentNode.parentNode.querySelector("div:nth-child(2)").querySelector("div").style.width=a.zi+"%";if(a.zi==100){clearInterval(a.ta);a.zq=f}}};function V(a){if(a.zc>0){a.currentTime=a.zh/a.zc*pl(a)}};function W(){var vm=document.querySelectorAll(pa);vm.forEach((vr)=>{var vn=vr.getAttribute("id");var a=A[vn];if(a.zq){clearInterval(a.ta)}a.zb=a.za.offsetWidth;var vo=vr.querySelector(pb).offsetWidth-a.zb;if(vo<0){vo=0}if((a.za.offsetLeft>0)&&(vn!=c.id)){a.zh=Math.round(a.za.offsetLeft/a.zc*vo);a.za.style.left=a.zh+"px"}a.zc=vo;if(pl(a)&&!a.zn){V(a)}if(a.zq){a.ta=setInterval(U,500,a)}})};window.addEventListener("resize",W);return{Audio:A,Play:N,Stop:R,Reset:S,players:Xa,active:Xb,last:Xc};function Xa(){return b}function Xb(){if(c){return c.id}else{return f}}function Xc(){if(d){return d.id}else{return f}}})();
</script>
<div id="player_box">
<div>
<div class="essential_audio" data-url="https://essential.audio/audio/Song.mp3"><span class="no_js">Please activate JavaScript for the audio player.</span></div>
</div>
</div>
