0

更新 問題は Google ドライブの問題であることが判明しました。何らかの理由で、モバイル ブラウザのファイルを使用するには、完全に公開に設定する必要がありますが、デスクトップ ブラウザのファイルは「リンクを知っている人なら誰でも」再生できます。適切なエラー報告がないため、これを追跡するのは困難でした。

問題: ボタンをクリックして html5 タグを再生すると、すべてのデスクトップ ブラウザーで完全に機能しますが、iOS の mobile-chrome または mobile-safari では機能しません。（アンドロイドではテストしていません）。

この例は、私がテストしたすべてのデスクトップ ブラウザーで完全に機能しますが、iOS Chrome や iOS サファリでは機能しません。理由がわかりません。ここに div を書きましたが、いくつかある可能性があるため、プログラムで作成しています。テストのために、以下に示すものを使用しました。

DIV: (以下の 'my​​fileidgoeshere' は、ここで削除された実際の 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.
      }

}

4

1 に答える 1