Q&A
通常は、audio要素で再生するものですが、
audio要素は試しましたか？
HTMLで作成したPageで、音声Fileが
自動再生できません。
環境
Windows 10 pro 1903
Google Chromeme 81.0.4044.138
問題となるHTMLの記述
・
<iframe src="StarWars.mp3" allow="autoplay"
style="display:none" id="audio">
</iframe>
・
原因と対処方法を、ご教授ねがいます。
Safari, Chromeの自動再生ポリシー変更により
直接<audio>では自動再生されないとの
情報に基づき
<iframe・・・・
でのこころみとなっています。
もちろん
<audio autoplay ・・・・
では実験しましたが自動再生はされません。
情報源
https://qiita.com/ktknest/items/e81b3a4caac540098fc8
情報は3年前と古いので、今は変わっているかもしれません。
ただ、試してダメだった、となると・・・。
（逆に最新では、iframeでも禁止になった可能性もある）
JavaScriptにて、ファイルロード後に、再生を実行する、といったことは試されましたか？？
JavaScriptは、まったく書いたことがなかったので
当該資料から引用してTestしてみましたが
自動再生されません。
ただし、JavaScriptが無効なのか
私の書いたものが、まちがいなのか
自分では判断できません。
**** 以下 実験したCode ***
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>sample</title>
</head>
<body>
** Autoply Test **
<br>
<br>
<script language="javascript" type="text/javascript">
var music = new Audio();
function init()
{
music.preload = "auto";
music.src = "StarWars.mp3";
music.load();
music.play();
}
init();
</script>
<br>
</body>
</html>
************************
Autoplayが可能な
Sampleをいただけると
幸いです。
そのソースコードは、質問本文に記載をお願いします。
```html
ここにソースコード
```
の形式でお願いします。
また、もう一点質問です。
Webサーバーでの実行でしょうか、
ローカルでのHTMLファイルの実行（ブラウザでファイルを直接表示）
でしょうか？
もしかしたら、ローカルだと、ファイルのアクセス権限の関係でだめかもしれません。
1. Localに作成したものを直接ブラウザーにかけて表示。
2. Localに作成したものを、XAMPP(Apache)経由で表示。
3. 別PCに作成したものをRemote(Network経由)で表示。
a.<iframe>
b.<audio>
c.<JavaScript>
の組み合わせ(9通り)いずれも機能しません。
** Autoply Test ** は、いずれの場合も
表示されますので access には問題ないと
考えられます。
また、音声File(StarWars.mp) not found などの
Error Message もでません。
原因追及や修正の
方法にはこだわらないので
なにか Autoplayが機能している
実例はありませんでしょうか?
なるほど・・・。
わかりました、私も調査していきます。
初発で、自動再生は、やっぱできない可能性はありますが・・・、
ユーザーのあるアクションを挟めば、確実に再生されはするのですが・・・。
何かそこらへんにヒントがありそうな気はしてます。
回答1件
0
結論を申し上げます。
ページロード時の、オーディオの自動再生は、
現状では不可能になります。
不可能な理由
Webポリシーに反するため
メディアおよびウェブオーディオ API の自動再生ガイド - Web メディア技術 | MDN
自動再生と自動再生のブロック
用語「自動再生（autoplay）」は、ユーザーが再生の開始を明確に要求しなくても音声の再生を開始させる機能を意味します。 これには、メディアの自動再生のための HTML 属性の使用と、ユーザー入力を処理するコンテキストの外で再生を開始するための JavaScript コードのユーザーの両方が含まれます。
ユーザーの観点からは、警告なしに自発的にノイズを発し始めるウェブページまたはアプリは、耳障り、不便、または気まずいものになる可能性があります。 そのため、ブラウザーでは通常、特定の状況下でのみ自動再生が正常に行われるようにすることしかできません。
とある通りです。
Chromeなどのモダンブラウザは、これに準拠していると思われるため、
あらゆる自動再生をブロックします。
調査したところ、一年少々以前にあった、無音音楽ファイルをiframe要素にて先に再生させることによって制限解除するという荒技も、現在のブラウザではブロックされております。
つまり、ユーザーのなにかしろのアクションがなければ（要素のクリック、オンマウス、ユーザーの行動から成り立つ処理、など）を介さないと、再生ができません。
要素にクリックイベントを付与し、その要素の自動クリックの際もブロックされます。
だからといって、body要素のオンマウスで再生しようとしても、それもブロックされております。
こればかりは、もう、泣き寝入りして、ユーザーに何かをクリックしてもらうかなんかするしかありません。
SPA（シングルページアプリケーション）を使えばなんとかなるかもしれない
では、なぜYouTubeを始めとする、多くの動画サイトが自動再生を現代でも可能としているか。
ソースを細かく見てみましたが、
独自フレームワークによる、SPAで実装している可能性があります。
SPAがなんなのかは、説明すると長くなるので割愛しますが、
簡単に言うと、そのページに止まりながら、複数ページへ遷移している、ように見せるものです。
（実際に多くのフレームワークは閲覧履歴をJSによって挟んだりしている）
つまり、動画のサムネイルをクリックしてページ遷移しているように見えるだけで、
中のDOMをコントロールしているだけで、根本的にはページ遷移はしていないので、
ユーザーのクリック動作を挟んでいると認識させ、自動再生を実現している可能性があります。
逆を返せば、通常の遷移で、HTML要素のみで自動再生を行うのは、やはり不可能でしょう。
投稿2020/05/27 18:31
編集2020/05/28 01:41総合スコア9555
「Webポリシーに反するため」と言う情報は
この teratail 質問を掲載する前から
認識していました。
また <iframe> で画像非表示のまま
音声だけ再生するとの記事も事前に
入手はしていたのですが
youtubeをはじめとして、多くのHomePageには、
なんらButtonなどをクリックせずとも
自動的に音声再生(含む動画etc.)されるものが
現在でも多々存在しているので
この質問となったのです。
youtubeなどの画面のSourceを
Chromeのデベロッパーtoolで
解析しようとしているのですが
膨大なJavaScriptの塊で
JavaScriptどしろうとの
わたくしでは、とても理解できません。
そこで、なにか簡単な事例などが
入手できないかなと期待して
teratailに質問登録いたしました。
泣き寝入りしたくないので・・・・・
事例
https://www.youtube.com/watch?v=OpeF4eFGDEA
動画と音楽では、違いがあります。
動画であれば何かしら方法があるのかもしれません。
また、youtubeはGoogleの傘下なので、何か特別な許可を得られている可能性もあります。
では、逆に、その、
"多くのHomePage"の事例を提示してください。
YouTubeは上記の理由から参考にはなりません。
今回は、音楽、とのことなので、動画サイトもあまり参考にはならないでしょう。
youtubeがなぜ現代でも自動再生できているかなんとなくわかりました。
回答修正しますね。
素早い、返信対応ありがとうございます。
やはり一人では、調べようとしても
調査の視点発想には限界があると感じております。
他の人から言われてみて初めてその観点でも
調査してみようとの動機となります。
「YouTubeは上記の理由から参考にはなりません。」
動画ではありますが、GYAO のPageでも
自動的に、なにもクリックせずとも
本編や広告などの音声動画再生されます。
事例
https://gyao.yahoo.co.jp/p/01070/v00626/
別途 動画ではなく MP3 だけの Page を さがしてみます。
SPAに関しては、自分でも勉強してみますが
なにぶん JavaScript をはじめとして
ほとんどの Code は Sample を コピペして使用
している 似非Programmerです。
その構造や作動原理をまったく理解していないし
多分説明を受けても理解もできないと思いますので、
厳密な説明や解析でなくとも
簡単な実例(code)を提示していただければ
幸いです。
動画ならば何かしろ方法があるかもしれません。
音楽がついた動画、としてでならば何かしろやりようがあるかもしれません。
SPAは、多くは統合的な枠組み（フレームワーク）での実装になりますので、
簡単に数行のコードで行えるものではないので、
質問の回答で記載できるレベルのものではありません。
（作業依頼になる。お金をもらわないとできないようなレベル）
Angularや、React.jsなどを勉強し使ってみた方がいいかと。
SPAを実装するフレームワークの代表格です。
あなたの回答
tips
プレビュー
