Question

So, I am building a web app that has a div with text that changes on various user actions (it’s stepping through an array of pieces of text). I’m trying to add audio to it, so I made another array with the sound files in the appropriate positions:

var phrases=['Please hand me the awl.','etc1','etc2','etc3'];
var phrasesAudio=['awl.mp3','etc1.mp3','etc2.mp3','etc3.mp3'];

And on each action completion, a ‘counter’ variable in incremented, and each array looks for the object at that counter

var audio  = document.createElement("audio"),
canPlayMP3 = (typeof audio.canPlayType === "function" &&
              audio.canPlayType("audio/mpeg") !== "");
function onAction(){
correct++;
document.getElementById('speech').innerHTML=phrases[correct];
if(canPlayMP3){
    snd = new Audio(phrasesAudio[correct]);
}
else{
    snd = new Audio(phrasesAudioOgg[correct]);
}
snd.play();
}

(the text replaces a div’s HTML and I use .play() for the audio object)…usually works okay (and ALWAYS does in a ‘real’ browser), but on the iPad (the actual target device) after a few successful iterations, the TEXT continues to progress accurately, but the AUDIO will hiccup and repeat a sound file one or more times. I added some logging and looking there it reports that it’s playing screw.mp3 (just an example, no particular file is more or less error prone), but in actuality it plays screwdriver.mp3 (the prior file, if there is an error, the audio always LAGS, never LEADS)…because of this I am thinking that the problem is with my use of .play()…so I tried setting snd=null; between each sound, but nothing changed…Any suggestions for how to proceed? This is my first use of audio elements so any advice is appreciated. Thanks.

edit: I’ve also tried setting the files with snd.src (based on https://wiki.mozilla.org/Audio_Data_API) and this caused no audio to play

Answer 1

for iPad you need to call snd.load() before snd.play() – otherwise you get “odd” behaviour…

see for some insight:
http://jnjnjn.com/187/playing-audio-on-the-ipad-with-html5-and-javascript/
Autoplay audio files on an iPad with HTML5

EDIT – as per comment from the OP:

Here https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox you can find a tip on halting a currently playing piece of media with

var mediaElement = document.getElementById("myMediaElementID"); 
mediaElement.pause(); 
mediaElement.src = ""; 

and, following that with setting the correct src, load(), play() works great