Geek Answers Handbook

Changing <source> with HTML5 Audio works in Chrome but not in Safari

I am trying to create an HTML5 audio playlist that will work in every major browser: Chrome, Safari, Firefox, IE9 +. However, I cannot figure out how to change the sources in browser compatibility mode.

UPDATED . For example, changing a tag <source> srcworks in Chrome, but not in Safari. While the @ eivers88 solution is lower using canPlayType, it seems easier to change the <source> srcs tag . Can someone explain to me why my code directly below works in Chrome, but not in 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. - ?

+3
2

exapmle. , , , , .

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

- Safari <source> , Chrome . src <audio> Chrome, Safari, ogg vs. mp3.

, ogg vs. mp3 , Modernizr ogg mime- Firefox mp3 Chrome/Safari. : html5 Modernizr.

+1

More articles:


All Articles