Question

I have a web application that I have built and it needs to have three different kind of alerts. Single beep, long beep and triple beep. All the audio files are in .wav format. The application works as expected with all beep notifications playing at the right time on a Mac or PC, with IE, FireFox, Chrome and Safari on Mac.

When I run the application on an iPad it only wants to play the single beep and will play it every time it is supposed to. When it’s supposed to play the long beep or triple beep, it doesn’t.

Can somebody please tell me why this is happening and what I can do to get this working? This web application was built to run on the iPad and full web browsers. This is the last thing that needs to be worked out, before the application is completed.

Thanks in advance. 🙂

Here is my code for the audio tags and the javascript that makes it work.

HTML

    <span style="visibility:hidden; display: none; ">
        <audio src="./sounds/beep.wav"></audio>
        <audio src="./sounds/longBeep.wav"></audio>
        <audio src="./sounds/tripleBeep.wav"></audio>
    </span>

JavaScript

    function playBeep() {
        var beepAudio = document.getElementsByTagName('audio')[0];
        beepAudio.play();    
    }

    function playLongBeep() {
        var beepAudio = document.getElementsByTagName('audio')[1];
        beepAudio.play();    
    }

    function playTripleBeep() {
        var beepAudio = document.getElementsByTagName('audio')[2];
        beepAudio.play();    
    }

All the audio files are using the same codec and the format.

Answer 1

Only one audio tag at a time is supported on MobileSafari.

Use one audio element and change the src attribute using JS. Then call load/play when required. This is described in detail here.