質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.53%
Web Audio

Web Audioは、音声を処理・合成するためのWebアプリケーション向けJavaScript APIです。HTML5から導入されました。オーディオソースの選択、エフェクト・ビジュアライゼーションの追加、パンニングなど特殊効果の適用など多くの機能を持ちます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

7121閲覧

HTML Audio Autoplay で自動再生できません。

yamatera

総合スコア13

Web Audio

Web Audioは、音声を処理・合成するためのWebアプリケーション向けJavaScript APIです。HTML5から導入されました。オーディオソースの選択、エフェクト・ビジュアライゼーションの追加、パンニングなど特殊効果の適用など多くの機能を持ちます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2020/05/27 06:16

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>

原因と対処方法を、ご教授ねがいます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi_takatsuk

2020/05/27 06:47

通常は、audio要素で再生するものですが、 audio要素は試しましたか?
yamatera

2020/05/27 08:20

Safari, Chromeの自動再生ポリシー変更により 直接<audio>では自動再生されないとの 情報に基づき <iframe・・・・ でのこころみとなっています。 もちろん <audio autoplay ・・・・ では実験しましたが自動再生はされません。 情報源 https://qiita.com/ktknest/items/e81b3a4caac540098fc8
miyabi_takatsuk

2020/05/27 08:25

情報は3年前と古いので、今は変わっているかもしれません。 ただ、試してダメだった、となると・・・。 (逆に最新では、iframeでも禁止になった可能性もある) JavaScriptにて、ファイルロード後に、再生を実行する、といったことは試されましたか??
yamatera

2020/05/27 09:10

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をいただけると 幸いです。
miyabi_takatsuk

2020/05/27 13:20

そのソースコードは、質問本文に記載をお願いします。 ```html ここにソースコード ``` の形式でお願いします。 また、もう一点質問です。 Webサーバーでの実行でしょうか、 ローカルでのHTMLファイルの実行(ブラウザでファイルを直接表示) でしょうか? もしかしたら、ローカルだと、ファイルのアクセス権限の関係でだめかもしれません。
yamatera

2020/05/27 15:06

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 もでません。
yamatera

2020/05/27 15:10

原因追及や修正の 方法にはこだわらないので なにか Autoplayが機能している 実例はありませんでしょうか?
miyabi_takatsuk

2020/05/27 17:03

なるほど・・・。 わかりました、私も調査していきます。 初発で、自動再生は、やっぱできない可能性はありますが・・・、 ユーザーのあるアクションを挟めば、確実に再生されはするのですが・・・。 何かそこらへんにヒントがありそうな気はしてます。
guest

回答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
miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yamatera

2020/05/28 01:18

「Webポリシーに反するため」と言う情報は この teratail 質問を掲載する前から 認識していました。 また <iframe> で画像非表示のまま 音声だけ再生するとの記事も事前に 入手はしていたのですが youtubeをはじめとして、多くのHomePageには、 なんらButtonなどをクリックせずとも 自動的に音声再生(含む動画etc.)されるものが 現在でも多々存在しているので この質問となったのです。 youtubeなどの画面のSourceを Chromeのデベロッパーtoolで 解析しようとしているのですが 膨大なJavaScriptの塊で JavaScriptどしろうとの わたくしでは、とても理解できません。 そこで、なにか簡単な事例などが 入手できないかなと期待して teratailに質問登録いたしました。 泣き寝入りしたくないので・・・・・ 事例 https://www.youtube.com/watch?v=OpeF4eFGDEA
miyabi_takatsuk

2020/05/28 01:25 編集

動画と音楽では、違いがあります。 動画であれば何かしら方法があるのかもしれません。 また、youtubeはGoogleの傘下なので、何か特別な許可を得られている可能性もあります。
miyabi_takatsuk

2020/05/28 01:26 編集

では、逆に、その、 "多くのHomePage"の事例を提示してください。 YouTubeは上記の理由から参考にはなりません。 今回は、音楽、とのことなので、動画サイトもあまり参考にはならないでしょう。
miyabi_takatsuk

2020/05/28 01:33

youtubeがなぜ現代でも自動再生できているかなんとなくわかりました。 回答修正しますね。
yamatera

2020/05/28 02:35

素早い、返信対応ありがとうございます。 やはり一人では、調べようとしても 調査の視点発想には限界があると感じております。 他の人から言われてみて初めてその観点でも 調査してみようとの動機となります。 「YouTubeは上記の理由から参考にはなりません。」 動画ではありますが、GYAO のPageでも 自動的に、なにもクリックせずとも 本編や広告などの音声動画再生されます。 事例 https://gyao.yahoo.co.jp/p/01070/v00626/ 別途 動画ではなく MP3 だけの Page を さがしてみます。 SPAに関しては、自分でも勉強してみますが なにぶん JavaScript をはじめとして ほとんどの Code は Sample を コピペして使用 している 似非Programmerです。 その構造や作動原理をまったく理解していないし 多分説明を受けても理解もできないと思いますので、 厳密な説明や解析でなくとも 簡単な実例(code)を提示していただければ 幸いです。
miyabi_takatsuk

2020/05/28 02:42

動画ならば何かしろ方法があるかもしれません。 音楽がついた動画、としてでならば何かしろやりようがあるかもしれません。 SPAは、多くは統合的な枠組み(フレームワーク)での実装になりますので、 簡単に数行のコードで行えるものではないので、 質問の回答で記載できるレベルのものではありません。 (作業依頼になる。お金をもらわないとできないようなレベル) Angularや、React.jsなどを勉強し使ってみた方がいいかと。 SPAを実装するフレームワークの代表格です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.53%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問