html audio「音声ファイルを定義する」
HTML5
<audio>
書式
<audio 属性="属性値">メッセージ</audio>
サンプル
<audio src="audio/sample.wav" controls>
<p>audioタグサポートのブラウザをご使用下さい。</p>
</audio>
HTML audio タグ(Tag)
<audio>
1 2 3 4 | <!-- 書式 --> <audio 属性="属性値">連絡先</audio> <!-- サンプル --> <audio src="audiofiles/sample.wav" controls><p>audioタグをサポートしているブラウザをご利用下さい。</p></audio> |
種別 | ブロックレベル要素 | ||
---|---|---|---|
開始タグ | 必須 | 終了タグ | 省略可 |
HTML5audioタグ は HTML5 で 追加されました。
サポート
Chrome | Ver4.0~ | Firefox | Ver3.5~ |
---|---|---|---|
Safari | Ver1.0~ | Opera | Ver10.5~ |
Internet Explorer | Ver2.0~ | HTML | Ver5.0~ |
内容
サンプルコード
- html tag
- ブラウザ表示
- html code
1 2 3 | <audio src="audio/sample.wav" controls> <p>audioタグをサポートしているブラウザをご利用下さい。</p> </audio> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="robots" content="all"> <title>HTML | WEPICKS!</title> </head> <body> <!-- // ============ html tag ============ --> <audio src="audio/sample.wav" controls> <p>audioタグをサポートしているブラウザをご利用下さい。</p> </audio> |
属性
グローバル属性
グローバル属性はすべての タグ(要素)で使用可能な属性です。
属性 | タグ(要素) | 値について |
---|---|---|
accesskey | グローバル属性 | 任意の半角英数字1文字 ※大文字小文字区別 |
要素にアクセスキー(ショートカットキー)を割り当て、キーボード操作でアクティベート、または、フォーカスできるようにする。 書式 <タグ名 accesskey="値"> 値の例 半角英数字 | ||
autocapitalize | グローバル属性 | 入力文字列の先頭大文字化 |
ユーザーによって入力/編集されたとき、入力文字列が自動的に大文字化されるかどうか、どのように行われるかを制御します。 書式 <タグ名 autocapitalize="値"> 値の例 off/none on/sentences words characters | ||
class | グローバル属性 | クラス名 |
要素にクラス名を指定します。半角スペースで区切ることで複数のクラス名を指定できます。 書式 <タグ名 class="値"> 値の例 クラス名 | ||
contentEditable | グローバル属性 | 編集の 可・不可 |
要素の内容の編集が 可・不可 であるかを指定します。 書式 <タグ名 contentEditable="値"> 値の例 true false | ||
contextmenu | グローバル属性 | コンテクストメニュー menu要素のid属性の値 |
要素のコンテキストメニューを指定します。コンテキストメニューとして機能する menu要素 の ID を指定する属性です。 書式 <タグ名 contextmenu="値"> 値の例 | ||
data-* | グローバル属性 | カスタムデータ属性 |
HTML要素にカスタム属性が添付し、要素にオリジナル拡張データを格納するための指定です。 書式 <タグ名 data-*="値"> 値の例 | ||
dir | グローバル属性 | テキストの方向性 |
要素内テキストの文字方向を指定します。指定できる値は ltr (Left-To-Right) または rtl (Right-To-Left) です。 書式 <タグ名 dir="値"> 値の例 ltr rtl auto | ||
draggable | グローバル属性 | ドラックの 可・不可 |
要素のドラックを 可・不可 であるかを指定します。 書式 <タグ名 draggable="値"> 値の例 true false | ||
dropzone | グローバル属性 | 種類と処理方法 |
要素をドロップ可能な領域として指定し、ドロップ時に種類としてファイル(file:)、テキスト(string:)、処理としてコピー(copy)、移動(move)、リンク(link)などを指定します。 書式 <タグ名 dropzone="値"> 値の例 string:copy string:move string:link file:copy file:move file:link | ||
hidden | グローバル属性 | 要素非表示 |
要素を非表示に指定します。 書式 <タグ名 hidden="hidden"> <タグ名 hidden=""> <タグ名 hidden> 値の例 hidden "" | ||
id | グローバル属性 | id名 |
要素にid名を指定します。クラス名とは異なりid名の値はドキュメント中で一意の固有名とします。 特定の要素へスタイルを設定するために CSS と共によく使われます。この属性の値は一位でなければなりません。 書式 <タグ名 id="値"> 値の例 id名 | ||
itemid | グローバル属性 | id名 |
要素に HTML Microdata(構造化データ)のアイテム(処理項目)の範囲が指定された場合に、itemtype属性 でデータの種類を指定しますが、さらに詳細の識別子がある場合、itemid属性 で指定します。 ※HTML文書に構造化データとしての意味を持たせる属性群の1つです。item関連の属性を付与された要素では、Microdata として処理が可能で、他の言語などから抽出などの処理が可能になります。 書式 <タグ名 itemid="値"> 値の例 id名 | ||
itemref | グローバル属性 | itemref名 |
要素に HTML Microdata(構造化データ)のアイテム(処理項目)の範囲が指定された場合に、その範囲外との関連付けを指定します。通常は、itemscope属性 で指定した範囲内が対象となりますが、itemscope属性 で指定した範囲外で関連性のあるデータがある場合、itemref属性 で関連付けます。 ※HTML文書に構造化データとしての意味を持たせる属性群の1つです。item関連の属性を付与された要素では、Microdata として処理が可能で、他の言語などから抽出などの処理が可能になります。 書式 <タグ名 itemref="値"> 値の例 itemref名 | ||
itemscope | グローバル属性 | itemscope |
要素に HTML Microdata(構造化データ)のアイテム(処理項目)の範囲を示します。要素に itemscope属性 が指定されている場合、ここから Microdata を扱うという宣言にもなります。 ※HTML文書に構造化データとしての意味を持たせる属性群の1つです。item関連の属性を付与された要素では、Microdata として処理が可能で、他の言語などから抽出などの処理が可能になります。 書式 <タグ名 itemscope="itemscope"> <タグ名 itemscope> 値の例 itemscope | ||
itemtype | グローバル属性 | itemtypeの種類 |
要素に HTML Microdata(構造化データ)のアイテム(処理項目)の種類を示します。itemscope属性 で Microdata(構造化データ) の範囲を指定した場合に、データの種類を指定します。 ※HTML文書に構造化データとしての意味を持たせる属性群の1つです。item関連の属性を付与された要素では、Microdata として処理が可能で、他の言語などから抽出などの処理が可能になります。 書式 <タグ名 itemtype="値"> 値の例 https://schema.org/Person http://schema.org/WebPage | ||
itemprop | グローバル属性 | itemprop名 |
要素に HTML Microdata(構造化データ)のアイテム(処理項目)のプロパティを指定します。itemscope属性 で Microdata(構造化データ) の範囲を指定した場合に、範囲内のデータのプロパティを指定します。プロパティにより、範囲内の各要素の詳細データ内容が識別できます。プロパティの意味は、 itemscope属性 と同時に指定してある itemtype属性 で指定した内容によって判断されます。 ※HTML文書に構造化データとしての意味を持たせる属性群の1つです。item関連の属性を付与された要素では、Microdata として処理が可能で、他の言語などから抽出などの処理が可能になります。 書式 <タグ名 itemprop="値"> 値の例 itemprop名 | ||
lang | グローバル属性 | 言語コード |
HTMLドキュメントや要素の言語を指定します。en(英語)、ja(日本語)、zh(中国語)など 書式 <タグ名 lang="値"> 値の例 en ja | ||
nonce | グローバル属性 | ワンタイムトークン(base64-value) |
HTMLドキュメント内のスクリプトの実行の有無を指定します。コンテンツセキュリティポリシーCSP(Content Security Policy)に則ります。クロスサイトスクリプティング(XSS)などの攻撃からWebサイトを保護する仕組みの一環です。 書式 <タグ名 nonce="値"> 値の例 YmFzZTY0LXZhbHVl | ||
slot | グローバル属性 | 割り当て名 |
要素に影のDOMを追加します。通常のDOMの裏に別のDOMを隠すことが出来ます。 書式 <タグ名 slot="値"> 値の例 slot割り当て名 | ||
spellcheck | グローバル属性 | スペルチェックの有・無 |
要素の内容のスペルチェックの有無を指定します。 書式 <タグ名 spellcheck="値"> 値の例 true false | ||
style | グローバル属性 | プロパティと値でスタイルを指定 |
要素にスタイルを指定します。CSSプロパティとその値を指定します。「 ; (セミコロン)」で区切って複数のスタイルを記述することが出来ます。 書式 <タグ名 style="プロパティ:値;"> 値の例 width:100%; margin:10px; | ||
tabindex | グローバル属性 | 順序を指定する + - 整数値 |
Tabキーが押された時、要素がフォーカスさせる優先順位を指定します。ブラウザの設定より優先されます。 書式 <タグ名 tabindex="値"> 値の例 + - 整数値 | ||
title | グローバル属性 | テキストで要素の補足説明 |
要素の補足情報を指定します。PC ブラウザーでは、マウスオーバー時にツールチップとしてその属性値が表示されます。 書式 <タグ名 title="値"> 値の例 補足情報 | ||
translate | グローバル属性 | 翻訳の有・無 |
要素の翻訳の有無を指定します。 書式 <タグ名 translate="値"> 値の例 yes no |
タグ(=記事関連ワード)
タグ: HTML
日付
投稿日:2018年11月10日
最終更新日:2019年01月08日
最終更新日:2019年01月08日
このカテゴリの他のページ
この記事へのコメント
トラックバックurl
https://wepicks.net/htmltag-audio/trackback/