Customizable audio player for webpages
What issues are disccused here:
- embedding audio player to an html page
- customizing audio player using css
- setup of audio player (with extra capabilities) using javascript
Is it impossible to customize audio tag (enable styles for a standart html audio player)?
As stated in MDN Web Docs:
You can style the default controls with properties that affect the block as a single unit…You can’t however style the individual components inside the audio player (e.g. change the button size or icons, change the font, etc.)…
Which means that you can’t use only a default audio representaion if you need to:
- change forms and colors of control elements
- add custom control elements
- apply animations and other visual features to inner content of an audio block
How to create custom html audio block?
There are two functional parts:
- Html structure with control elements to use speacific features of an audio player. An html template of a needed player.
- Javascript functions to handle events of the control elements and use audio player capabilities via HTMLMediaElement Api.
Standart audio player
<audio controls> <source src="/audio.mp3" type="audio/mp3"> Your browser does not support the audio element. </audio>
Html template of a custom audio player
Basically custom template uses standart player as its core, but audio block is not displayed.
<div class="player"> <audio id="av-tag" controls><source src="/audio.mp3" type="audio/mp3"> Your browser does not support the audio element. </audio> <button class="play-btn">►</button> <div class="play-time">1:00</div> <input id="cur-time" type="range" min="0" max="10" step="0"> <div id="speaker">🔊</div> <input id="volume" type="range" min="0" max="10"> </div>
1:00
🔊
Javascript HTMLMediaElement Api
document.addEventListener("DOMContentLoaded", (e)=> { //dom objects of colntrol elements var av = document.getElementById("av-tag"); var playTime = document.getElementsByClassName("play-time")[0]; var playBtn=document.getElementsByClassName("play-btn")[0]; var curTime=document.getElementById("cur-time"); var volume = document.getElementById("volume"); var speaker=document.getElementById("speaker"); //variable to check if player is playing or not var isPlaying = false; av.onloadedmetadata = function() { curTime.max=av.duration; }; //function of displaying current time av.ontimeupdate=function() { var sec_num = av.currentTime; var hours = Math.floor(sec_num / 3600); var minutes = Math.floor((sec_num - (hours * 3600)) / 60); var seconds = sec_num - (hours * 3600) - (minutes * 60); seconds=Math.round(seconds); if (hours < 10) { hours = "0"+hours; } if (minutes < 10) { minutes = "0"+minutes; } if (seconds < 10) { seconds = "0"+seconds; } playTime.innerHTML = minutes+':'+seconds; if(isPlaying) curTime.value=av.currentTime; }; //function to control volume volume.onchange=function() { av.volume = volume.value/10; }; //function to control playing time curTime.onchange=function() { av.pause(); av.currentTime=curTime.value; av.play(); }; //function to switch off or switch on volume by click on speacker speaker.onclick=function() { if(volume.value==0) { volume.value=10; av.volume=1; } else { volume.value=0; av.volume=0; } }; //function to control play/pause and display play button symbol playBtn.addEventListener("click", (a)=> { if(isPlaying) { av.pause(); isPlaying=false; playBtn.innerHTML="►"; } else { av.play(); isPlaying=true; playBtn.innerHTML="❚❚"; } }); });
CSS styles for audio player
.player * { display: inline-block; vertical-align: middle; background: none; border: none; font-size: x-large; } .player audio { display: none; } .player { border: 2px solid #600a6f; background: #e9defd; width: max-content; padding: 12px; border-radius: 20px; } .player input[type="range"] { -webkit-appearance: none; height: 5px; border-radius: 5px; background: white; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; } .player input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 10px; height: 10px; border-radius: 50%; background: #4CAF50; cursor: pointer; } .player input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: #4CAF50; cursor: pointer; } #volume { width: 40px; }