HTML5/JavaScriptでAudioのendedがPCは正常に反応するがAndroid/iOSだとうまくいかない件

#概要

Androidアプリを作ろうと思い開発中。。

Javaの人だけど将来にむけてかつiOSとの互換性も鑑みてWebViewアプリを開発。
HTML5/JavaScriptでサーバーに上げてーのアプリはサーバーだけ見るやつ。
まぁこれアプリっていうのかなｗ

で、実装したい内容が音①、音②があったときに
Audio①を再生完了⇒Audio②を再生を実装したい。

なぜかPC上はうまくいくのにAndroid/iOSはうまくいかない。

Audio①のみ再生されるだけ。。

解決方法がわかったの共有しま。

#結論

Audio②をあらかじめ再生する

Audio①→audio②を順に再生したいんですが、トリガーはAudio①なんです。
つまり、Audio②はAudio①の再生が完了するまで再生されない。
それを読み込み時点で再生させてあげる。

Audioってヤツはわがままかまってちゃんなんですかｗｗ

#ソースコード

以下ソースコード

<!-- ○A -->
<p>A：
<select name="A">
    <option value="audioA1">A1</option>
    <option value="audioA2">A2</option>
    <option value="audioA3">A3</option>
</select>
</p>

<!-- ○B -->
<p>B：
<select name="B">
    <option value="audioB1">B1</option>
    <option value="audioB2">B2</option>
    <option value="audioB3">B3</option>
</select>
</p>

<!-- ○再生ボタン -->
<p>
<form name="playButton">
    <input type="button" name="playButton" value="再生" onClick="playAudio()">
</form>
</p>

//audioを作成
var audioA, audioB = new Audio();

//最初に呼ばれる
function preLoad() {
    //とりあえず無音で再生
    audioB.muted = true;
    audioB.play();
}

//再生スタート
function playAudio(){
    //ミュート解除
    audioB.muted = false;

    //Aの値を取得
    var selectedA = $("#A").val();
    //Bの値を取得
    var selectedB = $("#B").val();

    //Aのパスを指定
    audioA.src = "audio/aa/" + selectedA + ".mp3";
    //Bのパスを指定
    audioB.src = "audio/bb/" + selectedB + ".mp3";

    //Aを再生
    audioA.play();

    //★Aの再生が完了したら
    audioA.addEventListener("ended", function(e) {
        //Bを再生
        audioB.play();
    });
}

なんか他のやり方ないのかな。。。