Fatal编程技术网
  • javascript/
  • Javascript 将事件侦听器添加到音频元素不会'；行不通

Javascript 将事件侦听器添加到音频元素不会'；行不通

javascript html

Javascript 将事件侦听器添加到音频元素不会'；行不通,javascript,html,html5-audio,Javascript,Html,Html5 Audio,我制作了一个简单的音乐播放器，它有两个事件，一个用于更新已用时间，另一个用于持续时间更改…已用时间的函数工作正常，但总时间函数不工作…我查看了，持续时间更改是一个标准事件，但我不明白为什么它不工作。我还认为可能是因为脚本是在标记元素之前定义的，但将脚本移动到文件末尾也不起作用 这是我的密码： <!DOCType HTML> <html> <head> <link rel="stylesheet" href="style.css"/> <scr

我制作了一个简单的音乐播放器，它有两个事件，一个用于更新已用时间，另一个用于持续时间更改…已用时间的函数工作正常，但总时间函数不工作…我查看了，持续时间更改是一个标准事件，但我不明白为什么它不工作。我还认为可能是因为脚本是在标记元素之前定义的，但将脚本移动到文件末尾也不起作用

这是我的密码：

<!DOCType HTML>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
<script type="text/JavaScript">
    var audio = document.createElement("audio");
    audio.id = "audio1"
    audio.src = "Music.mp3";
    audio.autoplay = true;
    window.onload = function () {
        audio.addEventListener('timeupdate', UpdateTheTime, false);
        audio.addEventListener('durationchange', SetTotal, false);

    }


    function UpdateTheTime() {
           var sec = audio.currentTime;
           var min = Math.floor(sec / 60);
           sec = Math.floor(sec % 60);
           if (sec.toString().length < 2) sec = "0" + sec;
           if (min.toString().length < 2) min = "0" + min;
           document.getElementById('Elapsed').innerHTML = min + ":" + sec;


    }

    function SetTotal() {
        var sec = audio.duration;
        var min = Math.floor(sec / 60);
        sec = Math.floor(sec % 60);
        if (sec.toString().length < 2) sec = "0" + sec;
        if (min.toString().length < 2) min = "0" + min;
        document.getElementById('Total').innerHTML = "/ " + min + " : " + sec;
    }
</script>
</head>
<body>

<form action="/" id="player">
    <img src="Cover.jpg"/>
    <label id="Title">
    Imaginaerum
    </label>
    <label id="Artist">
    Nightwish
    </label>

        <label id="Elapsed">--:--</label>
        <label id="Total">/--:--</label>
</form>

</body>
</html>


var audio=document.createElement（“音频”）；
audio.id=“audio1”
audio.src=“Music.mp3”；
audio.autoplay=true；
window.onload=函数（）{
audio.addEventListener（'timeupdate'，updateTime，false）；
audio.addEventListener（'durationchange'，SetTotal，false）；
}
函数UpdateTheTime（）{
var sec=audio.currentTime；
最小var=数学地板（第60节）；
秒=数学下限（秒%60）；
如果（sec.toString（）.length<2）sec=“0”+sec；
如果（最小toString（）长度<2）min=“0”+min；
document.getElementById（'Appead'）。innerHTML=min+“：”+sec；
}
函数SetTotal（）{
var sec=音频持续时间；
最小var=数学地板（第60节）；
秒=数学下限（秒%60）；
如果（sec.toString（）.length<2）sec=“0”+sec；
如果（最小toString（）长度<2）min=“0”+min；
document.getElementById（'Total'）.innerHTML=“/”+min+”：“+sec；
}
梦魇之旅
拉维斯
--:--
/--:--
在您的情况下，在window.onload之前触发durationchange事件

        var audio; 
        window.onload = function () {
         audio= document.createElement("audio");
        audio.id = "audio1"
        audio.src = "Music.mp3";
        audio.autoplay = true;
            audio.addEventListener('timeupdate', UpdateTheTime, false);
            audio.addEventListener('durationchange', SetTotal, false);

        }


        function UpdateTheTime() {
               var sec = audio.currentTime;
               var min = Math.floor(sec / 60);
               sec = Math.floor(sec % 60);
               if (sec.toString().length < 2) sec = "0" + sec;
               if (min.toString().length < 2) min = "0" + min;
               document.getElementById('Elapsed').innerHTML = min + ":" + sec;


        }

        function SetTotal() {
            var sec = audio.duration;
            var min = Math.floor(sec / 60);
            sec = Math.floor(sec % 60);
            if (sec.toString().length < 2) sec = "0" + sec;
            if (min.toString().length < 2) min = "0" + min;
            document.getElementById('Total').innerHTML = "/ " + min + " : " + sec;
        }

var音频；
window.onload=函数（）{
音频=document.createElement（“音频”）；
audio.id=“audio1”
audio.src=“Music.mp3”；
audio.autoplay=true；
audio.addEventListener（'timeupdate'，updateTime，false）；
audio.addEventListener（'durationchange'，SetTotal，false）；
}
函数UpdateTheTime（）{
var sec=audio.currentTime；
最小var=数学地板（第60节）；
秒=数学下限（秒%60）；
如果（sec.toString（）.length<2）sec=“0”+sec；
如果（最小toString（）长度<2）min=“0”+min；
document.getElementById（'Appead'）。innerHTML=min+“：”+sec；
}
函数SetTotal（）{
var sec=音频持续时间；
最小var=数学地板（第60节）；
秒=数学下限（秒%60）；
如果（sec.toString（）.length<2）sec=“0”+sec；
如果（最小toString（）长度<2）min=“0”+min；
document.getElementById（'Total'）.innerHTML=“/”+min+”：“+sec；
}
例如，学校是一个可怕的资源。使用MDN:，谢谢…但internet explorer显示错误的持续时间…在chrome中持续时间是：13:31（正确），但在internet explorer中持续时间是19:44（错误）…有人知道为什么会发生这种情况吗？