iOS Chromeのjavascriptからhtml5 <audio>タグを再生

Question

更新 問題がGoogleドライブの問題であることが判明しました。何らかの理由で、モバイルブラウザ上のファイルは、デスクトップブラウザ上のファイルを「リンクを持つ人」と再生できるようにするには、完全公開に設定する必要があります。まともなエラー報告の欠如は、これを追跡するのを難しくしました。

問題： タグは、すべてのデスクトップブラウザ上ではなく、iOSの下に携帯クロムまたはモバイルサファリで完璧に動作するHTML5を再生するには、ボタンをクリックします。 （アンドロイドでテストしていない）。

この例は、テストしたすべてのデスクトップブラウザで動作しますが、iOS ChromeやiOSのサファリでは動作しません。なぜ私は理解できません。私はここに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ドライブの問題であることが判明しました。何らかの理由で、モバイルブラウザのファイルをGoogleドライブに完全公開する必要があり、デスクトップブラウザのファイルを「リンクを知っている誰でも」再生できるようにする必要があります。モバイルに関する適切なエラー報告の欠如は、これを追跡するのを困難にしました。