CODEWITHSUNDEEP
phpjavascriptjquerymysql
Michael Grigsby
Michael Grigsby

Reputation: 12163

Looping through a jQuery statement

I'm using a field in one of my databases to store the song location... When I've got 1 song in the db it plays well onClick. But with 2 or more songs in the database, onClick they all play in sync. How do I loop through the jQuery append statement to act like a PHP while loop? Sorry, I'm still learning jQuery/Javascript... I actually run into this problem allot. So a solution would really help me!

<script src="http://code.jquery.com/jquery-latest.js"></script>
<?php
mysql_connect("localhost", "root", "")or die("Could not connect: " . mysql_error());
mysql_select_db("kevin") or die(mysql_error());

$song_query = mysql_query("SELECT idsongs, songuri, songname FROM songs");

    while($row = mysql_fetch_array($song_query)) {
    echo "<span class='song'><b>Song Name: </b>";
    echo $row['songname'];
    echo "<br>";
    //echo '<img alt="" id="play" src="play.png" />';
    //echo '<div id="audio"></div>';
?>
<script type="text/javascript">
$(document).ready(function() {
 $('#play').click(function() {
        $("#audio").append('<audio autoplay="true" src="<?php echo $row['songuri'] ?>" /></audio>');
});
});
</script>
<img alt="" id="play" src="play.png" />
<div id="audio"></div>
<?php } ?>

Upvotes: 0

Views: 336

Answers (2)

Thilo Savage
Thilo Savage

Reputation: 1071

This gives all your songs their own stop/play controls.

<script src="http://code.jquery.com/jquery-latest.js"></script>
<?php
mysql_connect("localhost", "root", "")or die("Could not connect: " . mysql_error());
mysql_select_db("kevin") or die(mysql_error());

$song_query = mysql_query("SELECT idsongs, songuri, songname FROM songs");

while($row = mysql_fetch_array($song_query)) {
    echo "<div class='song' sid='".$row['idsongs']."' songuri='".$row['songuri']."'>";
        echo "<b>Song Name: </b>";
        echo $row['songname'];
        echo "<br>";
        echo "<img class='play' src='play.png' /><br>";
        echo "<div class='audio'></div>";
        echo "<div class='stop'>Stop!</div>";
    echo "</div>";
} 
?>


<script type="text/javascript">
$(document).ready(function() {
    $('.play').click(function() {

        var songdiv = $(this).parent('div.song');

        var songuri = songdiv.attr('songuri');      
        var sid = songdiv.attr('sid');
        // stop this song if it's already playing

        stopPlayer(sid);

        // play
        var audio = '<audio class="player" sid="'+sid+'" autoplay="true" src="'+songuri+'" /></audio>';
        $(this).siblings('div.audio').html(audio);
    });
    $('.stop').click(function(){
        var songuri = $(this).parent('div.song').attr('sid');
        stopPlayer(songuri);
    });
});

function stopPlayer(id) {
    var p = $('.player[sid='+id+']');
    if (p[0]) {
        p[0].pause();
    }


}

</script>

Upvotes: 3

sarnold
sarnold

Reputation: 104070

It appears to me that you've provided no mechanism to append your autoplay=true to the specific play button that was clicked -- you're appending it to all elements with #audio. Try generating unique ids for every play and div with audio so you can link the two together.

As a first stab, try this:

while($row = mysql_fetch_array($song_query)) {
echo "<span class='song'><b>Song Name: </b>";
echo $row['songname'];
echo "<br>";
echo '<img alt="" id="' + "play-$row[idsongs]" + '" src="play.png" />';
echo '<div id="' + "audio-$row[idsongs]" +'"></div>';

This gives you unique identifiers for all your objects; I don't know JS well enough to suggest how to correlate the audio-$row[idsongs] when a play-$row[idsongs] has been clicked, but surely there must be some way to discover the id of the clicked object, change play to audio, and then append the HTML.

Upvotes: 0

Related Questions