Как получить длительность аудио ( ) до нажатий на play?

15 сентября 2021, 19:50

Есть тег audio на странице. Можно ли при загрузке страницы получить в js перемену длительность аудио до нажатий на кнопку play. Надо что бы мог вывести как информацию - Время прослушивания 3 минуты

Answer 1

Следует учесть, что между объявлением элемента аудио и прочтением его свойства duration должно пройти какое-то количество времени, чтобы браузер успел прочитать из файла эту информацию, в противном случае выдаст NaN. Обеспечить успевание можно такими способами:

1) обернуть вывод duration в функцию onloadeddata(): audio.onloadeddata = function(){console.log(audio.duration);

2) просто создать задержку от 200 мс: setTimeout(function(){console.log(audio.duration)},200);

3) Если между объявлением аудио и выводом duration находится довольно много кода, может оказаться, что на его выполнение уйдёт это необходимое время, и тогда первый или второй пункты не обязательны.

4) Развязка по времени так же произойдёт, если аудио объявить по ходу загрузки страницы, а duration выводить по нажатию на кнопку или по любому другому событию.

Answer 2

Через св-во duration, оно доступно даже когда мы еще не начали воспроизведение

const audio = document.getElementById('audio'); 
audio.onloadeddata = () => { 
  console.log(audio.duration) 
}

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>repl.it</title> 
    <link href="style.css" rel="stylesheet" type="text/css" /> 
  </head> 
  <body> 
    <figure> 
      <figcaption>Listen to the T-Rex:</figcaption> 
      <audio id="audio" 
          controls 
          src="https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3"> 
        Your browser does not support the 
        <code>audio</code> element. 
      </audio> 
    </figure> 
 
    <script src="script.js"></script> 
  </body> 
</html>