html5のaudioタグは、端末によっては結構やばい仕様があります。iOSではミュートにしてても音が出てしまうらしく、確認してみました。
目次
audioタグって何
スマホの普及もそうですが、html5もけっこう一般的になってきましたねー。
まだまだ決まっていない要素もあり、不安定な部分もあるんですが、まあ基本的には問題なく使用できますね。
今回はそんなhtml5の中にある、audioタグっていうものがあります。
PCだとモダンブラウザであればほぼ使えますし、スマホのサイトであれば、だいたい行けるかと思います。
audioタグの落とし穴
こっからが本題です。
iOSではミュートにしてても音が出る
エントリーのタイトル通りなんですが、iOSでは本体のミュート機能をONにしてても、audioタグで再生した場合は音がでます。
※ミュートではなく、音量を0にしていた場合は音はでません。
恐ろしいです。
JSで書くと↓のような感じ。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
var audio = new Audio("hoge.mp3");
window.onload = function(){
audio.load();
audio.play();
audio.loop = true;
}
</script>
</head>
<body>
<p>再生</p>
<p>停止</p></body>
</html>
仕組みはすごい簡単です。
javasript側でaudioタグを作成し、ページが読み込まれたタイミングでプレイします。
htmlには「再生」と「停止」のボタンはあるのですが、効きません。
ページを閉じない限り、延々と音が流れつづけます。
さあ、お分かりでしょうか。
もし、再生する音が「AVのプレイシーンの声」だったら…
もし、再生した場所が満員電車の中だったら…
きっと冷静にページを閉じることができる人はそんなにいないでしょう。
停止ボタンを押す
↓
止まらない
↓
更新する
↓
また喘ぎ声する
↓
めっちゃ焦る
↓
周りからの視線がやばい
↓
ツイートされる
この仕様、本当に危険です。
※よい子はマネしないでね
