HTMLのaudioタグで音声を再生する方法

2020年8月4日

この記事の目次

audioタグとは？

HTMLのaudioタグは、HTML文書内で「音声」を再生するための要素で、HTML5から新たに追加された要素です。

audioタグの使い方

audioタグを使用するには、<audio></audio>の中に音声ファイル名やその他の属性を記述します。更に、audioタグに対応していないブラウザで表示するメッセージを記述することもできます。

使用例：HTML

<audio src="sample_movie.mp3"></audio>

最もシンプルな記述です。audioタグのsrc属性としてファイルを指定する方法です。
しかし、これだとmp3に対応していないブラウザでは再生されません。このような場合は、「sourceタグ」を使用します。

使用例：HTML

<audio>
  <source src="sample_audio.mp3">
  <source src="sample_audio.ogg">
</audio>

上記の場合、まずは「sample_audio.mp3」が再生されます。

もし、mp3ファイルに対応していないブラウザの場合は、oggファイルが読み込まれます。

このように、対応していないブラウザの場合の代替ファイルを指定することができます。また、対応していないブラウザ環境の場合に表示するメッセージを記述することもできます。

<audio src="sample_audio.mp3">
  <p>音声の再生に対応したブラウザをインストールしてください。</p>
</audio>

audioタグの主な属性

audioタグに属性を設定することで、より詳細に設定することができます。

controls属性

controls属性は、再生や一時停止、ボリューム、再生位置などを設定するためのコントローラーを表示してくれます。表示形式は各ブラウザ標準のコントローラーが表示されます。値は省略可能です。

使用例：HTML

<audio controls>
  <source src="sample_audio.mp3">
</audio>

使用例：ブラウザ

autoplay属性

autoplay属性は、ページを読み込んだ際に音声を「自動再生」してくれる機能です。

※音声が自動で流れるコンテンツは、ユーザーにとって不快にさせてしまう恐れがありますので、できるだけ自動再生は避けるべきです。それでも音声を流す際にはユーザーに分かりやすく明記する必要があります。

使用例：HTML

<audio autoplay>
  <source src="sample_audio.mp3">
</audio>

loop属性

loop属性は、音声が終わると頭から繰り返し再生します。

使用例：HTML

<audio loop>
  <source src="sample_audio.mp3">
</audio>

使用例：ブラウザ

preload属性

preload属性は、ページの読み込み時の音声ファイルの読み込みについての設定を行います。属性の値に「none」、「auto」、「metadata」のいづれかを設定します。「none」は、デフォルト値で、ページ読み込み時に音声ファイルを読み込みません。「auto」は、ページ読み込み時に音声ファイル全体を読み込みます。「metadata」は、ページ読み込み時に音声ファイルのメタデータだけを読み込みます。

使用例：HTML

<audio preload="auto">
  <source src="sample_audio.mp3">
</audio>

muted属性

muted属性は、音声をミュート（消音）状態にします。

使用例：HTML

<audio muted>
  <source src="sample_audio.mp3">
</audio>

crossorigin属性

crossorigin属性は、CORS（Cross-Origin Resource Sharing）つまり「オリジン間リソース共有」を設定する属性です。

他のドメインなどから通信する際に認証を行う事が出来ます。値には、「anonymous」、「use-credentials」が設定できます。

「anonymous」もしくは空の場合は、認証の為のユーザー情報は必要ありません。

「use-credentials」の場合は認証の際にユーザー情報を必要とします。

※通常、audioタグを使用する際にはほとんど使用することはないかと思いますので、詳しく覚える必要はないでしょう。

使用例：HTML

<audio crossorigin="anonymous">
  <source src="sample_audio.mp3">
</audio>

mediagroup属性

mediagroup属性は、複数の音声を同時再生する際に、音声をグループ化します。属性地には「メディアグループ名」を指定します。

使用例：HTML

<audio mediagroup="グループ名">
  <source src="sample_audio.mp3">
</audio>

ブラウザ対応状況

audioタグのブラウザ対応状況は下記を参考にしてみてください。

また、迷ってしまった場合は、「mp3」を使用するとほとんどのブラウザで対応していると考えてよいと思います。
HTML の audio 及び video で対応しているメディア形式 | MDN

WordPressでaudioタグを使用する

WordPressでaudioタグを使用したい場合があると思います。

テキストエディタに記述する場合はそのままタグを使用すればよいのですが、「メディアの追加」から挿入する場合は、以下の様な「ショートコード」が挿入されます。

［audio autoplay="on" mp3="sample_audio.mp3"］［/audio］

※WordPressの仕様上「[ ]」を全角で記述しています。実際は半角で記述されます。

標準で挿入されるのは、width属性とheight属性、それと「mp3=””」の部分に動画ファイルのソースが記述されます。（※「src=””」でも可。）

WordPressのaudioショートコードのオプション一覧

ショートコードに使用できるオプションは以下の通りです。

src	動画ファイルのソース。複数のファイルタイプを指定する場合は下記のようにタイプ毎に指定。 ‘mp3′,’m4a’,’ogg’,’wav’,’wma’
loop	“off” （デフォルト） “on” （ループ再生）
autoplay	“off” （デフォルト） “on” （再生準備ができ次第再生）
preload	“metadata” （デフォルト：ページ読み込み時にメタデータだけを読み込む） “none” （ページ読み込み時に動画を読み込まない） “auto” （ページ読み込み時に動画全体を読み込む）