JSFiddle - React, Tailwind, and code Playground
by MAORBITON
HTML
<!DOCTYPE html>
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="imagetoolbar" content="no" />
<meta name="language" content="EN" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="cache-control" content="no-cache" />
<link rel="shortcut icon" type="image/svg" href="https://essential.audio/pics/favicon.svg" />
<link rel="stylesheet" href="https://essential.audio/css/_fonts.css" />
<link rel="stylesheet" href="essential_audio.css" />
<script src="essential_audio.js"></script>CSS
@charset "UTF-8";
/********** Essential Audio Player 1.0.2 CSS **********/
/****************************************/
/* */
/* Section 1: The Looks */
/* */
/****************************************/
/* 1. The Main Container */
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:...JavaScript
// 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...