使用HTML5音频更改适用于Chrome但不适用于Safari

我正在尝试制作可在每个主要浏览器中使用的HTML5音频播放列表：Chrome，Safari，Firefox，IE9 +。 但是，我无法弄清楚如何以跨浏览器兼容的方式更改源。

更新例如，更改标签的src可在Chrome中使用，但不适用于Safari。 虽然@ eivers88的解决方案使用canPlayType工作，但我更容易改变标签的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：

 Next song  

点击按钮后检查HTML， 确实在Safari中发生变化，只是没有发出HTTP请求，所以文件没有得到load() ed和play() ed。 有没有人对此有任何想法？

Answer 1

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

HTML：

 Next song 

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

Answer 2

出于某种原因，Safari无法使用标签在歌曲之间进行交换，但Chrome可以。 只需将加载到标签上的src属性中的内容更改为适用于Chrome和Safari，但随后会出现ogg vs. mp3问题。

我想解决这个ogg vs. mp3问题的一种方法是使用Modernizr做function检测来加载Firefox中的ogg mime类型和Chrome / Safari中的mp3。 以下是对此的参考： 使用Modernizr检测html5音频支持 。