在Chrome中使用HTML5音频更改<source>可以正常工作，但在Safari中无法正常工作

Question

在Chrome中使用HTML5音频更改<source>可以正常工作，但在Safari中无法正常工作

3

我正在尝试创建一个HTML5音频播放列表，以便在每个主要浏览器中都能正常工作：Chrome、Safari、Firefox、IE9+。然而，我无法找到一种跨浏览器兼容的方式来更改源代码。更新例如，更改<source>标签的src在Chrome中有效，但在Safari中无效。虽然@eivers88下面的解决方案使用canPlayType有效，但我认为直接更改<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()和play()。对此有任何想法的人吗？

- tim peterson

3个回答

1

出于某些原因，Safari无法使用<source>标记在歌曲之间进行切换，但Chrome可以。只需要更改<audio>标签上的src属性加载内容就可以在Chrome和Safari上工作，但是存在ogg与mp3的问题。

我猜解决ogg与mp3的问题的一种方法是使用Modernizr进行特性检测，以在Firefox中加载ogg mime-type，在Chrome / Safari中加载mp3。这里有一个相关参考：用Modernizr检测html5音频支持。

- tim peterson

0

关于主题的一个快速补充（在2023年）：

我遇到了类似的问题。代码在Safari中可以运行，但在Chrome中无法运行。我有一段JavaScript代码，用于交换<source>元素的src。在Safari中这很好用，但是Chrome拒绝识别该文件并显示禁用的播放器状态。我错过了什么，也从这里学到了，就是你还需要调用load()。

所以添加这个对我有帮助。

audioPlayer.load();

Safari 似乎可以自动检测源代码的更改，但 Chrome 却不能。

- oelna

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- eivers88 · Accepted Answer

这里有一个可用的示例。它跟你们的有些不同，但希望它能对你们有所帮助。

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();
    }
})