我试图获取音频的持续时间，但结果是NaN。以下是我所做的，有人可以告诉我问题是什么吗？
<audio class="my-audio"></audio>
$(document).ready(function(){
addAudioPlayer();
});
//dynamically assign id to an audio player
function addAudioPlayer(){
var index = 0;
//find class"my-audio-player"
$(document).find(".my-audio-player").each(function(){
$(this).attr('id', 'player'+index );
$(this).append("<source src=\""+mediaFiles[index]+"\" type=\"audio/mp3\" >")
new AudioPlayer(mediaFiles[index], index);
index++;
});
}
function AudioPlayer(media, index){
//set objects reference
this.audio = document.getElementById("player"+ index);
this.audio.onloadedmetadata;
this.audio.play();
console.log("audio = " + this.audio);
console.log("audio src = " + this.audio.src);
console.log("audio dur = " + this.audio.duration);
}
最佳答案
除了我上面的评论之外，这里还有一个工作演示。我选择将 jQuery 引用替换为普通 JS，因为这是我的偏好(而且我没有花时间熟悉 jQuery。也许是这些年之一:))
您可以轻松地将其放回原处。
您也不会获得源的有效结果，因为 <audio>元素的src属性为空，您想要的是 src source 的属性<audio> 中包含的元素元素。
另一个监督是范围。自 onloadedmetadata事件是 <audio> 的一部分元素对象，this关键字指的是<audio>元素
this.audio.play()应该是this.play() , this.audio应替换为 this , this.audio.src应更改为this.childNodes[0].src (记住，我们需要源元素的 src 属性)最后，this.audio.duration应该是this.duration 。
还值得指出的是 this在你的 AudioPlayer 的第一行指AudioPlayer函数(对象)，因为您没有将 new AudioPlayer 的结果分配给任何东西，所以这一行本质上什么也不做，可以稍微改变，我刚刚捕获了对 <audio> 的引用元素并从那里设置其 onloadmetadata事件处理程序。
唷!还头疼吗？ javascript 中的作用域有时会让所有人陷入困境。许多人仍然没有完全掌握其中的窍门。 ;)
首先，这是完整的代码:
(编辑#2:更新了代码，以便显示每个播放轨道的进度，每 500 毫秒更新一次并显示为轨道长度的 % - 它应该足以给您我希望有一个想法)
<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
function allByClass(className,parent){return (parent == undefined ? document : parent).getElementsByClassName(className);}
function forEachNode(nodeList, func){for (var i=0, n=nodeList.length; i<n; i++) func(nodeList[i], i, nodeList); }
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded()
{
addAudioPlayer();
}
var mediaFiles = ['audio/voice_welcomeback.mp3', 'audio/Some Chords.mp3'];
var progressIntervalHandle;
function addAudioPlayer()
{
var index = 0;
var audioPlayers = allByClass('my-audio-player');
forEachNode(audioPlayers, audioPlayerEnumCallback);
progressIntervalHandle = setInterval(updateProgress, 500);
function audioPlayerEnumCallback(elem, index, elemArray)
{
elem.id = 'player'+index;
elem.innerHTML = "<source src='" + mediaFiles[index] + "' type='audio/mp3'>";
new AudioPlayer(mediaFiles[index], index);
index++;
}
}
function AudioPlayer(media, index)
{
document.getElementById("player"+ index).onloadedmetadata = function(evt)
{
this.play();
console.log("audio = " + this);
console.log("audio src = " + this.childNodes[0].src);
console.log("audio dur = " + this.duration);
}
}
function updateProgress()
{
var audioElems = allByClass('my-audio-player');
var outputMsg = '';
forEachNode(audioElems, audioElemEnumProgressCallback);
document.getElementById('progressOutput').innerHTML = outputMsg;
function audioElemEnumProgressCallback(elem, index, elemAray)
{
outputMsg += "Song " + index + ": " + ((100*elem.currentTime) / elem.duration).toFixed(2) + "%" + "<br>";
}
}
</script>
<style>
</style>
</head>
<body>
<audio class="my-audio-player"></audio>
<audio class="my-audio-player"></audio>
Progress:<br>
<div id='progressOutput'></div>
</body>
</html>
编辑＃1:控制台输出在页面加载时几乎立即出现，并且音频文件(两者)也立即播放。我必须使用屏幕录制应用程序才能获得半准确的数字，因为这一切都发生得太快了。
编辑#3:这是控制台输出。 (行号应位于右侧)
audioDemo.html:42 audio = [object HTMLAudioElement]
audioDemo.html:43 audio src = file:///C:/xampp/htdocs/enhzflep/audio/voice_welcomeback.mp3
audioDemo.html:44 audio dur = 1.68
audioDemo.html:42 audio = [object HTMLAudioElement]
audioDemo.html:43 audio src = file:///C:/xampp/htdocs/enhzflep/audio/Some%20Chords.mp3
audioDemo.html:44 audio dur = 444.186122
关于javascript - 音频持续时间为 NaN，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32235196/