我们希望在列表中点击的任何曲目中保留iframe的状态。但 我们无法两次调用播放/暂停事件。当READY事件触发时,第一次调用播放/暂停事件。
我们正在使用标志来嵌入iframe urlend,我们将重置iframe的播放/暂停事件,id =“soundcloud_widget”,如下面javascript代码中所述。
HTML:
<div class="player-container">
<div class="player-top">
<iframe id="soundcloud_widget" name="someFrame" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/420638724%3Fsecret_token%3Ds-g3rwu&color=e13a7b&auto_play=true&show_user=false&download=false&show_artwork=false" width="420" height="120" frameborder="no" scrolling="no"></iframe>
</div>
<div class="song-header">
<div class="col-xs-9">Track</div>
<div class="col-xs-3 tac pl">Duration</div>
</div>
<div class="songs-container" id="musicli">
<div class="songs">
<div class="col-xs-9">
<a class ="mp3list" href="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/420638724%3Fsecret_token%3Ds-g3rwu&color=e13a7b" target="soundcloud_widget">Jagat Kalyani Bhavana</a></div>
<div class="col-xs-3 tac">2:30</div>
</div>
<div class="songs">
<div class="col-xs-9">
<a class ="mp3list" href="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/420638696%3Fsecret_token%3Ds-dZniI&color=e13a7b" target="soundcloud_widget">Dada Bhagwan na Asim Jay Jay Kar Ho</a>
</div>
<div class="col-xs-3 tac">3:30</div>
</div>
</div>
</div>
使用Javascript:
var iframeid = "soundcloud_widget";
LoadWidget();
$("a").click(function(e) {
e.preventDefault();
console.log(plyflg);
if(plyflg==false){
urlend='&auto_play=false&show_user=false&download=false&
show_artwork=false';
}
else{
urlend='&auto_play=true&show_user=false&download=false&
show_artwork=false';
}
var url=$(this).attr("href")+urlend;
$("#soundcloud_widget").attr("src", url);
})
function LoadWidget() {
var widget1 = SC.Widget(document.getElementById(iframeid));
widget1.bind(SC.Widget.Events.FINISH, function (e) {
});
widget1.bind(SC.Widget.Events.PLAY, function (e) {
plyflg=true;
console.log('play'+ plyflg);
});
widget1.bind(SC.Widget.Events.PAUSE, function (e) {
plyflg=false;
console.log('PAUSE'+ plyflg);
});
}