首页 > 解决方案 > 循环播放时音频无法通过 JavaScript 播放

问题描述

我有一段 JavaScript 应该循环遍历一些音频文件,这些音频文件是使用 HTML 正文中带有 id 的音频标签定义的。问题是音频最初会在前 3 秒内停止,现在根本不播放,我找不到问题所在。以下代码全部在 HTML 正文中,是我的错误的最小可能示例:

<audio id="lobby1">
    <source src="audio/lobby-audio1.mp3" type="audio/mpeg">
</audio>
<audio id="lobby2">
    <source src="audio/lobby-audio2.mp3" type="audio/mpeg">
</audio>
<button onclick="playLobby()">play lobby</button>

<script>
    number = 1
    lobbySong = "lobby" + number
    function playLobby() {
        while (number < 2) {
            var lobbySong = document.getElementById(lobbySong);
            lobbySong.play();
            lobbySong.onended = function() {
                number++
            };
        }
    }
</script>

我从控制台得到的错误是cannot read property 'play' of nulllobbySong.playwhile循环中。

标签: javascripthtml

解决方案


尝试像这样重写javascript

function playLobby() {
    let fn = function(number) {
        let lobbySong = "lobby" + number;
        let audio = document.getElementById(lobbySong);
        audio.play();
        audio.onended = function () {
            if (number < 2) {
                fn(number + 1);
            }
        }
    };
    fn(1);
}

推荐阅读