我正在尝试创建一个简单的javascript soundcloud播放器,基于我通过onclick函数传递的trackid。
这是我的 html:
<div id="gs-play" onclick="play(309689093, this.id)" class="fa fa-3x fa-play">play/pause</div>
<div id="gs-play2" onclick="play(316017522, this.id)" class="fa fa-3x fa-play">play/pause</div>
<div id="gs-play3" onclick="play(315363199, this.id)" class="fa fa-3x fa-play">play/pause</div>
这是我的javascript:
SC.initialize({
client_id: 'CLIENT_ID'
});
var is_playing = false,
sound;
function play(trackid, id){
var id = id;
var url = '/tracks/' + trackid;
if( sound ) {
if(is_playing) {
sound.pause();
document.getElementById(id).classList.toggle('fa-pause');
is_playing = false;
} else {
sound.play();
document.getElementById(id).classList.toggle('fa-pause');
is_playing = true;
}
} else {
SC.stream(url).then(function(obj) {
if (obj.options.protocols[0] === 'rtmp') {
obj.options.protocols.splice(0, 1); }
obj.play();
document.getElementById(id).classList.toggle('fa-pause');
sound = obj;
is_playing = true;
});
}
}
这很好用,但我在播放/暂停功能方面遇到了问题,因为当然,直到歌曲没有完成sound===false
即使我点击了另一个div,它也将始终播放/停止当前曲目。这是JSfiddle,用于更好地理解行为。
另外,我看到了SC API的文档,但我不明白如何访问流媒体曲目的信息(标题,持续时间,艺术品......
编辑:
我想出了一个解决方案,通过以下方式检索当前的流媒体轨道:
SC.get(url).then(function(data){
oldid = data.id;
});
,如果旧 ID 等于新 ID,则暂停它。我在切换功能方面仍然存在一些问题(仅切换正在播放的那个(,我尽量不使用框架。这是编辑的脚本。
对于任何对代码感兴趣的人,我已经修复了添加一个
SC.get(url).then(function(data){
oldid = data.id;
});
然后检查oldid === trackid
是否如下所示:
SC.initialize({
client_id: 'CLIENT_ID'
});
var oldid;
var is_playing = false,
sound;
function play(trackid, id){
var id = id;
var url = '/tracks/' + trackid;
if( oldid === trackid) {
if(is_playing) {
sound.pause();
document.getElementById(id).classList.toggle('fa-pause');
is_playing = false;
} else {
sound.play();
document.getElementById(id).classList.toggle('fa-pause');
is_playing = true;
}
} else {
SC.stream(url).then(function(obj) {
if (obj.options.protocols[0] === 'rtmp') {
obj.options.protocols.splice(0, 1); }
obj.play();
document.getElementById(id).classList.toggle('fa-pause');
sound = obj;
SC.get(url).then(function(data){
oldid = data.id;
});
console.log(sound.id);
is_playing = true;
});
}
}
这是JSFIddle