更改< source> HTML5音频适用于Chrome，但不支持Safari [英] Changing <source> with HTML5 Audio works in Chrome but not Safari

问题描述

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

I'm trying to make an HTML5 audio playlist that will work in each major browser: Chrome,Safari, Firefox, IE9+. However, I can't figure out how to change the sources in a cross browser compatible way.

更新例如，更改< source> 标记的 src s适用于Chrome，但不适用于Safari。虽然下面的@ eivers88解决方案使用 canPlayType 工作，但我更容易更改< source> 标记的 SRC 秒。任何人都可以向我解释为什么我的代码直接在Chrome下工作但不适用于Safari吗？

UPDATED For example, changing the <source> tag's srcs works in Chrome but not Safari. While @eivers88's solution below using canPlayType works it seems easier to me just to change the <source> tag's srcs. Can anyone explain to me why my code directly below works in Chrome but not 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。有没有人对此有任何想法？

Inspecting the HTML after the button click, the <source src=""/> does change in Safari, its just that the HTTP request is not made, so they the files don't get load()ed and play()ed. Does anyone have any thoughts on this?

推荐答案

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

Here is a working exapmle. It's a little bit different from what you have but hopefully this can be helpful.

HTML：

<button type="button">Next song</button>

Javascript / jquery：

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

这篇关于更改< source> HTML5音频适用于Chrome，但不支持Safari的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！