4

这是当我单击“摇滚房子！”链接时显示 Spotify 播放按钮的 jQuery 代码。

$(function() {
$('#partystart').toggle(function () {
    $(".fadeIn").addClass("party");
    $("#musicbox").slideDown("300");
    $("#partystart").html("<a id='partystart'>Take a break</a>");
}, function () {
    $(".fadeIn").removeClass("party");
    $(".fadeIn").addClass("fullopacity");
    $("#musicbox").slideUp("300");
    $("#partystart").html("<a id='partystart'>&#9650; Rock the house!</a>");
});
});

这是HTML：

<div id="partybox" >
    <iframe id="musicbox" style="margin-top: -2px; display: none;" src="https://embed.spotify.com/?uri=spotify:track:3QMLpta0AmeJLpWNmeyC6B#0:12" width="250" height="80" frameborder="0" allowtransparency="true"></iframe>
    <a id="partystart">&#9650; Rock the house!</a>
</div>

这是一个示例，允许您单击一个圆圈来播放曲目，而不是实际 Spotify 播放按钮内的播放按钮：http ://spotifymusic.tumblr.com/

另外，我把#0:12歌曲的 URI 放在末尾，让它在 0:12 秒开始播放，但它似乎不起作用。我在那里做错了什么？

谢谢！

4

1 回答 1

1

I don't have a spotify account and don't plan to make one, but the following solution should work, you'll just need to do a little investigation.

The Spotify iFrame has a click event attachted to .play-pause-btn (I think). You need to activate the click event for playback to start. It would be something like this:

$("#musicbox").contents().find("div.play-pause-btn").click();

Adding it with the rest of your code:

$('#partystart').toggle(function () {
    $(".fadeIn").addClass("party");
    $("#musicbox").slideDown("300");
    $("#partystart").html("<a id='partystart'>Take a break</a>");
    $("#musicbox").contents().find("div.play-pause-btn").click();
}, function () {
    $(".fadeIn").removeClass("party");
    $(".fadeIn").addClass("fullopacity");
    $("#musicbox").slideUp("300");
    $("#partystart").html("<a id='partystart'>&#9650; Rock the house!</a>");
});
});

If it doesn't work, you'll need to determine which item has the click event on it.

于 2014-05-09T16:14:15.467 回答