iPhone HTML5 Audio tag not working

Question

I have a problem with an audio tag not working on an iPonhe. It plays HTML5 Audio tags when tested on W3Schools website but will not work with my one below

 <audio autoplay ><source  src="audio/alarm1.mp3" type="audio/mpeg"></audio>

This code works fine on desktop and android browsers, just not ipod or iphone safari

EDITED

It would seem that the audio file is working ok, it just will not autoplay

Is there a way I could let the user press a button and there after play the music when ever it is required without user intervention?

Solution

Autoplay does not work on iOS and android. They require some kind of user interaction to play an audio or a video.

If you play the audio on a user event(click/touchstart), it will play just fine.

If you don't have a user event on which it should play, What I usually do is bind a touchstart event on document and play and pause the audio on the first touchstart I get. Then whenever I need to play the audio, I play it again. (If the audio is played and paused once using a user interaction, you can play it again the next time without a user interaction).

//play and pause it once
document.addEventListener('touchstart', function () {
    document.getElementsByTagName('audio')[0].play();
    document.getElementsByTagName('audio')[0].pause();
});

//now play whenever you want it to play

Comments

[D. A.]

Add a link to your post?