chrome、safari、firefoxはすべて、あるバージョンの後にオーディオの自動再生を制限しています：play() failed because the user didn't interact with the document first
クローム自動再生ポリシーの変更
in order to improve the user experience, minimize incentives to install ad blockers, and reduce data consumption on expensive and/or constrained networks
広告ノイズがユーザーに与える影響を軽減し、トラフィックを節約することです。
解決方法
- クロームで、次のように入力します: chrome://flags, "Autoplay policy "を検索してください、デフォルトは "Default "です、"No user gesture is required "に変更してください。ただし、これは1つのクライアントに対してのみローカルで設定することができ、最終的な解決策ではありません。
- 手動で再生を呼び出し、コールバックで再生が成功したかどうかを判断し、再生が失敗した場合は、$message.warning('お使いのブラウザは再生を制限しています。再生をクリックしてください')のように、再生ボタンをクリックするよう明示的に促すか、再生ボタンを表示してこのボタンをクリックするよう誘導します。
var promise = document.querySelector('audio').play();
if (promise !== undefined) {
promise.then(_ => {
// Autoplay started!
}).catch(error => {
// Autoplay was prevented.
// Show a "Play" button so that user can start playback.
});
}
AudioContext
ネット上ではAudioContextを使えば自動再生ができると言われていますが、これは不可能です：
The Web Audio API will be included in the Chrome autoplay policy with M71 (December 2018).
AudioContextは2018/12から自動再生が禁止されました。
Chrome autoplay policyなぜこのようなことを言う人がいるかというと、2018年4月からchromeに実装されましたが、その時点ではAudioContextはまだプロトコルを実装しておらず、audioタグだけが実装していたからです
iframe
公式サイトには別の声明があります。
<!-- Autoplay is allowed. -->
<iframe src="https://cross-.com/.html" allow="autoplay">
<!-- Autoplay and Fullscreen are allowed. -->
<iframe src="https://cross-.com/.html" allow="autoplay; fullscreen">
試したところ、やはりiframe内の音声は無効で、自動再生や呼び出し再生方式を設定しても、トップページで直接対応する設定や操作をしても現象は同じでした。
ios
$(document).on('JSBridgeReady',()=>{
if(player.tag)
{
player.tag.play();
}
});
video
video 要素がミュートされている場合は自動的に再生できますが、chrome によると、後続の実装では必ずしも保証されません。そのため、動画を再生できるかどうかを判断し、再生できない場合は
window.open
試した結果、クロームには裏技があり、window.openで開いた同じドメイン名のウェブページは自動再生できるのですが、このウェブページは更新しても自動再生できないことがわかりました；
他のブラウザではテストされていません
この点を利用することができるかもしれない、シナリオの私の使用は、システムのクリックで電話をダイヤルするには、Bシステムを開き、自動的に電話をダイヤルされ、この状況を利用するために使用することができますこのドア、ウィンドウを開くことができますソフト電話のBシステムを開いた後、ページと対話することなく、音声の反対側の後に直接聞くことができます！
クロームの実装のバグかどうかはわからないので、この方法は議論の余地があります。
