当我点击一个触发它显示的链接时,如何触发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'>▲ 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">▲ 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'>▲ 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屋!