javascript - iPad で HTML5 オーディオの読み込みと再生が機能しない

Question

考えられるすべての解決策を試しましたが、まだこれを機能させることができません。iPhone を含むすべてのブラウザで mp3 または ogg を読み込んで再生できますが、残っている唯一のフロンティアは iPad で、オーディオは再生されません。曲をクリックすると、コードが audio-player src に読み込まれますが、曲は再生されません。繰り返しますが、これは HTML5 をサポートする他のすべてのブラウザーで機能しますが、iPad ではファイルを再生できません。ファイル パスをコードに貼り付けると曲が再生されるので、load および play 関数と関係があると思いますが、正確にはわかりません。

以下は適切なコードです。どんな助けでも大歓迎です。前もって感謝します。

HTML

<div id="song-title-display"></div>

        <div id="song-title">
        <ul class="list">
        <li><a class="tracks selected" id="1_tracks" href="1" data-file="song1">Song1</a></li>
        <li><a class="tracks" id="2_tracks" href="2" data-file="song2">Song2</a></li>
        </ul>
        </div>

    <audio id="audio-player" name="audio-player">
    <source id="source-file1" src="" type="audio/mpeg">
    <source id="source-file2" src="" type="audio/ogg">
    </audio>

JS

$("#song-title a").click(function() {
  var name = $(this).html(),
      filename = $(this).attr("data-file");
      filename2 = "uploadedsongsfolder" + filename;
      filename3 = "uploadedsongsfolder" + filename + ".mp3";
      filename4 = "uploadedsongsfolder" + filename + ".ogg";
    $('#song-title-display').html($(this).html());
     clickedID=$(this).attr('href');
     $('.tracks').removeClass('selected'); $('#'+clickedID+'_tracks').addClass('selected');

    document.getElementById('source-file1').src =   filename3;
    document.getElementById('source-file2').src =   filename4;
    $("#audio-player")[0].load();
    $("#audio-player")[0].play();
    return false;