HTMLのaudioタグで音声を再生する方法
HTMLのaudioタグで音声を再生する方法 2020 8/04 PR HTML入門（上級編） 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> 使用例：ブラウザ https://mdstage.com/wp-content/uploads/2019/05/sample_audio.mp3 autoplay属性autoplay属性は、ページを読み込んだ際に音声を「自動再生」してくれる機能です。
※音声が自動で流れるコンテンツは、ユーザーにとって不快にさせてしまう恐れがありますので、できるだけ自動再生は避けるべきです。それでも音声を流す際にはユーザーに分かりやすく明記する必要があります。
使用例：HTML <audio autoplay> <source src="sample_audio.mp3"> </audio> loop属性loop属性は、音声が終わると頭から繰り返し再生します。
使用例：HTML <audio loop> <source src="sample_audio.mp3"> </audio> 使用例：ブラウザ https://mdstage.com/wp-content/uploads/2019/05/sample_audio.mp3 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” （ページ読み込み時に動画全体を読み込む）理解するポイントまとめ
- audioタグは、HTML文書内で「音声」を再生するための要素です。
- ファイルタイプによっては、ブラウザが対応していない場合があるので注意する必要があります。
- WordPressのvideoショートコードを使用する場合はオプションの指定方法が違います。
- URLをコピーしました！