How can I launch the Spotify Play button to play when I click on a link that causes it to display?

Question

Here is the jQuery code that displays the Spotify Play button when I click on 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 the circle to play the track, not the play button inside the Spotify Play button itself: http://spotifymusic.tumblr.com/

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

Thanks!

Answer 1

I do not have a spotify account and you do not plan to create it, but the next solution should work, you just need to conduct a little investigation.

Spotify iFrame has a click event attached to .play-pause-btn (I think). To start, you must activate the click event to play. It will 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 this does not work, you need to determine which element has a click event on it.