[英]Playing song on JPlayer from an onclick event
I need to be able to set up links that will send a song to a central JPlayer.我需要能够设置将歌曲发送到中央 JPlayer 的链接。
For example, on a store and someone wants to sample a track before purchasing it, you click on the link and it sends the information to JPlayer and starts playing said track.例如,在一家商店,有人想在购买之前试听一首曲目,您点击链接,它会将信息发送给 JPlayer 并开始播放该曲目。
I have seen examples of using some similar to below in other stackoverflow questions here (7 years old) however cannot get it to work.我在此处的其他 stackoverflow 问题中看到了使用类似于以下内容的示例(7 岁),但无法使其正常工作。
Update: I have tried the below but the link doesn't do anything.更新:我已经尝试了以下但链接没有做任何事情。
$(document).ready(function(){
$("#jquery_jplayer").jPlayer({
swfPath: "../../dist/jplayer",
supplied: "mp3",
wmode: "window"
});
$('a[data-mp3]').click(function(e) {
e.preventDefault();
// replace #my-j-player by the id of your instance
$("#jquery_jplayer").jPlayer("setMedia", {
mp3: $(this).attr("data-mp3"),
oga: $(this).attr("data-ogg")
}).jPlayer("play");
});
});
<a href="#" data-mp3="http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3">TEST</a>
Here is a trick you can use.这是您可以使用的技巧。 You have to make jQuery to "listen" at clickEvents on all links that has
data-mp3
attributes:您必须让 jQuery 在所有具有
data-mp3
属性的链接上的 clickEvents 上“监听”:
<div id='jquery_jplayer'></div> <!--wrapper for jPlayer-->
<a href="#" data-mp3="urlofmp3">
<a href="#" data-mp3="urlofmp3-2">
$(document).ready(() => {
// initialization of jPlayer
$("#jquery_jplayer").jPlayer({
swfPath: "https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.swf",
supplied: "mp3",
});
// add event listener on ALL links that has a data-mp3 attribute
// and send the url to jPlayer then play
$('a[data-mp3]').click(function(e) {
e.preventDefault();
// replace #my-j-player by the id of your instance
$("#jquery_jplayer").jPlayer("setMedia", {
mp3: $(this).attr("data-mp3")
}).jPlayer("play");
});
});
Please check this minimal working example请检查这个最小的工作示例
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.