HTML5 audio load and play won't work on the iPad

Question

I have tried every solution i can think of and still can't get this to work. I am able to load and play mp3's or ogg's in every browser including the iPhone but the only remaining frontier is the iPad and the audio won't play. When I click on the song, it loads the code into the audio-player src but it doesn't play the song. Again, this works in every other HTML5 supported browser but the iPad doesn't play the file. If I paste the file path into the code, the song plays so I think it has to do with the load and play functions but I can't figure out how exactly.

Below is the appropriate code. Any help would be veeeery greatly appreciate. Thanks in advance.

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;

have you tried creating the audio tag at run time and then eval the script? — karthick
Yes, and I didn't have any luck. Again, the odd part is that it works in an earlier Mobile version of Safari 5 on the iPhone but it's not working on the iPad. It didn't work on the iPhone until I added "type" to the source tag. This leads me to believe that its something really stupid. — Johan
So, this uploadsongsfolder where is this folder present is this a weburi or some folder present in the server? — karthick
Did you manage to resolve this? I'm also having problems playing audio (mp3) files on the iPad; and only on the iPad! In my case, it plays the first few mins (of a 30 minute mp3 file) and the restarts. (?) — MrWhite

Nikola Lukic Nikola Lukic · Accepted Answer · 2016-12-21T08:43:58

Try this :

$("#audio-player")[0].addEventListener('canplaythrough', mobileReady, false);

function mobileReady(){

  $("#audio-player")[0].play() 

}

HTML5 audio load and play won't work on the iPad

1 Answers