playing html5 <audio> tag from javascript in iOS chrome

Question

Update The problem turned out to be a Google Drive issue. For some reason files on mobile browsers need to be set to fully public in order to be used while files on desktop browsers can be played with "anyone who has the link". The lack of decent error reporting made this tough to track down.

Problem: clicking on a button to play an html5 tag works perfectly on all desktop browsers but not on mobile-chrome or mobile-safari under iOS. (haven't tested on android).

This example works perfectly on all desktop browsers I've tested on, but not iOS Chrome or iOS safari. I can't figure out why. I've written out the div here but I'm creating it programmatically as there can be a few of them. For testing I used what's presented below.

The DIV: ( 'myfileidgoeshere' below is the actual id removed here.. )

 <div id="user0">
 <div><img src="icon.png" class="icon">Title</div>
 <div class="buttons">
    <div><audio id="player_user0">
        <source id="src_user0" src="https://googledrive.com/host/myfileidgoeshere" type="audio/mp3"></audio>
        </div>
        <button type="button" class="btn" onclick="playUserAudio2(this)">
 <span class="glyphicon glyphicon-play white play"></span></button>
 </div></div>

The play function: (since i'm programmatically writing the above div I have to get the variables.

 function playUserAudio2(target) { 
  var id = $(target).parent().parent().closest('div').attr('id');
  var link = $('#src_'+id).attr('src');
  var myAudio=document.getElementById('player_'+id); 

     //some graphical tweaks to show/hide play pause button
     var toggle = $(target).find('span.play');
     if(toggle.hasClass('glyphicon-play')){

         active = $(target).parent().addClass('glow');
         toggle.removeClass('glyphicon-play');
         toggle.addClass('glyphicon-stop');

           myAudio.play();

             $('#player_'+id).on("ended", function(){
                    toggle.removeClass('glyphicon-stop');
                    toggle.addClass('glyphicon-play');
                      })

     }else{

         toggle.removeClass('glyphicon-stop');
         toggle.addClass('glyphicon-play');

         myAudio.pause();
         myAudio.currentTime=0.0; //pause and reset the time to stop.
      }

}

Answer 1

The problem turned out to be a Google Drive issue. For some reason files on mobile browsers need to be set to fully public on Google Drive in order to be used while files on desktop browsers can be played with "anyone who has the link". The lack of decent error reporting on mobile made this tough to track down.