4

これは、「Rock the house!」というリンクをクリックしたときに Spotify Play ボタンを表示する 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

私は Spotify アカウントを持っておらず、作成する予定もありませんが、次の解決策でうまくいくはずです。少し調査するだけで済みます。

Spotify iFrame には、クリック イベントが .play-pause-btn に添付されています (と思います)。再生を開始するには、クリック イベントを有効にする必要があります。次のようになります。

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

コードの残りの部分に追加します。

$('#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>");
});
});

うまくいかない場合は、どのアイテムにクリック イベントがあるかを判断する必要があります。

于 2014-05-09T16:14:15.467 に答える