Javascript возвращает NaN для продолжительности звука в зависимости от последовательности запросов

Question

Я очень новичок в Javascript. У меня не было большого успеха, чтобы найти ответ на мой запрос. Вот описание проблемы.

Я создаю аудио-элемент и устанавливаю источник в файл .m4a. Файл .m4a способен к загрузке и воспроизведению.

Я получаю странные результаты, однако, когда вы запрашиваете длительность звука источника. Следующий Javascript производит «NaN» в Chrome:

//Create audio element based on HTML audio id and modify controls accordingly 
    var aud = document.getElementById("storyTime"); 
    aud.setAttribute("src",story.audioTitle); 
    console.log("DEBUG: Audio Duration = " + aud.duration); //Get 'NaN' 
    console.log("DEBUG: Audio Source = " + aud.src); 
    aud.controls = true; 

Я попытался затем вставить кнопку с OnClick обратного вызова в HTML с подобной функцией. Эта кнопка, выполняющая «тот же код», возвращает правильную продолжительность звука.

HTML:

<button onclick="checkDuration()" type="button">Get audio length</button><br> 

JavaScript:

//Check audio duration 
function checkDuration() { 
    var aud = document.getElementById("storyTime"); 
    console.log("DEBUG: Audio Duration: " + aud.duration); 
} 

Я полагаю, что проблема связана с временем указанного запроса. Однако, если я предваряю запрос продолжительности с такими событиями загрузки, как «canplaythrough», я все равно получаю ответ «NaN» при использовании встроенного кода.

aud.addEventListener("canplaythrough", console.log("Audio duration = " + aud.duration)); 

Я ценю любые советы по надлежащей передаче последовательности событий загрузки аудио.

---

Спасибо Andy за предложения. Я смог запросить надежную продолжительность с помощью следующего кода.

//Create audio element based on HTML audio id and modify controls accordingly 
    var aud = document.getElementById("storyTime"); 
    aud.setAttribute("src",story.audioTitle); 
    aud.controls = true; 
    aud.load(); 

    aud.onloadeddata = function(){ 
    var audDuration = aud.duration; 
    console.log("aud.duration = " + audDuration); 
    } 
    } 

Решение, которое я считаю, это связано с вызовом load() вызов перед прослушивает loadeddata.

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

Я проверил функцию проверки продолжительности звука. Я пытаюсь проверить с двумя способами:

//Check audio duration and disable controls if NaN 
function checkDuration() { 
    var aud = document.getElementById("storyTime"); 
    aud.addEventListener("loadeddata",console.log("DEBUG (loadeddata version): Audio Duration: " + aud.duration)); 

    aud.onloadeddata = function(){ 
    var audDuration = aud.duration; 
    console.log("DEBUG (onloadeddata version): Audio Duration: " + audDuration); 
    } 
} 

Результаты:

DEBUG (loadeddata версия): Аудио Продолжительность: NaN DEBUG (onloadeddata версия): Аудио Продолжительность: +1601,991111

Я я не уверен, что понимаю разницу, или почему была бы разница.

Answer 1

Событие loadeddata должен быть ваш друг здесь:

aud.addEventListener("loadeddata", function() { 
console.log("Audio data loaded"); 
console.log("Audio duration: " + this.duration); 
});