更新 問題がGoogleドライブの問題であることが判明しました。何らかの理由で、モバイルブラウザ上のファイルは、デスクトップブラウザ上のファイルを「リンクを持つ人」と再生できるようにするには、完全公開に設定する必要があります。まともなエラー報告の欠如は、これを追跡するのを難しくしました。iOS Chromeのjavascriptからhtml5 <audio>タグを再生
問題: タグは、すべてのデスクトップブラウザ上ではなく、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.
}
を}
[this](http://stackoverflow.com/questions/32945273/how-to-autoplay-html5-video-and-audio-tags-on-ios)の重複はありますか? –
いいえ、私は自動再生しようとしていません。 – dijon