javascript - 通过 onclick 事件在 JPlayer 上播放歌曲
问题描述
我需要能够设置将歌曲发送到中央 JPlayer 的链接。
例如,在商店中,有人想在购买曲目之前对其进行采样,您单击链接,它将信息发送到 JPlayer 并开始播放该曲目。
我在这里(7 岁)的其他 stackoverflow 问题中看到了使用类似于下面的示例,但是无法使其正常工作。
更新:我已经尝试了以下,但链接没有做任何事情。
$(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>
解决方案
这是您可以使用的技巧。您必须让 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");
});
});
请检查这个最小的工作示例
推荐阅读
- javascript - 如何在 WordPress (API) 中设置一些 JavaScript
- rest - 如何实现接受用户定义类型的 rest 方法
- ios - Swift 中带有可点击链接或电话号码和自定义属性字符串的 UITextView
- java - 如何在Java中删除分数中的“0”?
- python - 如何在 Python 中运行 linux 命令时修复“Tail: Write Error: Broken Pipe”?
- ruby - 为什么类实例上的扩展方法与继承的工作方式不同?
- php - 添加 ?ref 后没有出现弹出框
- c - ANSI C 语法 (lex) 中的八进制数字
- r - R - 从数据框中删除差异小于 30 天的行
- python - 如何设置按钮 (command = def()) 的输出,作为 Combobox 值的输入 =