javascript 使用 HTML5 音频更改 <source> 在 Chrome 中有效，但在 Safari 中无效
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11170228/
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
Changing <source> with HTML5 Audio works in Chrome but not Safari
提问by tim peterson
I'm trying to make an HTML5 audio playlist that will work in each major browser: Chrome,Safari, Firefox, IE9+. However, I can't figure out how to change the sources in a cross browser compatible way.
我正在尝试制作一个适用于每个主要浏览器的 HTML5 音频播放列表：Chrome、Safari、Firefox、IE9+。但是，我无法弄清楚如何以跨浏览器兼容的方式更改源。
UPDATEDFor example, changing the <source>tag's srcs works in Chrome but not Safari. While @eivers88's solution below using canPlayTypeworks it seems easier to me just to change the <source>tag's srcs. Can anyone explain to me why my code directly below works in Chrome but not Safari?
更新例如，更改<source>标签的srcs 在 Chrome 中有效，但在 Safari 中无效。虽然@eivers88 下面使用的解决方案canPlayType有效，但对我来说只是更改<source>标签的srcs似乎更容易。谁能向我解释为什么我下面的代码可以在 Chrome 中运行而不是在 Safari 中运行？
JS:
JS：
var audioPlayer=document.getElementById('audioPlayer');
var mp4Source=$('source#mp4');
var oggSource=$('source#ogg');
$('button').click(function(){
audioPlayer.pause();
mp4Source.attr('src', 'newFile.mp4');
oggSource.attr('src', 'newFile.ogg');
audioPlayer.load();
audioPlayer.play();
});
HTML:
HTML：
<button type="button">Next song</button>
<audio id="audioPlayer">
<source id="mp4" src="firstFile.mp4" type="audio/mp4"/>
<source id="ogg" src="firstFile.ogg" type="audio/ogg" />
</audio>
Inspecting the HTML after the button click, the <source src=""/>does change in Safari, its just that the HTTP request is not made, so they the files don't get load()ed and play()ed. Does anyone have any thoughts on this?
单击按钮后检查 HTML <source src=""/>，Safari 中确实发生了变化，只是没有发出 HTTP 请求，因此文件不会被load()ed 和play()ed。有没有人对此有任何想法？
回答by eivers88
Here is a working exapmle. It's a little bit different from what you have but hopefully this can be helpful.
这是一个工作示例。它与您拥有的略有不同，但希望这会有所帮助。
HTML:
HTML：
<button type="button">Next song</button>
Javascript/jquery:
Javascript/jQuery：
var songs = [
'1976', 'Ballad of Gloria Featherbottom', 'Black Powder'
]
var track = 0;
var audioType = '.mp3'
var audioPlayer = document.createElement('audio');
$(window).load(function() {
if(!!audioPlayer.canPlayType('audio/ogg') === true){
audioType = '.ogg' //For firefox and others who do not support .mp3
}
audioPlayer.setAttribute('src', 'music/' + songs[track] + audioType);
audioPlayer.setAttribute('controls', 'controls');
audioPlayer.setAttribute('id', 'audioPlayer');
$('body').append(audioPlayer);
audioPlayer.load();
audioPlayer.play();
});
$('button').on('click', function(){
audioPlayer.pause();
if(track < songs.length - 1){
track++;
audioPlayer.setAttribute('src', 'music/' + songs[track] + audioType);
audioPlayer.load();
audioPlayer.play();
}
else {
track = 0;
audioPlayer.setAttribute('src', 'music/' + songs[track] + audioType);
audioPlayer.load();
audioPlayer.play();
}
})
回答by tim peterson
For some reason, Safari can't use the <source>tags for swapping between songs but Chrome can. Just changing what gets loaded into the srcattribute on the <audio>tag works on both Chrome and Safari but then there is the ogg vs. mp3 issue.
出于某种原因，Safari 无法使用<source>标签在歌曲之间切换，但 Chrome 可以。只需更改加载到标签src属性中的<audio>内容即可在 Chrome 和 Safari 上运行，但存在 ogg 与 mp3 问题。
I guess one way to get around this ogg vs. mp3 issue is to use Modernizr does feature detection to load the ogg mime-type in Firefox and the mp3 in Chrome/Safari. Here's a reference on that: Detecting html5 audio support with Modernizr.
我想解决这个 ogg 与 mp3 问题的一种方法是使用 Modernizr 进行功能检测来加载 Firefox 中的 ogg mime 类型和 Chrome/Safari 中的 mp3。这是一个参考： Detecting html5 audio support with Modernizr。
