Question

我找到了一个很好的教程，介绍如何使用HTML 5 <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中找到错误并向我推荐解决方案的人。

Answer 1

我在乐队的页面上有这个功能。

以下是我的表现：

/* 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>

Answer 2

您的代码存在一些差异。将一个文件放在音频标签中作为jsfiddler示例，将另一个文件放在标签上作为示例。尝试通过代码中的示例并尝试它。然后，如果有效，请根据您的需要（http://blog.lastrose.com/html5-audio-video-playlist/）

如何将<ul>播放列表中的不同MP3文件链接到相同的<audio>标签？</audio> </ul>

2 个答案: