HTML5 2音頻標簽

Question

這些標記中有兩個音頻標簽。 我的問題是第二個不會播放

<div class="container">
    <div class="post-container">
        <legend>
            <strong>Zedd - Spectrum</legend>
        </h4>
        <div class="art-item">
            <img src="uploads/arts/default.jpg">
        </div>
        <audio class="audio-player" src="uploads/tracks/02 So Far.mp3"></audio>
        <div class="playerContainer">
            <ul id="playerControls">
                <li class="play-bt"></li>
                <li class="pause-bt"></li>
                <li>
                    <div class="progressContainer">
                        <!-- Progess bars container //-->
                        <div class="progressbar"></div>
                    </div>
                </li>
            </ul>
            <span class="timecode">0:00</span>
        </div>
    </div>
    <div class="post-container">
        <legend>
            <strong>Zedd - Spectrum</legend>
        </h4>
        <div class="art-item">
            <img src="uploads/arts/default.jpg">
        </div>
        <audio class="audio-player" src="uploads/tracks/track3.mp3"></audio>
        <div class="playerContainer">
            <ul id="playerControls">
                <li class="play-bt"></li>
                <li class="pause-bt"></li>
                <li>
                    <div class="progressContainer">
                        <!-- Progess bars container //-->
                        <div class="progressbar"></div>
                    </div>
                </li>
            </ul>
            <span class="timecode">0:00</span>
        </div>
    </div>
</div>

這是播放曲目的腳本

$(".play-bt").click(function(){
                    var $artItem = $(this).parent(".art-item");
                    console.log($artItem);
                    $artItem.find('audio').play();
                    $artItem.find(".message").text("Music started");
                });

我的問題是我只能播放第一個音頻標簽。 如果還有更多內容，我該怎么做才能播放第二個標簽或第三個音頻標簽？ 計數器就是選擇要播放的音頻標簽的計數器。 但是到目前為止，如果該標記中包含更多音頻，我還不知道如何制作第二個音頻標簽或用戶選擇的音頻標簽。

Answer 1

不是100％確定這是唯一的問題，但是您經常使用id。 ID在頁面上應該是唯一的。 用類代替它們

並且您的引用是錯誤的。

$("#play-bt").click(function(){
    // -> will allways try to play song indicated by counter (0)
    $(".audio-player")[counter].play(); 
    $("#message").text("Music started");
})

我不想要你嗎？ 您不想在“后置容器”中播放音頻嗎？

您可以執行以下操作：

$(document).ready(function(){
    $(".play-bt").click(function(){
        var $post= $(this).parents(".post-container");
        $post.find('audio')[0].play();
        $post.find(".message").text("Music started");
    });
});

=>並將play-bt和消息ID更改為類

Answer 2

事情對您不起作用的原因是由於您的標記...在您的代碼中，您嘗試獲取單擊的“ play-bt”類的“父級”，但“ art-item” 不是您的DOM的父級結構體。 您可能以為是因為您的標記縮進不正確...