web-dev-qa-db-ja.com

iPhoneのサファリで.play()オーディオファイルをJavaScriptできないのはなぜですか?

次のように定期的に音声を再生するJavaScript Webアプリが動作しています。

var SOUND_SUCCESS = new Audio('success.mp3');
SOUND_SUCCESS.play();

これはデスクトップブラウザー(EdgeとChromeでテスト済み)でうまく機能しますが、iPhoneのSafariでは再生されません。

Stack Overflowを見回したところ、数年前から、フルスクリーンプレーヤーを使用しない限りSafariからオーディオを再生することはできないという回答がありました。これはまだ事実ですか?

22
Leon Overweel

iOは自動再生を無効にし、代わりにユーザーインタラクションの一部として再生を開始する必要があります(たとえば、タッチスタートリスナー内で再生を開始できます)。 Appleの開発者向けドキュメント には、これに関するドキュメントが少しあります。この記事もあります iOS HTML5オーディオの制限を克服する IBMの開発者サイトには例と詳細があります。

24
Ed Ballot

モバイルのIOSは、デフォルトで自動サウンド再生を無効にします。この問題を回避するには。ユーザーがボタンスイッチをクリックした場合、ページのどこかにスイッチボタンを有効/無効にし、オーディオ要素( "audioElement")を使用してサウンドを再生できます。

その後、同じ「audioElement」を使用して、「src」属性を変更し、「play()ユーザーの操作なしでメソッドを使用できます。

2
xingliang cai

Xingliang caiの応答に追加するために、私のために働くようになったコードサンプルを次に示します。

const soundEffect = new Audio();

// onClick of first interaction on page before I need the sounds
soundEffect.play();

// later on when you actually want to play a sound at any point without user interaction
soundEffect.src = 'path/to/file.mp3';
soundEffect.play();
0
user2415116