Javascript 音频 Html

Question

我正在尝试使用 html 和 javascript 制作音频播放器。每次有人点击播放时，它都会播放复选框中选中的音频文件：https://gyazo.com/9c93954e89dcd975ed47956b8563b177

HTML 音频

 <audio id="player">

 </audio>

HTML 复选框

<div class="card">
    <div class="card-header" id="headingTwo">
        <h5 class="mb-0"><a href="#!" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo" class="">Collapsible
                Test1</a></h5>
    </div>
    <div id="collapseTwo" class="card-body collapse show" aria-labelledby="headingTwo" data-parent="#accordionexample" style="">
    
            <div class="title-choice">
                <input type="checkbox" class="form-check-input" name="1.mp3" id="playable_file">
                <label for="">1.mp3</label>
            </div>

        
            <div class="title-choice">
                <input type="checkbox" class="form-check-input" name="2.mp3" id="playable_file">
                <label for="">2.mp3</label>
            </div>

         
    </div>
    </div>

play_files.js

var i;
var ii;

var checked;

function save_files() {

    i = 0;
    ii = 0;

    checked = []; 

    $("input[id='playable_file']:checked").each(function ()
    {
        checked.push($(this).attr("name"));
    });  

    addNumber (); 
    play_files ();
    setInterval(function() {check(); }, 3000);

}

function addNumber () {
    if(i != 0) { 
        document.getElementById("audio" + i - 1).remove();
    }
    var container = document.createElement('source');
    container.src = "./audiofiles/" + checked[i]; 
    container.id = "audio" + i;
    container.type = "audio/mpeg";

    $('#player').append(container);

    i++
}

function check () {

    if(ii != 0) {
        document.getElementById("player").onended = function(){
            play_files();
        };
    }
    
}

function play_files() {

    document.getElementById("player").play();

}

这个东西在 chrome 上，但声音根本不起作用。在 Firefox 上，它会播放第一个选定的音频文件，但随后会出现错误。

错误：未捕获的类型错误：document.getElementById(...).ended 不是函数。

和

警告：无法播放媒体。没有请求格式的解码器：音频/mpeg。

所以总结一下 -> 我在第二个文件上遇到错误。我无法在 chrome 中播放声音，而且在第一个音频文件停止后的一段时间后，我真的不知道如何启动下一个文件。

谢谢！

Answer 1

您可以使用.onended 代替.Ended();，并将其设置为您希望它运行的函数。

其他音频类型为audio/mpeg3、audio/x-mpeg 和audio/x-mpeg-3。看看这些是否有效。

onended 示例：

document.getElementById("sound").onended = function(){
    alert("The sound ended.")
};