Question

I have two audio tags in these markup. my problem is that the second one won’t play

<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>

And here is the script that plays the track

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

My problem is that I can only play the first audio tag. what can I do to play the second tag or 3rd audio tag if there’s more? the counter is the one that is selecting what audio tags to play. but as of now I have no idea how would I make the second audio tag or user selected audio tag if the are more audio post in this markup.

Answer 1

not 100% sure that’s the only issue but you use id a lot. id’s should be unique on a page. Replace them by classes

And your references are wrong.

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

I don’t think you want that? Don’t you want to play the audio in the “post-container” ?

you could do something like this:

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

​

=> and changing the play-bt and message id’s into classes