当我点击一个触发它显示的链接时，如何触发Spotify Play按钮播放？ [英] How can I trigger the Spotify Play button to play when I click a link that triggers it to display?

问题描述

以下是显示Spotify Play按钮的jQuery代码，当我点击Rock the house！链接时

  $（$ {
 $（'＃partystart'）。toggle（function（）{
 $（。fadeIn）。addClass（party）; 
 $（ #musicbox）。slideDown（300）; 
 $（＃partystart）。html（< a id ='partystart'>休息一下< / a>）; 
 $（。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 =musicboxstyle =margin-top：-2px; display：none; src =https://embed.spotify.com/?uri=spotify:track:3QMLpta0AmeJLpWNmeyC6B#0:12width =250height =80frameborder =0allowtransparency =true>< / IFRAME> 
< a id =partystart>&＃9650;摇滚的房子！< / a> 
< / div> 
  

下面是一个例子，您可以点击一个圆圈来播放曲目而不是播放按钮在实际的Spotify播放按钮中： http://spotifymusic.tumblr.com/

另外，我在歌曲URI的末尾放置了＃0：12 ，让它在0:12秒开始播放，但似乎并不奏效。我在这里做错了什么？

谢谢！ 没有Spotify帐户，也不打算制作一个，但下面的解决方案应该可以工作，你只需要做一些调查即可。

Spotify iFrame有一个点击事件附加到.play-pause-btn（我认为）。您需要激活点击事件才能开始播放。它会是这样的：

  $（＃musicbox）。contents（）。find（div.play-暂停-BTN）点击（）。 
  

将其与您的其他代码相加：

  $（'＃partystart'）。toggle（function（）{
 $（。fadeIn）.addClass（party）; 
 $ （#musicbox）。slideDown（300）; 
 $（＃partystart）。html（< a id ='partystart'>休息一下< / 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>）; 
}）; 
}）; 
  

如果它不起作用，您需要确定哪个项目上有点击事件。

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!

解决方案

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.

这篇关于当我点击一个触发它显示的链接时，如何触发Spotify Play按钮播放？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！