Блог

Главная - Вопросы по программированию - Длительность звука возвращает NaN

Длительность звука возвращает NaN

#javascript #html #css #html5-video #html-input

Вопрос:

Доступ к аудиоэлементу HTML5 (файлу .ogg) с помощью JavaScript в Chrome. Файл воспроизводится правильно, но каким-то образом он не распознает длительность.

Я только что списал этот код: https://www.w3schools.com/jsref/prop_audio_duration.asp (Я знаю, что w3schools не очень хорош, но, похоже, проблема в чем-то другом …)

 var x = document.getElementById("testTone").duration;
console.log("duration:" x);  // duration:NaN

var y = document.getElementById("testTone");
y.play();   // works!

элемент…

 <audio controls id="testTone">
    <source src="autoharp/tone0.ogg" type="audio/ogg">
</audio>

Комментарии:

1. как ты html выглядишь?

2. потому audio что нужно время для загрузки, и он не готов, когда вы звоните .duration

3. @Aravind добавлено выше…

Ответ №1:

Добавьте preload="metadata" в свой тег, чтобы он запрашивал метаданные для вашего аудиообъекта:

 <audio controls id="testTone" preload="metadata">
    <source src="autoharp/tone0.ogg" type="audio/ogg">
</audio>

В вашем коде прикрепите обработчик событий, чтобы установить продолжительность при загрузке метаданных:

 var au = document.getElementById("testTone");
au.onloadedmetadata = function() {
    console.log(au.duration)
};

Комментарии:

1.ССЫЛКА: stevesouders.com/blog/2013/04/12/html5-video-preload preload='metadata' “Hints to the UA that the user is not expected to need the video, but that fetching its metadata (dimensions, first frame, track list, duration, and so on) is desirable.”

2. Спасибо! Я все еще изучаю это, это помогает. Загрузка страницы явно имеет сложности, которые мне нужно лучше понять. Вопрос: после комментария о том, что аудио требовало времени для загрузки, я попытался обернуть свой исходный код функцией document.ready (jQuery) document.ready … не сработало. Можете ли вы объяснить, почему нет?

3. Кроме того, зачем здесь использовать функцию? Это работает, но я чувствую, что что-то упускаю.

Ответ №2:

Помимо решения @FrankerZ, вы также можете сделать следующее:

 <audio controls id="testTone">
  <source src="https://www.w3schools.com/jsref/horse.ogg" type="audio/ogg">
  <source src="https://www.w3schools.com/jsref/horse.mp3" type="audio/mpeg">
</audio>

<button onclick="myFunction()">Try it</button>

<script>
  function myFunction() {
    var x = document.getElementById("testTone").duration;
    console.log("duration:"   x); // duration:NaN

    var y = document.getElementById("testTone");
    y.play(); // works!
  }
</script>

Комментарии:

1. Это неясный способ объяснить проблему с w3schools? Прямой подход был бы лучше…

2. @GregoryTippett в вашем коде источник также недействителен.

3. @GregoryTippett preload='metadata' — лучший подход к TBO: D

Ответ №3:

W3schools описывает свойство длительности аудиообъекта как доступное только для чтения, поэтому вы не можете приписать длительность звука переменной.

Метки: