フロントエンジニアによるカンニングペーパー。audioタグ。
スポンサーリンク
あなたはaudioタグを使いこなせていますか？
正直なところ、私はaudioタグの全てを覚えていません。
今このブログを読んでいるあなたも、感じているとは思いますが、
エンジニアという職業、覚えることが多すぎて頭がいくつあっても足りません。
もはや、覚える量の多さに絶望します。
ならばいつでも見返せるカンニングペーパーを作ろう！
ということで、『audioタグ』についてのカンニングペーパーを作成しました。
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
この記事の具体的な内容としては、以下の目次をご確認ください。
audioタグとは
audioタグは、埋め込む音声コンテンツを指定します。
audioタグがサポートされていない環境では、
<audio>～</audio>の中に記載したメッセージを表示させることができます。
例）
<audio src="sample/sample.ogg" controls> <p>音声を再生するには、audioタグをサポートしたブラウザが必要です。</p> </audio>
audioタグの属性
記事を公開した時点での、
実験的導入、非標準、非推奨、廃止属性は記載しておりません。
autoplay
指定された場合、再生可能な状態になった時点で、音声を自動再生させます。
例）
<audio src="sample/sample.ogg" autoplay></audio>
ただし、音声を自動再生することは、
ユーザーにとって不快な体験になる可能性もあるため注意が必要です。
controls
再生・一時停止・音量・再生シークの、
各機能を制御するコントロール（インターフェース）を表示します。
例）
<audio src="sample/sample.ogg" controls></audio>
crossorigin
音声ファイル取得の際に、CORSを使用するかを示します。
例）
<audio src="sample/sample.ogg" crossorigin="anonymous"></audio>
CORS及び、crossoriginの値については、以下サイトをご確認ください。
loop
指定された場合、ループ再生されます。
例）
<audio src="sample/sample.ogg" loop></audio>
muted
指定された場合、音声の初期状態を消音にします。
例）
<audio src="sample/sample.ogg" muted></audio>
preload
ページを読み込む際、音声コンテンツの読み込み方法をブラウザに示します。
autoplayを指定している場合、preloadの値に関わらず、
ページ読み込みと同じタイミングで読み込みが開始されます。
指定できる値に関しては、文末の 参考文献・記事 をご確認ください。
例）
<audio src="sample/sample.ogg" preload="auto"></audio>
src
再生する音声コンテンツを指定します。
例）
<audio src="sample/sample.ogg"></audio>
以上の属性以外にも、グローバル属性を指定することもできます。
sourceタグを持つaudioタグ
audioタグは自身のsrc属性ではなく、
sourceタグを使用し、音声コンテンツを指定することができます。
sourceタグを使用することで、以下のようなメリットがあります。
-
複数の音声コンテンツを指定でき、ブラウザは最初に指定されたsourceタグから順に読み込み、再生可能な音声コンテンツを再生する
- type属性に音声コンテンツのMIMEを指定することで、ブラウザにその音声コンテンツを再生できるかどうかを示すことができ、再生できない場合に時間を浪費しない
例）
<audio controls> <source src="sample.opus" type="audio/ogg; codecs=opus" /> <source src="sample.ogg" type="audio/ogg; codecs=vorbis" /> <source src="sample.mp3" type="audio/mpeg" /> </audio>
sourceタグについては、以下の記事にて解説しています。
<作成中>
アクセシビリティ
audioタグにおいて、推奨されているアクセシビリティを紹介します。
台詞のある音声には、字幕と文字化情報を提供する
コンテンツを理解するのに時間が掛かる人や、
聴力を失った人に対し、音声の内容を理解するために役立ちます。
videoタグで再生し、字幕を表示させるもの一つの対応策です。
videoタグについては、以下の記事にて解説しています。
<作成中>
閲覧者向けのフォールバック（縮退運用）を提供する
audioタグに対応していないブラウザに役立ちます。
直接ダウンロードするリンクなどを提供しましょう。
例）
<audio controls> <source src="sample.mp3" type="audio/mpeg" /> <source src="sample.ogg" type="audio/ogg" /> <!-- 再生できない場合の表示 --> <p> <a href="sample.mp3">MP3</a> または、 <a href="sample.ogg">OGG</a> の音声コンテンツをダウンロードしてください。 </p> </audio>
まとめ
今回は『audioタグ』をテーマに、
いつでも見返せるカンニングペーパーを作成しました。
エンジニアという職業、覚えることが多すぎます。
自分の知識・経験を見返せるカンニングーペーパーは、
そんな業界にいる自分において、これからも役に立ってくれそうです！
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
参考文献・記事
