[英]How can I detect the number of audio channels in an mp3 in an <audio> tag?
[英]How can I link different MP3 files from an <ul> playlist to the same <audio> tag?
我找到了一個很好的教程,介紹如何使用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中發現錯誤並提出解決方案的任何人。
我在樂隊的頁面上有此功能。
這是我的操作方式:
/* 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示例,將另一個文件放在tag中作為示例。 嘗試將示例粘貼到代碼中,然后嘗試。 然后,如果可行,請根據需要進行調整( http://blog.lastrose.com/html5-audio-video-playlist/ )
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.