百年の未読HTML5のaudio要素で音楽をループ再生(PC/iOS/Android)2014年8月17日html5から追加されたaudio要素ですが、今まで存在は知っていたものの使ったことはありませんでした。先日、実案件でaudio要素を使う機会を得たので、その際にハマったことなどを少しメモしておきます。・音楽はループで流したいというものでした。audio要素って?audio要素はHTML5から追加された新要素です。HTML5に対応している最新のブラウザならほぼ使えます。IE8では非対応のため、対象ブラウザにIE8が入っている場合は気を付ける必要がありそうです。.wav(WAV)ブラウザごとに対応フォーマットが異なるので、できればいくつかのフォーマットを用意しておくと良いです。(audio)(source)audioタグの書き方シンプルな書き方なら、こんな感じでsrc属性に音楽ファイル名を指定すればOK。src="sound.mp3"></audio>audio要素の中にsource要素を置くことも可能です。その場合は以下のように複数のsource要素を並べることもできます。ブラウザ側では、source要素を上から順番に見て、対応しているフォーマットの音声を再生します。audio要素の直下にはaudio要素に対応していないブラウザ向け(または対応しているフォーマットがなかったとき用)のコンテンツを置くことができます。src="sound.m4a"><p>ご利用のブラウザではこの音声を再生できません。</p></audio>audio要素には様々な属性を設定できます。プリロード、コントロール、自動再生、ループがよく使いそうな属性ではないでしょうか。Webサイト自動でプリロードするpreload属性値にautoを指定します。preload="auto"></audio>コントロール(再生ボタンとか)を表示するcontrols属性を設定します。controls></audio>自動再生を行うautoplay属性を設定します。autoplay></audio>ループ再生を行うloop属性を設定します。・ループという要件を考えると、以下のようなタグを書けばうまく行きそうでした。src="sound.aac"><p>ご利用のブラウザではこの音声を再生できません。</p></audio>実際に、PC向けブラウザではだいたい大丈夫だったのですが、スマートフォンでは効かない属性がありました。autoplayはiOSで効かない。(Androidでもバージョンによって効かないものがある。)スマートフォン向けのブラウザでは、audio要素の自動再生が効きません。iOSでは完全にダメで、Androidはバージョンによってうまく行くものもあるようですが、ほぼ効かないと考えた方が良さそうです。iOSもAndroidも、タッチイベントなどユーザーのアクションによって再生を開始させるしかありません。