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, Sep 14 '12 at 08:03
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, Sep 15 '12 at 16:05
So, this uploadsongsfolder where is this folder present is this a weburi or some folder present in the server? — karthick, Sep 16 '12 at 06:35
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, Jan 26 '15 at 17:33

score 0 · Answer 1 · answered Dec 21 '16 at 08:43

0

Try this :

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

function mobileReady(){

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

}

answered Dec 21 '16 at 08:43

Nikola Lukic

4,001
6
44
75

1

I tried this because it felt right, but in the end it made no difference. – Alexandre Mazel Jan 10 '23 at 13:18
1

@AlexandreMazel Try this one , this must work but with `click anywhere` for anywhat. https://stackoverflow.com/questions/32378805/mp4-video-in-html5-video-tag-not-playing-in-mobile-chrome-and-mobile-safari/42268108#42268108 Also it depens on ios version... – Nikola Lukic Jan 10 '23 at 14:16
I works! Even if a bit limited for some use. Thanks a lot. – Alexandre Mazel Jan 19 '23 at 08:24

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

1 Answers1