1

これらのマークアップには 2 つのオーディオ タグがあります。私の問題は、2番目のものが再生されないことです

<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");
                });

私の問題は、最初のオーディオ タグしか再生できないことです。2 番目のタグまたは 3 番目のオーディオ タグがさらにある場合、それらを再生するにはどうすればよいですか? カウンターは、再生するオーディオ タグを選択するものです。しかし、今のところ、このマークアップでより多くの音声投稿がある場合、2 番目の音声タグまたはユーザーが選択した音声タグを作成する方法がわかりません。

4

2 に答える 2

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");
    });
});

</p>

=> そして、play-bt とメッセージ ID をクラスに変更します

于 2012-08-08T12:02:45.110 に答える
0

物事がうまくいかない理由は、マークアップが原因です...コードでは、クリックされた「play-bt」クラスの「親」を取得しようとしていますが、「art-item」はDOMの親ではありません構造。おそらくそう思われるのは、マークアップのインデントが間違っていることです...

于 2012-08-08T12:56:12.670 に答える