<audio> - オーディオ
目次
概要
- 形式
<audio>～</audio>- サポート
- https://caniuse.com/audio
- カテゴリ
- フローコンテンツ
フレージングコンテンツ
エンベデッドコンテンツ
インタラクティブコンテンツ(controls属性を持つ場合)
パルパブルコンテンツ(controls属性を持つ場合)
- 親要素
- エンベデッドコンテンツ を子要素に持てるもの
- 子要素
src 属性を持つ場合: 0個以上の track 要素と、それに続く トランスペアレント要素(ただし、エンベッデッドコンテンツを子孫に持たない)。
src 属性を持たない場合: 0個以上の source 要素と、それに続く 0個以上の track 要素と、それに続く トランスペアレント要素(ただし、エンベッデッドコンテンツを子孫に持たない)。
- タグの省略
- 開始タグ:必須 / 終了タグ:必須
- 属性
- グローバル属性
src
crossorigin
preload
autoplay
loop
muted
controls
説明
オーディオファイルを再生します。
<audio>～</audio> の間には audio 未対応のブラウザに表示するメッセージを記述することができます。
ブラウザによってサポートするコーデックやフォーマットが異なるため、<source> を用いて複数のフォーマットを指定することも可能です。
属性
- グローバル属性
- 詳細は グローバル属性 を参照してください。
- src=url
- LS/H5/e/Ch/Fx/Sa/Op
- メディアリソースのURLを指定します。
- crossorigin=state
- LS/H5
- CORS(Cross-Origin Resource Sharing)で使用される属性で、他のサイトのリソースにアクセスする際に、認証情報を使用するかどうかを指定します。
- anonymous
- 認証情報を使用しない
- use-credintials
- 認証情報を使用する
- preload=value
- LS/H5
- ページ表示時にメディアリソースを事前ロードするか指定します。指定に従うかどうかはブラウザの実装にまかされます。
- auto
- 事前ロードする
- none
- 事前ロードしない
- metadata
- メタデータのみを事前ロードする。autoplayが指定された場合は無視されます。
- autoplay
- LS/H5/e/Ch/Fx/Sa/Op
- 自動的に再生を開始します。ただし、ユーザーの意図を確認せず音声を流してしまうことは推奨されず、Chrome 70 以降では特定の条件(下記)を満たさないと自動再生されなくなりました。
- loop
- LS/H5/e/Ch/Fx/Sa/Op
- ループ再生します。
- muted
- LS/H5/e/Ch/Fx/Sa/Op
- 音をミュートします。
- controls
- LS/H5/e/Ch/Fx/Sa/Op
- コントローラを表示します。
- mediagroup=name
- [非推奨] H5-5
- 複数のメディアリソースをグルーピングする際のグループ名を指定します。HTML5 で定義されましたが、HTML5.1 で廃止されました。HTML Living Standard でも採用されていません。
使用例
HTML
<audio src="audio.mp3" loop>
<p>このブラウザは audio に未対応です。</p>
</audio>
詳細
自動再生ポリシー
ユーザーの意図を確認せず音声を流してしまうことは推奨されず、Chrome 70 以降では下記のいずれかの条件を満たしていければ自動再生されなくなりました。詳細は MDN の「メディアおよびウェブ音声 API の自動再生ガイド」を参照してください。
- 音声がミュートされている。
- ユーザーがクリック、タップ、キー押下など何らかの再生操作を行った。
- サイトが自動再生許可リストに登録されている。許可リストへの登録条件はブラウザによって異なる。
- PWAアプリとしてインストールされている。
- 自動再生機能ポリシーを用いて
<iframe> に自動再生の許可を与えている。
メソッド・イベント・プロパティ
<video> と同様のメソッド、イベント、プロパティを使用できます。
リンク
Copyright (C) 2011-2024 杜甫々
初版:2011年5月29日 最終更新:2024年12月29日
https://www.tohoho-web.com/html/audio.htm