正在播放html5 在iOS中的JavaScript标记镀铬

Question

更新 问题原来是Google Drive问题。出于某种原因，移动浏览器上的文件需要设置为完全公开才能使用，而桌面浏览器上的文件可以与“有链接的任何人”一起播放。由于缺乏体面的错误报告，这难以追查。正在播放html5 <audio>在iOS中的JavaScript标记镀铬

问题： 点击一个按钮来播放HTML5的标签完美的作品在所有桌面浏览器而不是在iOS下的移动浏览器或移动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. 
     } 

}

Answer 1

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