How to display a message when user clicks the play button in audio tag?
Question
I want to display a little message to the user if it hits the play button, for him to know the song is loading (because there isn't any loading indicator natively in browsers).
I'm not using preload="auto" or "metadata" because the server was getting too much traffic, and not all users are going to listen to the these audios.
It takes about 5 seconds for the audio to start playing (it seems it has to download at least 1 or 2 Mb of the audio to really start playing), so I wanted this message to be shown while the audio is loading (or the metadata is loading), or at least show this for 5 seconds after the user clicks on the play button and then hide it.
How can I do that?
2 answers
solution1
1 2018-09-14 05:21:12
AudioElement fires event loadstart , just use it:
myAudio.addEventListener("loadstart", function () {
console.log(‘start loading ...’)
},false);
solution2
0 ACCPTED 2018-09-14 05:41:09
function message() { $('#msg').css({ "display":"block" }) setTimeout(hide, 5000); } function hide() { $('#msg').css({ "display":"none" }) }
.msg{ display:none }
<body> <audio controls onclick="message()"> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> <label id ="msg" class = "msg">Loading Please wait..</label> </body> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.