如何从<ul>播放列表到相同的<音频>标签
How can I link different MP3 files from an <ul> playlist to the same <audio> tag?
我找到了一个关于如何使用HTML5<audio>
标记和JavaScript构建播放列表的好教程(http://blog.lastrose.com/html5-audio-video-playlist/)。
但是,当我将代码复制到我的网站中时,它根本无法正常工作,因为播放列表中的每个元素(如果单击)都会在新页面中启动一个新的音频播放器,而不是由播放列表上方的同一个播放器播放。
如何将<ul>
播放列表中的不同MP3文件链接到同一个<audio>
标签?
这是我的代码
var video_player = document.getElementById("video_player");
var links = video_player.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
links[i].onclick = handler;
}
function handler(e) {
e.preventDefault();
videotarget = this.getAttribute("href");
filename = videotarget.substr(0, videotarget.lastIndexOf('.')) || videotarget;
video = document.querySelector("#video_player video");
video.removeAttribute("controls");
video.removeAttribute("poster");
source = document.querySelectorAll("#video_player video source");
source[0].src = filename + ".mp4";
source[1].src = filename + ".webm";
video.load();
video.play();
}
<audio controls id="player">
<source src="01 Scusate.mp3" type="audio/mp3">
<source src="22 Gli affitti.mp3" type="audio/mp3">
</audio>
<ul id="playlist">
<li class="playlist"><a href="01 Scusate.mp3" class="p">Scusate - Gino Negri performer</a></li>
<li class="playlist"><a href="22 Gli affitti.mp3" class="p">Gli affitti - Sandro Massimini</a></li>
</ul>
我非常感谢任何能够发现JavaScript中的错误并向我提出解决方案的人。
我在乐队的页面上有这个功能。
我是这样做的:
/* HTML5 player */
$('#playlist li').on('click', pickSong);
var pickSong = function(ev){
var item = ev.target;
var audio = $("audio")[0];
var pad = 'muziek''';
audio.pause();
$('#mp3src').attr('src', '').attr('src', pad.concat(item.getAttribute('data-val'),'.mp3'));
$('#oggsrc').attr('src', '').attr('src', pad.concat(item.getAttribute('data-val'),'.ogg'));
audio.load();
audio.play();
$('#playlist li').removeClass('plays');
$(item).addClass('plays');
}
这是在HTML:中
<audio controls preload="none">
<source id="mp3src" src="muziek/friend.mp3" type="audio/mp3">
<source id="oggsrc" src="muziek/friend.ogg" type="audio/ogg">
</audio>
<ul id="playlist">
<li class="plays" data-val="friend"></li>
<li data-val="mercy"></li>
<li data-val="anouk"></li>
<li data-val="tmyfml"></li>
<li data-val="krezip"></li>
</ul>
您的代码有一些不同。将一个文件放在audio标记中作为jsfiddler示例,将另一个文件放到标记中作为示例。试着通过你代码中的示例并尝试它。然后,如果有效,adpt为你需要(http://blog.lastrose.com/html5-audio-video-playlist/)
相关文章:
- 在<页眉>标签
- 如何更改<svg>标记为<img>用js标记
- 如何逃离<>在javascript下划线模板中
- 有没有一种方法可以检测ios<>使用jquery和触发器操作形成导航按钮
- 正则表达式,它允许除“”之外的所有字符<>_;{}[]”;
- ajax调用:响应<->数据类型
- 如果所有三个文本框<>然后是100%
- CORS的问题.烧瓶<->AngularJS
- 有没有一种方法可以创建与Java<->JSON映射对象,如JSON.stringfy(jsObject)创建的
- 什么是%<>%调用了语法
- JavaScript返回值:What dos<>意思是
- JavaScript中哪种类型的值对应于Java`List<>`
- 如何发送类似“<>"在参数中使用$.ajax-to-server
- 不等于<>操作员不工作
- jquery附加函数转换<>到实体名称
- 只有当超过3个元素时才显示更多内容按钮,否则不显示.使用jquery's:lt:gt
- 为什么在<>ckeditor中不支持
- url有效性的Java脚本regexp,带有<>
- 设计Javascript前端<->C++后端通信
- 比较查询运算符ObjectId<->日期