CODEWITHSUNDEEP
jqueryhtmlspotify
Brenton Thornicroft
Brenton Thornicroft

Reputation: 87

How can I trigger the Spotify Play button to play when I click a link that triggers it to display?

Here is the jQuery code that displays the Spotify Play button when I click the link that says "Rock the house!"

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

Here is the 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>

Here is an example that allows you to click on a circle to play the track rather than the play button inside the actual Spotify Play button: http://spotifymusic.tumblr.com/

Also, I put #0:12 at the end of the URI for the song to get it to start playing at 0:12 seconds in, but it doesn't seem to work. What am I doing wrong there?

Thanks!

Upvotes: 4

Views: 4737

Answers (1)

callmetwan
callmetwan

Reputation: 1350

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.

Upvotes: 1

Related Questions