个人中心
gpt4 book ai didi

javascript - 音频持续时间为 NaN

转载 作者：行者123 更新时间：2023-11-29 21:42:38 25 4
gpt4 key购买 nike

我正在尝试获取音频的持续时间，但结果是 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 引用替换为 vanilla 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 function (object) 因为你没有将 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/

25 4 0
文章推荐： android防止第一个选项卡上的自动启动 Activity
文章推荐： php - fatal error : Class ConnectionWrapper not found in ConnectionFactory. PHP
文章推荐： android - SeekBar 拇指(9 补丁)无法识别
文章推荐： mysql - MySQL 中何时使用单引号、双引号和反引号
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com