[Webkit-unassigned] [Bug 132691] New: HTMLAudioElement doesn't play with Javascript on iOS with WebKit (Safari and Chrome on iPad/iPhone 7)

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=132691

           Summary: HTMLAudioElement doesn't play with Javascript on iOS
                    with WebKit (Safari and Chrome on iPad/iPhone 7)
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: iOS
        OS/Version: iOS 7.0
            Status: NEW
          Severity: Blocker
          Priority: P1
         Component: New Bugs
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: lebegue_h at yahoo.com


I am trying to create a game that pre-loads Audio elements in JavaScript and HTML5 using the <audio> tag i.e. HTMLAudioElement 

After defining the audio source the Javascript attempts to play the audio so it can pre-buffer the sound with HTMLAudioElement.play() 
This code wworks great on Windows, and on all browsers, except it doesn't play the sound on iOS (iPad, iPhone).
The Audio.play() can only be triggered by a user interactive click. 

This may logically be done because of bandwidth limitations, but the when developing a game, the pre-loading strategy can not properly work. 

Can this be changed in the WebKit ? Is there a Javascript workaround to this?

Thank you in advance
Hugo

PS: I also assume this is the same behavior for HTMLVideoElement 

This is a sample code
var LETTERS={
    L1:{value:1, wavfile:"res/letters/c.wav", mp3file:"res/letters/c.mp3", description:"c"},
    L2:{value:2, wavfile:"res/letters/h.wav", mp3file:"res/letters/h.mp3", description:"h"},
    L3:{value:3, wavfile:"res/letters/k.wav", mp3file:"res/letters/k.mp3", description:"k"},
    L4:{value:4, wavfile:"res/letters/l.wav", mp3file:"res/letters/l.mp3", description:"l"},
    L5:{value:5, wavfile:"res/letters/q.wav", mp3file:"res/letters/q.mp3", description:"q"},
    L6:{value:6, wavfile:"res/letters/r.wav", mp3file:"res/letters/r.mp3", description:"r"},
    L7:{value:7, wavfile:"res/letters/s.wav", mp3file:"res/letters/s.mp3", description:"s"},
    L8:{value:8, wavfile:"res/letters/t.wav", mp3file:"res/letters/t.mp3", description:"t"},
};

   for (var src in letters){

        //var audio=new Audio(); // Tried with this, doesn't change anything 

        var audio = document.createElement("audio");

        audio.controls=true;
        audio.preload="auto";
        audio.autoplay=true;
        audio.volume=0;
        audio.id=src; 
        audio.style.display="none";

        if (audio.canPlayType("audio/mpeg")) {
            var src1 = document.createElement("source");
            src1.type="audio/mpeg";
            src1.src = letters[src].mp3file;
            audio.appendChild(src1);
        }
        if (audio.canPlayType("audio/wav")) {
            var src2 = document.createElement("source");
            src2.type="audio/mpeg";
            src2.src = letters[src].mp3file;
            audio.appendChild(src2);
        }

        sounds[letters[src].value]=audio;

        // below code is here to try to play/preload the audio (volume is set to 0)     
        try{
            audio.load();
        }catch (err){};

        try{
            audio.click();
        }catch (err){};

        try{
            audio.play();
        }catch (err){};


        audio.addEventListener("canplaythrough", function(){
            letterCount ++;
            if (letterCount>=numLetters) {
                callback(sounds);
            }
        });

    }
    if (letterCount==0){
        callback(sounds);
    }

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.