I am working on an audio tag that initially hides the controls, and only shows them when a user clicks on a specific link. Here is the code snippet:
var audio = document.getElementById(audioId);
if (audio.paused) {
audio.src = clip;
audio.play();
audio.setAttribute("controls", "controls");
}
else {
audio.removeAttribute("controls");
audio.pause();
audio.currentTime = 0;
}
Here, 'clip' represents the URL of the audio file to be played.
The audio element looks like this:
<audio id="audio1"></audio>
My question is: How can I customize the position and size of these controls? Additionally, the audio tag is nested within a list item, and for other list items, I adjust the position as follows:
#track_title {
position:absolute;
top: 2px;
left: 80px;
font-size: 15px;
font-weight: bold;
}