safari browser doesn’t support HTML5 audio tag in ipad/iphone,Android

Question

I am working on a project based on jquery animation its animation works fine on desktop (Firefox,chrome,opera,IE) also support HTML 5 audio tag but in Ipad/iphone/ Android safari audio tag doesn't support.Its works fine on Ipad/iphone/ Android firefox.i have searched it in many forum don't get desire Result. I have used this function :

function playmusic(file1,file2)   
{ 
    document.getElementById('music11').innerHTML='<audio id="music1"><source src="'+file1+'" type="audio/ogg"><source src="'+file2+'" type="audio/mpeg"></audio>';
    $("#music1").get(0).play();
 }   

I have called function like : playmusic(2.ogg','2.mp3'); If I give autoplay in audio tag it works but play method not working and I have to use play method as in my application needs sound in particular event see the link http://solutions.hariomtech.com/jarmies/

I have also changed my function and give direct audio tag in div and call function the same problem I face as I mentioned above. I need sound play in background without any click.if I use auto play method so it play sound only one time but I need sound multiple time on event.

Answer 1

Try to add an autoplay attribute on the audio tag:

function playmusic(file1, file2) { 
    document.getElementById('music11').innerHTML='<audio autoplay id="music1"><source src="'+file1+'" type="audio/ogg"><source src="'+file2+'" type="audio/mpeg"></audio>';
}

I would however recommend building a proper element and insert that into the DOM - something like this:

function playmusic(file1, file2) { 

    var audio = document.createElement('audio');
    audio.preload = 'auto';
    audio.autoplay = true;

    if (audio.canPlayType('audio/ogg')) {
        audio.src = file1;
    }
    else if (audio.canPlayType('audio/mpg')) {
        audio.src = file2;
    }

    document.getElementById('music11').appendChild(audio);
}