使用HTML5更改<source>音频可在Chrome浏览器中使用，但不支持Safari

我试图制作一个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() 。 有没有人有这个想法？

---

这是一个工作范围。 这与你所拥有的有点不同，但希望这会有所帮助。

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

---

出于某种原因，Safari不能使用<source>标签在歌曲之间切换，但Chrome可以。 只要改变加载到<audio>标记的src属性中的内容，就可以在Chrome和Safari上使用，但之后会出现ogg和mp3问题。

我想一个解决这个ogg和mp3问题的方法是使用Modernizr功能检测来加载Firefox中的ogg mime类型和Chrome / Safari中的mp3。 这里有一个参考：用Modernizr检测html5音频支持。

链接地址: http://www.djcxy.com/p/23035.html

上一篇: Changing <source> with HTML5 Audio works in Chrome but not Safari

下一篇: How to detect Safari, Chrome, IE, Firefox and Opera browser?