我正在尝试制作可在每个主要浏览器中使用的HTML5音频播放列表:Chrome,Safari,Firefox,IE9 +。但是,我无法弄清楚如何以跨浏览器兼容的方式更改源。
更新例如,更改<source>
代码的src
可在Chrome中使用,但不适用于Safari。虽然使用canPlayType
下面的@ eivers88解决方案可行但我更容易更改<source>
标记的src
。任何人都可以向我解释为什么我的代码直接在Chrome下工作但不适用于Safari吗?
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:
<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>
单击按钮后检查HTML,<source src=""/>
在Safari中发生了变化,只是没有发出HTTP请求,因此文件没有得到load()
和{{1 }}编。有没有人对此有任何想法?
答案 0 :(得分:5)
这是一个有效的exapmle。它与你所拥有的有点不同,但希望这会有所帮助。
HTML:
<button type="button">Next song</button>
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();
}
})
答案 1 :(得分:1)
出于某种原因,Safari无法使用<source>
标签在歌曲之间进行交换,但Chrome可以。只需更改加载到src
标记上的<audio>
属性的内容即可在Chrome和Safari上运行,但之后会出现ogg vs. mp3问题。
我想解决这个ogg vs. mp3问题的一种方法是使用Modernizr进行功能检测来加载Firefox中的ogg mime类型和Chrome / Safari中的mp3。以下是对此的参考: Detecting html5 audio support with Modernizr