Как отобразить сообщение, когда пользователь нажимает кнопку воспроизведения в аудио теге? - PullRequest
Новая
       5

Как отобразить сообщение, когда пользователь нажимает кнопку воспроизведения в аудио теге?

0 голосов
/ 14 сентября 2018

Я хочу показать пользователю небольшое сообщение, если оно нажмет кнопку воспроизведения, чтобы он знал, что песня загружается (потому что в браузерах нет никакого индикатора загрузки).

Я не использую preload="auto" или "metadata", потому что сервер получал слишком много трафика, и не все пользователи будут слушать эти аудио.

Требуется около 5 секунд, чтобы звук начал воспроизводиться (кажется, что для того, чтобы действительно начать воспроизведение, ему нужно загрузить как минимум 1 или 2 Мб аудио), поэтому я хотел, чтобы это сообщение отображалось во время загрузки звука ( или метаданные загружаются), или, по крайней мере, покажите это в течение 5 секунд после того, как пользователь нажмет кнопку воспроизведения, а затем скроет ее.

Как я могу это сделать?

enter image description here

Ответы [ 2 ]

0 голосов
/ 14 сентября 2018 

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>
0 голосов
/ 14 сентября 2018

AudioElement запускает событие loadstart , просто используйте его: 

myAudio.addEventListener("loadstart", function () {
  console.log(‘start loading ...’)
},false);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...