更新 问题原来是 Google Drive 问题。由于某种原因，移动浏览器上的文件需要设置为完全公开才能使用，而桌面浏览器上的文件可以与“知道链接的任何人”播放。缺乏像样的错误报告使得追踪变得困难。

问题: 单击按钮播放 html5 标签可以在所有桌面浏览器上完美运行，但不能在 iOS 下的 mobile-chrome 或 mobile-safari 上运行。 (尚未在 Android 上测试)。

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

DIV:(下面的“myfileidgoeshere”是此处删除的实际 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> 

播放函数:(因为我以编程方式编写上面的 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. 
      } 

}

请您参考如下方法:

问题原来是 Google 云端硬盘问题。由于某些原因，移动浏览器上的文件需要在 Google Drive 上设置为完全公开才能使用，而桌面浏览器上的文件可以与“知道链接的任何人”播放。移动设备上缺乏像样的错误报告使得追踪变得困难。