javascript - Changing <source> with HTML5 Audio works in Chrome but not Safari - Stack Overflow

admin管理员组

文章数量:1290095

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 patible way.

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>

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?

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 patible way.

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>

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?

• javascript
• jquery
• html
• safari
• html5-audio

Share Improve this question Follow edited Oct 4, 2013 at 13:36 tim peterson asked Jun 23, 2012 at 14:22 tim petersontim peterson 24.3k6363 gold badges184184 silver badges302302 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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:

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

For some reason, Safari can't use the <source> tags for swapping between songs but Chrome can. Just changing what gets loaded into the src attribute on the <audio> tag works on both Chrome and Safari but then there is the ogg vs. mp3 issue.

I guess one way to get around this ogg vs. mp3 issue is to use Modernizr does feature detection to load the ogg mime-type in Firefox and the mp3 in Chrome/Safari. Here's a reference on that: Detecting html5 audio support with Modernizr.

Just a quick addition to the topic (in 2023):

I had a similar problem. The code was working in Safari, but not Chrome. I had Javascript code that swapped the src of the <source> element. That worked fine in Safari, but Chrome refused to recognize the file and showed a disabled player state. What I was missing, and what I learned here, is that you need to call load() as well.

So adding this fixed it for me.

audioPlayer.load();

Safari seems to auto-detect the source change, Chrome did not.

本文标签： javascriptChanging ltsourcegt with HTML5 Audio works in Chrome but not SafariStack Overflow