HTML 5 音频标记多个文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18274061/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML 5 Audio Tag Multiple Files
提问by Alex
I am trying to have two files in one HTML 5 Audio Tag that play one after the other. The code I have so far is:
我试图在一个 HTML 5 音频标签中包含两个文件，一个接一个播放。我到目前为止的代码是：
<audio id="ListenLive" controls autoplay>
<source src="advert.mp3" type="audio/mpeg">
<source src="stream.mp3" type="audio/mpeg">
</audio>
The issue I am having at the moment is that only the first file will play and end, it is like there is no second file. As soon as the first song ends it does nothing else.
我目前遇到的问题是只有第一个文件会播放和结束，就像没有第二个文件一样。第一首歌一结束，它就什么也不做。
Is there a way to get the second track to play automatically when the first one ends? I need it to be in HTML as it is for a mobile site so some code may not work on some devices
有没有办法让第二首曲目在第一首曲目结束时自动播放？我需要它在 HTML 中，因为它适用于移动网站，因此某些代码可能无法在某些设备上运行
采纳答案by Kimtho6
In javascript you can do it like this (this is just to get you started):
在javascript中，您可以这样做（这只是为了让您入门）：
audio = new Audio("start url");
audio.addEventListener('ended',function(){
audio.src = "new url";
audio.pause();
audio.load();
audio.play();
});
if you want you can also use the same player(jquery):
如果你愿意，你也可以使用相同的播放器（jquery）：
var audio = $("#player");
回答by Code.Town
Adding multiple sources to tag doesn't work this way. You can use it to providing the source in multiple formats.(some browsers don't support mp3 - i.e. Firefox doesn't support mp3 and you should provide ogg file)
将多个源添加到标签不能以这种方式工作。您可以使用它来提供多种格式的源。（某些浏览器不支持 mp3 - 即 Firefox 不支持 mp3，您应该提供 ogg 文件）
Sample:
样本：
<audio>
<source src="" id="oggSource" type="audio/ogg" />
<source src="" id="mp3Source" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
Your case is different. You are trying to make a playlist. You can make a playlist by yourself:
你的情况不同。您正在尝试制作播放列表。您可以自己制作播放列表：
http://www.lastrose.com/html5-audio-video-playlist/
http://www.lastrose.com/html5-audio-video-playlist/
http://jonhall.info/how_to/create_a_playlist_for_html5_audio
http://jonhall.info/how_to/create_a_playlist_for_html5_audio
OR simply use third party plugins like:
或者简单地使用第三方插件，如：
http://www.jplayer.org/latest/demo-02-jPlayerPlaylist/
http://www.jplayer.org/latest/demo-02-jPlayerPlaylist/
Using jPlayer would solve the browser compatibility issue too. For instance if you just provide .mp3 format, it will switch to flash version when user is browsing with Firefox.
使用 jPlayer 也可以解决浏览器兼容性问题。例如，如果您只提供 .mp3 格式，当用户使用 Firefox 浏览时，它将切换到 Flash 版本。
回答by Thirumalai murugan
With some javascript you can do a trick
使用一些 javascript 你可以做一个技巧
Here is an sample, another one
jQuery(function($) {
var supportsAudio = !!document.createElement('audio').canPlayType;
if(supportsAudio) {
var index = 0,
playing = false;
mediaPath = 'http://jonhall.info/how_to/assets/media/audio/',
extension = '',
tracks = [
{"track":1,"name":"Happy Birthday Variation: In the style of Beethoven","length":"00:55","file":"01_Happy_Birthday_Variation_In_The"},
{"track":2,"name":"Wedding March Variation 1","length":"00:37","file":"02_Wedding_March_1"},
{"track":3,"name":"Happy Birthday Variation: In the style of Tango","length":"01:05","file":"03_Happy_Birthday_Variation_In_The"},
{"track":4,"name":"Wedding March Variation 2","length":"00:40","file":"04_Wedding_March_2"},
{"track":5,"name":"Random Classical","length":"00:59","file":"05_AFI_com"}
],
trackCount = tracks.length,
npAction = $('#npAction'),
npTitle = $('#npTitle'),
audio = $('#audio1').bind('play', function() {
playing = true;
npAction.text('Now Playing:');
}).bind('pause', function() {
playing = false;
npAction.text('Paused:');
}).bind('ended', function() {
npAction.text('Paused:');
if((index + 1) < trackCount) {
index++;
loadTrack(index);
audio.play();
} else {
audio.pause();
index = 0;
loadTrack(index);
}
}).get(0),
btnPrev = $('#btnPrev').click(function() {
if((index - 1) > -1) {
index--;
loadTrack(index);
if(playing) {
audio.play();
}
} else {
audio.pause();
index = 0;
loadTrack(index);
}
}),
btnNext = $('#btnNext').click(function() {
if((index + 1) < trackCount) {
index++;
loadTrack(index);
if(playing) {
audio.play();
}
} else {
audio.pause();
index = 0;
loadTrack(index);
}
}),
li = $('#plUL li').click(function() {
var id = parseInt($(this).index());
if(id !== index) {
playTrack(id);
}
}),
loadTrack = function(id) {
$('.plSel').removeClass('plSel');
$('#plUL li:eq(' + id + ')').addClass('plSel');
npTitle.text(tracks[id].name);
index = id;
audio.src = mediaPath + tracks[id].file + extension;
},
playTrack = function(id) {
loadTrack(id);
audio.play();
};
extension = audio.canPlayType('audio/mpeg') ? '.mp3' : audio.canPlayType('audio/ogg') ? '.ogg' : '';
loadTrack(index);
}
$('#useLegend').click(function(e) {
e.preventDefault();
$('#use').slideToggle(300, function() {
$('#useSpanSpan').text(($('#use').css('display') == 'none' ? 'show' : 'hide'));
});
});
});
<link href="http://jonhall.info/examples/html5_audio_playlist_example.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content" role="main">
<div id="cwrap">
<div id="nowPlay" class="is-audio">
<h3 id="npAction">Paused:</h3>
<div id="npTitle"></div>
</div>
<div id="audiowrap">
<div id="audio0">
<audio id="audio1" controls="controls">
Your browser does not support the HTML5 Audio Tag.
</audio>
</div>
<noscript>Your browser does not support JavaScript or JavaScript has been disabled. You will need to enable JavaScript for this page.</noscript>
<div id="extraControls" class="is-audio">
<button id="btnPrev" class="ctrlbtn">|<< Prev Track</button> <button id="btnNext" class="ctrlbtn">Next Track >>|</button>
</div>
</div>
<div id="plwrap" class="is-audio">
<div class="plHead">
<div class="plHeadNum">#</div>
<div class="plHeadTitle">Title</div>
<div class="plHeadLength">Length</div>
</div>
<div class="clear"></div>
<ul id="plUL">
<li class="plItem">
<div class="plNum">1</div>
<div class="plTitle">Happy Birthday Variation: In the style of Beethoven</div>
<div class="plLength">0:55</div>
</li>
<li class="plItem">
<div class="plNum">2</div>
<div class="plTitle">Wedding March Variation 1</div>
<div class="plLength">0:37</div>
</li>
<li class="plItem">
<div class="plNum">3</div>
<div class="plTitle">Happy Birthday Variation: In the style of Tango</div>
<div class="plLength">1:05</div>
</li>
<li class="plItem">
<div class="plNum">4</div>
<div class="plTitle">Wedding March Variation 2</div>
<div class="plLength">0:40</div>
</li>
<li class="plItem">
<div class="plNum">5</div>
<div class="plTitle">Random Classical</div>
<div class="plLength">0:59</div>
</li>
</ul>
</div>
</div>
</div>
回答by Camille
HTML5 audio player, event driven and multiple track.
HTML5 音频播放器，事件驱动和多轨。
Thanks to jonhall.info and Thirumalai murugan to provide example.
感谢 jonhall.info 和 Thirumalai murugan 提供示例。
jQuery(function($) {
var supportsAudio = !!document.createElement('audio').canPlayType;
if(supportsAudio) {
var index = 0,
playing = false,
tracks = [
{"track":1,"name":"SoundHelix Song 1","length":"06:12","file":"https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"},
{"track":2,"name":"SoundHelix Song 3","length":"05:44","file":"https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3"},
{"track":3,"name":"SoundHelix Song 8","length":"05:25","file":"https://www.soundhelix.com/examples/mp3/SoundHelix-Song-8.mp3"}
],
trackCount = tracks.length,
npAction = $('#npAction'),
npTitle = $('#npTitle'),
audio = $('#audio1').bind('play', function() {
playing = true;
npAction.text('Now Playing:');
}).bind('pause', function() {
playing = false;
npAction.text('Paused:');
}).bind('ended', function() {
npAction.text('Paused:');
if((index + 1) < trackCount) {
index++;
loadTrack(index);
audio.play();
} else {
audio.pause();
index = 0;
loadTrack(index);
}
}).get(0),
btnPrev = $('#btnPrev').click(function() {
if((index - 1) > -1) {
index--;
loadTrack(index);
if(playing) {
audio.play();
}
} else {
audio.pause();
index = 0;
loadTrack(index);
}
}),
btnNext = $('#btnNext').click(function() {
if((index + 1) < trackCount) {
index++;
loadTrack(index);
if(playing) {
audio.play();
}
} else {
audio.pause();
index = 0;
loadTrack(index);
}
}),
loadTrack = function(id) {
$('.plSel').removeClass('plSel');
$('#plTrack>div:eq(' + id + ')').addClass('plSel');
npTitle.text(tracks[id].name);
index = id;
audio.src = tracks[id].file;
},
displayTrack = function(){
var parent = $('#plTrack');
$.each(tracks, function(i, track) {
$('<div></div>').addClass('row')
.append($('<div></div>').addClass('col-sm').text(track.track))
.append($('<div></div>').addClass('col-sm').text(track.name))
.append($('<div></div>').addClass('col-sm').text(track.length))
.appendTo(parent);
});
},
playTrack = function(id) {
loadTrack(id);
audio.play();
};
displayTrack();
loadTrack(index);
}
});#plTrack .plSel {
font-weight: bold;
}
.header {
color: #999;
border-bottom: 1px solid #999;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div>
<div class="row">
<div class="col-6"><h3 id="npAction">Paused:</h3></div>
<div class="col-6" id="npTitle"></div>
</div>
<div class="row">
<div class="col-6">
<audio id="audio1" controls="controls">
Your browser does not support the HTML5 Audio Tag.
</audio>
</div>
<noscript>Your browser does not support JavaScript or JavaScript has been disabled. You will need to enable JavaScript for this page.</noscript>
<div class="col-6">
<button id="btnPrev" class="ctrlbtn">|<< Prev Track</button> <button id="btnNext" class="ctrlbtn">Next Track >>|</button>
</div>
</div>
<div>
<div class="row header">
<div class="col-sm">#</div>
<div class="col-sm">Title</div>
<div class="col-sm">Length</div>
</div>
<div id="plTrack"></div>
</div>
</div>
</div>