【HTML】autoplay属性で音楽や動画の自動再生を有効にする方法

このページについて

このページではHTMLで使えるautoplay属性の使い方を解説しています。

autoplayはその名の通り、音楽ファイルや動画の自動再生を有効にする機能を持っています。使えるタグはaudioタグとvideoタグの2種類のみです。

ただしユーザーの音量設定がマチマチなのと、ブラウザ開いたらいきなり再生されるとかで利用者によってはかなりイラつく要因ともなり得ます。なのでこの機能はなるべく使わずにおくのが正解なんですが、どうしても使いたいという方は是非muted属性も使いましょう。

autoplay属性はブール値といって「有効」と「無効」の2種類しかありません。autoplayを書かなかった場合は無効扱いとなり、書いたら有効扱いとなるシンプルなものです。それを踏まえて実際の書き方は以下のようになります。

<audio autoplay muted>
<source src="音楽ファイル" type="audio/ogg">
<source src="音楽ファイル" type="audio/mpeg">
</audio>

audioタグにautoplayを書くだけで自動再生が有効になります。ただし上でも書いた通り、訪問者によっては音や動画が自動再生されるなんて知らないケースもあり得ます。その場合に最初から音を無しの状態で再生させる方法もあります。それがmuted属性です。

それかautoplay自体を排除し、controls属性を付与してユーザー自身が任意のタイミングで再生できるようにするという方法もあります。

autoplayは自動再生という便利な機能に思えますが、利用方法によっては訪問者をイラつかせてしまうだけのデメリットでしかありません。muted属性を使うとか、controls属性でユーザー自身が再生できるようにするなどの対策は必須です。