通過jQuery語句循環播放

我在我的一個數據庫中使用了一個字段來存儲歌曲位置......當我在數據庫中有1首歌曲時，它可以很好地播放onClick。但在數據庫中有2首或更多歌曲，onClick時，它們都會同步播放。我如何通過jQuery append語句循環來執行PHP while while循環？對不起，我仍然在學習jQuery/Javascript ......我實際遇到了這個問題。所以一個解決方案將真的幫助我！通過jQuery語句循環播放

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

來源

2011-10-23 Michael Grigsby

這給你所有的歌曲自己的停止/播放控制。

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

來源

2011-10-23 02:17:12

美麗！它的工作..謝謝你！ –

現在要停止播放歌曲，我需要添加一個單獨的按鈕以及鏈接到它的$ .remove（）方法......如何通過擴展您提供的代碼來實現此目的？ –

刪除HTML不會在音頻啓動後停止播放。相反，它必須暫停。我更新了代碼，給它一個鏡頭。 –

在我看來，你已經沒有提供任何機制來添加您的autoplay=true到被點擊的具體play按鈕 - 你追加到與#audio所有元素。嘗試使用音頻爲每個play和div生成唯一的ID，以便將兩者鏈接在一起。

作爲第一個嘗試，試試這個：

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

這給了您所有的對象唯一標識符;當我點擊一個play-$row[idsongs]時，我不知道JS足夠好的建議如何關聯audio-$row[idsongs]，但肯定必須有一些方法來發現點擊對象的id，將play更改爲audio，然後附加HTML。

來源

2011-10-23 00:35:03 sarnold

好吧，那麼我會怎麼做，在Js/jQuery中？ –

當你到達JavaScript或jQuery時，已經太晚了。您需要在您的PHP代碼中的對象中生成正確的'id's。 – sarnold

那麼讓我詳細說明，我可以使用var uniq = Math.floor（Math.random（）* 1000000）;生成隨機字符串，但如何循環呢？我在jQuery中使用類似$ .each的東西嗎？ –

通過jQuery語句循環播放

回答

相關問題