我需要在我的Squarespace网站上嵌入SoundCloud播放列表，以进行我的项目。嵌入播放列表后，我想添加一些按钮，单击这些按钮将跳至下一首曲目或返回到上一首曲目。我最近在Stack上看到了类似的代码，并尝试进行一些更改以满足我的需求。现在，我需要将其嵌入Squarespace中并遇到问题。
该代码在JS Fiddle上运行良好，但是当我尝试将其放置在网站上时，它根本无法工作。我尝试将其放置在所有适当的位置（代码注入，标题，代码块，页脚，横幅等）。基本上，body标签中的三个按钮不起作用。
这里是代码：
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://w.soundcloud.com/player/api.js"></script>
<script>
$(document).ready(function() {
var widget = SC.Widget(document.getElementById('soundcloud_widget'));
widget.bind(SC.Widget.Events.READY, function() {
console.log('Ready...');
});
$('play').click(function() {widget.toggle(); });
$('next').click(function() {widget.next(); });
$('prev').click(function() {widget.prev(); });
});
</script>
</head>
<body>
<iframe id="soundcloud_widget" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/352221151&color=%23060a10&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true" width="420" height="240" frameborder="no"></iframe>
<play>Play/Pause</play>
<next>Skip</next>
<prev>Previous</prev>
</body>
</html>我怀疑存在两层问题。我将建议一些更改。让我知道结果。
1）使用协议相对URL作为参考：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//w.soundcloud.com/player/api.js"></script>
2）对按钮使用真实的HTML元素
<button type="button" id="play">Play/Pause</button>
<button type="button" id="next">Skip</button>
<button type="button" id="prev">Previous</button>
3）通过ID引用这些元素
$('#play').click(function() {
console.log('about to toggle...');
widget.toggle();
});
$('#next').click(function() {
console.log('about to go next...');
widget.next();
});
$('#prev').click(function() {
console.log('about to go prev...');
widget.prev();
});