使用 HTML5 音频更改 <source> 在 Chrome 中有效，但在 Safari 中无效答案

【问题标题】：Changing <source> with HTML5 Audio works in Chrome but not Safari使用 HTML5 音频更改 <source> 在 Chrome 中有效，但在 Safari 中无效
【发布时间】：2012-06-25 13:56:11
【问题描述】：

我正在尝试制作一个 HTML5 音频播放列表，它可以在每个主要浏览器中运行：Chrome、Safari、Firefox、IE9+。但是，我不知道如何以跨浏览器兼容的方式更改源。

已更新例如，更改 <source> 标签的 srcs 在 Chrome 中有效，但在 Safari 中无效。虽然下面使用canPlayType 的@eivers88 解决方案有效，但对我来说只是更改<source> 标签的srcs 似乎更容易。谁能向我解释为什么我下面的代码在 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()ed 和 play()ed。有人对此有什么想法吗？

【问题讨论】：

标签： javascript jquery html safari html5-audio

【解决方案1】：

这是一个有效的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();
    }
})

【讨论】：

另外，如果你在电脑上，请确保你安装了快速播放器！我以前犯的一个错误！ =D
-@eivers，谢谢，但这在 Firefox b/c 上会失败，因为没有 ogg mime-type。这就是为什么我使用<source> 标签而不仅仅是audioPlayer 的src 属性。有什么建议吗？
这就是我添加if(!!audioPlayer.canPlayType('audio/mp3') === true) 语句的原因，如果它为false，您可以添加else { audioType = '.ogg' }，然后将audioType 变量更改为.ogg
或者您甚至可以只使用if(!!audioPlayer.canPlayType('audio/ogg') === true){ audioType = '.ogg' }，因此不需要 else 语句
没问题！很高兴我能帮上忙！

【解决方案2】：

由于某种原因，Safari 不能使用 <source> 标签在歌曲之间进行交换，但 Chrome 可以。只需更改加载到 <audio> 标签上的 src 属性中的内容即可在 Chrome 和 Safari 上运行，但随后会出现 ogg 与 mp3 的问题。

我想解决这个 ogg 与 mp3 问题的一种方法是使用 Modernizr 进行功能检测来加载 Firefox 中的 ogg mime 类型和 Chrome/Safari 中的 mp3。这是一个参考： Detecting html5 audio support with Modernizr.

【讨论】：