移动狩猎-玩html5<音频>标签

更新这个问题原来是谷歌硬盘的问题。出于某种原因，移动浏览器上的文件需要设置为完全公开才能使用，而桌面浏览器上的档案可以与"任何有链接的人"一起播放。由于缺乏像样的错误报告，很难追踪到这一点。

问题：点击按钮播放html5标签在所有桌面浏览器上都能完美运行，但在iOS下的移动chrome或移动safari上则不然。(尚未在android上测试(。

这个例子适用于我测试过的所有桌面浏览器，但不适用于iOS Chrome或iOS safari。我不明白为什么。我已经在这里编写了div，但我正在以编程方式创建它，因为可能有几个div。为了进行测试，我使用了以下内容。

DIV:(下面的'myfileidgehere'是此处删除的实际id。(

 <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>

play函数：(由于我正在以编程方式编写上面的div，所以我必须获取变量。

 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.
      }

}