ChromeでのBGM再生

ブラウザ上で、HTMLタグとJavaScriptを使ってmp3を再生しようとしています。
PC版Firefoxではmp3が再生されるようですが、
Chrome, Safari, スマホ版Firefoxで流れないようです。
HTMLタグ自体は、過去のものを使い回してるのですが
別コンテンツでは正しく動作していたため、詰んでいます。
思い当たることはありますでしょうか。

HTML
1<div id="nanikore"></div>

JavaScript
1// 何かイベント(onclickなど)
2playmp3("aaaaa");
3
4function playmp3(type)
5{
6  document.getElementById("nanikore").innerHTML='<audio src="../../../mp3/' +type+ '.mp3" autoplay loop style="display:none">';
7}

kyoya0819

2019/12/10 13:08

iPhoneで流れないということですか？

SQLinjection

2019/12/11 01:47

現状、PC(Win10, Mac)ではFirefoxのみ再生可能。スマホ(Android, iPhone)ではFirefoxですら再生不可能でした。

行動規範の内容に同意します

回答2件

ベストアンサー

去年の記事ですが現在も有効なはずです。
結論から言うと、現行バージョンでは詐欺等防止等の観点から音は自動ではならせなくなっています。

投稿2019/12/10 13:11

kyoya0819

総合スコア10429

SQLinjection

2019/12/11 01:48

やはりそうなのですね。 2年ほど前にそういう変更がChromeで入ったのは聞いていましたが、別コンテンツでは、onmouseやonclickのイベントで再生できているので、 onloadで流すことは難しいのでしょうかねぇ。

kyoya0819

2019/12/11 01:49 編集

onloadだとautoplayと同じになってしまうのでおそらくできません。未検証ですが

SQLinjection

2019/12/11 11:33

現状のコンテンツとして、onloadでmp3が再生されているコンテンツもあり、それがスマホFirefox, PC版chromeでいずれも問題ないので、謎で釈然としていませんｗ今回のスクリプトでは、chromeでonloadのmp3再生が実現できているのは、ajaxで呼び出しているページですが。今、何度かmp3で試してみましたがやはりonloadではchromeは無理っぽいです。代替案として、mp4にして再生するのもonloadじゃ同じっぽいですし、 EMBEDタグを使うというのも考えましたが、Chromeだけきちんとonloadできませんね。

SQLinjection

2019/12/11 11:44

気になったので詳しく試してみたところ、現状動いているコンテンツは、 IFRAMEタグで同じHTML内に同オリジンのWebページを、target属性で指定して呼び出しており、 targetで呼び出した先でmp3を再生しているため、プッシュボタンを押した判定がPOSTにせよ「クリック」扱いとしてautoplayを認めているようです。したがって、onclick と同等の扱いをしてAUDIOタグのautoplayが呼び出せているようです。正確には、AUDIOタグのautoplayを走らせるためには、「画面内どこでも良いので1度クリックする」ということが必要なようです。また、onload時に設置されているAUDIOタグは動かず、 1度画面内をクリックしたら、その後onmouseoverなどでもAUDIOを再生できるようです。ややこしいですが、PC版のChromeではこのような仕様になっており、 PC版Firefoxはクリックの必要なしにonload再生が可能なようです。 Safariやスマホ環境ではまだ試していませんが要確認です。

kyoya0819

2019/12/11 11:59

一時期、スマホでサイトを開くと「カシャ」と言う音を鳴らして詐欺を思わせる（実際は撮られていない）等々があるので廃止されたはずです。その他にも理由はあるかもですが

SQLinjection

2019/12/11 12:10

なるほどねぇ～どこかのアダルトサイトでよくありそうなやつですねｗクリックジャッキングとかで音を流すことはできてしまいそうなので、どこまで意味があるのかはなんともって感じですが、 Mozilla, Googleなどがそれなりの意見をお持ちなんでしょう。その論法でいくとmp4も同様と思われますね（未確認

kyoya0819

2019/12/11 12:19

mp4の場合、確かミュートだと自動再生ができたはずです。

SQLinjection

2019/12/12 03:27

YouTubeのチャンネルトップで、紹介ムービーなどをあげてる人が、ロード完了時自動的にムービーplayになるケースがありますね。いきなり曲が鳴り出すのでびっくりするのですが。それを、display:none とかでやれば出来るのでしょうかねぇ。ムービーなので単純にloopが使えるのか謎ですが。また、Web Audio APIを使う方法もあるそうですが、またの機会にw

行動規範の内容に同意します

// 何かイベント(onclickなど) と記載がありますが、クリックイベントを起点に再生させるのでしょうか。
どのような書き方ならOKで、どうならNGなのかまで検証できていないですが、これならどうですか。

html
1<div id="nanikore">
2  <audio src="" loop style="display:none">
3</div>
4<script>
5const audioElm = document.querySelector('#nanikore > audio');
6
7適当な要素.addEventListener('click', () => {
8  const type = 'foo';
9  const src  = `../../../mp3/${type}.mp3`;
10
11  if(audioElm.src !== src) {
12    if(audioElm.paused) {
13      await audioElm.play();
14      audioElm.classList.add('playing');
15      return;
16    }
17    audioElm.pause();
18    audioElm.classList.remove('playing');
19    return;
20  }
21
22  audioElm.src = src;
23  await audioElm.play();
24  audioElm.classList.add('playing');
25});
26</script>