iPadのSafariでオーディオファイルを自動再生しようとしています。MacでSafariを使用してページにアクセスしても問題ありません。iPadでは、自動再生は機能しません。
iPadのSafariでオーディオファイルを自動再生しようとしています。MacでSafariを使用してページにアクセスしても問題ありません。iPadでは、自動再生は機能しません。
回答:
更新：これはハックであり、IOS 4.X以降では動作しません。これはIOS 3.2.Xで動作しました。
それは真実ではない。Appleは、モバイルネットワークで使用できるトラフィックの量が多いため、iPadでビデオとオーディオを自動再生したくありません。オンラインコンテンツには自動再生を使用しません。オフラインHTMLサイトの場合、これは優れた機能であり、これを使用してきました。
これは「JavaScriptの偽のクリック」ソリューションです：http : //www.roblaplaca.com/examples/html5AutoPlay/
サイトからコードをコピーして貼り付けます：
<script type="text/javascript">
function fakeClick(fn) {
var $a = $('<a href="#" id="fakeClick"></a>');
$a.bind("click", function(e) {
e.preventDefault();
fn();
});
$("body").append($a);
var evt,
el = $("#fakeClick").get(0);
if (document.createEvent) {
evt = document.createEvent("MouseEvents");
if (evt.initMouseEvent) {
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
el.dispatchEvent(evt);
}
}
$(el).remove();
}
$(function() {
var video = $("#someVideo").get(0);
fakeClick(function() {
video.play();
});
});
</script> これは私の情報源ではありません。私はこれを少し前に見つけて、iOS 3.2.XでIPadとiPhoneのコードをテストしました。
また、これができないのは、Appleが行ったビジネス上の決定であり、技術的な決定ではないことも強調しておきます。つまり、AppleがiPod Touch上のWebアプリからのサウンドを無効にする合理的な技術的根拠はありませんでした。これはWiFiデバイスのみであり、高額な帯域幅の料金が発生する可能性のある電話ではないため、そのデバイスに対する議論のメリットはありません。彼らはWiFiネットワーク管理を手助けしていると言うかもしれませんが、私のWiFiネットワークの帯域幅に関する問題はAppleの問題ではなく、私の問題です。
また、彼らが本当に気にかけているのが不要で過剰な帯域幅の消費を防ぐことだった場合、ユーザーがWebアプリのサウンドをオプトインできるようにする設定を提供します。また、Webサイトが同等の帯域幅を他の方法で消費するのを制限するために何かをします。しかし、そのような制限はありません。Webサイトはバックグラウンドで巨大なファイルを何度もダウンロードする可能性があり、Appleはそれについてあまり気にしませんでした。そして最後に、サウンドはとにかくダウンロードできると思うので、帯域幅は実際には保存されません！Appleは、ユーザーの操作なしで自動的にプレイすることを許可しないため、ゲームで使用できなくなります。
Appleは、HTML5アプリがネイティブアプリと同等かそれ以上ではないことに気づき始めたため、サウンドをブロックしました。Webアプリでサウンドを使いたい場合は、MicrosoftのようにAppleに対抗しないように働きかける必要があります。ここで修正できる技術的な問題はありません。
Appleは、さまざまなビジネス上の理由により、iOSデバイスの多くのHTML5 Web標準をうっとうしく拒否しています。最終的に、タッチイベントの前にサウンドファイルをプリロードしたり自動再生したりすることはできません。一度に1つのサウンドしか再生せず、Ogg / Vorbisをサポートしていません。ただし、オーディオをもう少し制御できるようにするための気の利いた回避策が1つ見つかりました。
<audio id="soundHandle" style="display:none;"></audio>
<script type="text/javascript">
var soundHandle = document.getElementById('soundHandle');
$(document).ready(function() {
addEventListener('touchstart', function (e) {
soundHandle.src = 'audio.mp3';
soundHandle.loop = true;
soundHandle.play();
soundHandle.pause();
});
});
</script>基本的に、最初のタッチイベントでオーディオファイルの再生を開始し、すぐに一時停止します。これで、JavaScript全体でsoundHandle.play（）コマンドとsoundHandle.pause（）コマンドを使用して、タッチイベントなしでオーディオを制御できます。完璧にタイミングを合わせることができる場合は、サウンドが終わった直後にポーズを入れてください。その後、もう一度再生すると、最初に戻ります。これはAppleがここで行ったすべての混乱を解決するわけではありませんが、それは1つの解決策です。
iOS 4.2.1以降では、偽のクリックも.load（）トリックもiOSデバイスでオーディオを自動再生するようには機能しません。私が知っている唯一のオプションは、ユーザーが実際にクリックアクションを実行し、.play（）呼び出しを非同期（ajax、setTimeoutなど）でラップせずにクリックイベントハンドラーで再生を開始することです。
誰かが間違っていると誰か教えてください。私は最新のアップデートの前にiPadとiPhoneの両方に抜け穴があり、それらはすべて閉じられているように見えます。
<video>4.2.1で、私は長いほどいることを確認した.load()後、.play()内に入る同期クリック/タップハンドラ、それが動作します。それ以外の場合は失敗します。
オーディオが説明どおりに機能していないことを確認しました（少なくとも4.3.5を実行しているiPadでは）。特定の問題は、非同期メソッド（ajax、タイマーイベントなど）でオーディオが読み込まれないことですが、プリロードされている場合は再生されます。問題は、ロードはユーザーがトリガーしたイベントでなければならないことです。したがって、ユーザーが再生を開始するためのボタンを使用できる場合は、次のようなことができます。
function initSounds() {
window.sounds = new Object();
var sound = new Audio('assets/sounds/clap.mp3');
sound.load();
window.sounds['clap.mp3'] = sound;
}次に、それを再生するために、たとえばajaxリクエストで、あなたは行うことができます
function doSomething() {
$.post('testReply.php',function(data){
window.sounds['clap.mp3'].play();
});
}最善の解決策ではありませんが、特に原因がユーザートリガーではないイベントのロード機能であることを理解することは役立つ場合があります。
編集：Appleの説明を見つけました、そしてそれはiOS 4+に影響します：http : //developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
オーディオタグまたはビデオタグの.play（）メソッドの前に.load（）メソッドを呼び出してみてください...それぞれHTMLAudioElementまたはHTMLVideoElementになります。それが私にとってiPadで動作する唯一の方法でした！
この質問への答えは（少なくとも今は）Safari HTML5ドキュメントに明確に文書化されているようですです：
セルラーネットワークを介したダウンロードのユーザーコントロール
iOS上のSafari（iPadを含むすべてのデバイス）で、ユーザーがセルラーネットワーク上にあり、データユニットごとに課金される場合、プリロードと自動再生は無効になります。ユーザーが開始するまで、データは読み込まれません。つまり、ユーザーのアクションによってplay（）またはload（）メソッドがトリガーされない限り、ユーザーが再生を開始するまで、JavaScriptのplay（）およびload（）メソッドも非アクティブになります。つまり、ユーザーが開始した再生ボタンは機能しますが、onLoad = "play（）"イベントは機能しません。
これは映画を再生します： <input type="button" value="Play" onClick="document.myMovie.play()">
これはiOSでは何もしません： <body onLoad="document.myMovie.play()">
iOS4.2（開発ビルド）で簡単なプロトタイプWebアプリを開発している間、これに戸惑いました。解決策は実際には非常に簡単です。HTMLページにタグが既にあるように見えないことに注意してください。実際には、タグを動的にドキュメントに挿入する必要があります（この例では、追加のJavascriptの煩わしさのためにプロトタイプ1.7を使用しています）。
this.soundFile = new Element("audio", {id: "audio-1", src: "audio-1.mp3", controls: ""});
document.body.appendChild(this.soundFile);
this.soundFile.load();
this.soundFile.play();コントローラーを設定していないため、CSSを使用して非表示にしたり、画面外に配置したりする必要はありません。
これは完全に動作するようです。
Appleはこの規格を完全にはサポートしていませんが、回避策があります。彼らの正当化は、おそらくランダムなオーディオを再生するページに到達するため、セルラーネットワークの混雑です。一貫性を保つために、デバイスがwifiに移行してもこの動作は変わりません。ちなみに、これらのページは通常、とにかく悪い考えです。すべてのWebページにサウンドトラックを配置するべきではありません。それは間違っています。:)
html5オーディオは、ユーザーアクションの結果として開始された場合に再生されます。ページの読み込みはカウントされません。したがって、オールインワンページのアプリになるようにWebアプリを再構築する必要があります。オーディオを再生するページを開くリンクの代わりに、ページを変更せずに現在のページで再生するには、そのリンクが必要です。この「ユーザー操作」ルールは、オーディオまたはビデオ要素で呼び出すことができるhtml5メソッドに適用されます。呼び出しは、ページの読み込み時に自動的に発生した場合は何の影響もなく戻りますが、イベントハンドラーから呼び出されたときに機能します。
以下を使用してAudio要素を作成する場合：
var a = new Audio("my_audio_file.wav");そして、以下をsuspend介してイベントリスナーを追加します：
a.addEventListener("suspend", function () {console.log('suspended')}, false);次に、ファイルをモバイルSafari（iPadまたはiPhone）にロードすると、開発者コンソールに「一時停止」が記録されます。HTML5仕様によると、これは「ユーザーエージェントは現在意図的にメディアデータをフェッチしていないが、メディアリソース全体がダウンロードされていない」ことを意味します。
後続のa.load（）を呼び出して「canplay」イベントをテストし、次にa.play（）を使用することは、サウンドを自動的にトリガーするのに適した方法のようです。
これを処理するために、自動再生でHTMLオーディオ要素をトリガーしてbody要素にオーディオをトリガーできるすべてのイベントのイベントハンドラーを1回再生するようにアタッチしました。
var mobile = /iPad|iPhone|iPod|android/.test(navigator.userAgent) && !window.MSStream;
if (mobile) {
$('body').on('touchstart click doubleclick keydown', function() {
$("audio[autoplay='autoplay']").each(
function(){
this.play();
this.removeAttribute('autoplay');
});
});
}これはうまくいくようです：
<html>
<title>
iPad Sound Test - Auto Play
</title>
</head>
<body>
<audio id="audio" src="mp3test.mp3" controls="controls" loop="loop">
</audio>
<script type="text/javascript">
window.onload = function() {
var audioPlayer = document.getElementById("audio");
audioPlayer.load();
audioPlayer.play();
};
</script>
</body>
</html>実際の動作をここで確認してください：http : //www.johncoles.co.uk/ipad/test/1.html（アーカイブ済み）
iOS 4.2以降、これは機能しなくなりました。ごめんなさい。