【HTML5】HTML5マルチメディアタグ①（audioオーディオタグ｜audioタグ共通属性値設定｜audioタグデフォルトコード設定｜複数種類の音声ファイルのaudioタグ設定）

記事ディレクトリ

1. HTML5 マルチメディアタグ
2. オーディオタグ
3. オーディオタグコード例（デフォルト動作）
4. オーディオタグのコード例（mp3/ogg形式でオーディオを挿入）

1. HTML5 マルチメディアタグ

従来の HTML 開発では、Web ページにオーディオとビデオを埋め込みたい場合、これを実現するには Flash ブラウザプラグインを使用する必要があります。

HTML5 では、マルチメディアタグを使用して、オーディオとビデオをブラウザに挿入できます。マルチメディアタグは次のとおりです。

音声タグ: <audio>
ビデオタグ: <video>

2. オーディオタグ

HTML 5 の<audio>audio タグは、ogg / mp3 / wav の 3 つの形式の音声をサポートします。ブラウザごとにサポートされる音声形式も異なります。

IE9: mp3;
Firefox 3.5: ogg / wav ;
Opera 10.5 : ogg / wav ;
Chrome 3.0 : ogg/mp3 ;
Safari 3.0: mp3/wav;

<audio>audio タグにはogg 形式と mp3 形式の両方のタグを入れることができ、すべてのブラウザでオーディオを再生できます。

audio タグの共通属性:

src 属性: URL 値と再生するオーディオパスを設定します。
autoplay 属性:値は autoplay です。これは、オーディオファイルがロードされた直後に再生されることを意味します。
- Chrome ブラウザは自動再生できません。
- IE などの他のブラウザは自動的に再生できます。
Controls 属性:値は Controls で、Web ページ上の操作コントロール(再生/一時停止/停止/プログレスバー/音量コントロールボタンなど) を表示します。
- プレーヤーが異なれば操作スペースも異なり、スタイルを統一することはできません。
ループ属性:値はループで、オーディオはループで再生されます。
- 設定はloop="loop"ループで再生されます。

3. オーディオタグコード例（デフォルト動作）

コード例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 多媒体标签 - 音频标签示例</title>
    <style>

    </style>
</head>

<body>
    <audio src="media/snow.mp3" controls="controls"></audio>
</body>

</html>

表示効果：

入力後のデフォルトのスタイル:
[再生] をクリックすると、ラベルの右側に再生アイコンが表示されます。

4. オーディオタグのコード例（mp3/ogg形式でオーディオを挿入）

ブラウザはページをロードし、audio タグを見つけ、audio タグを読み取り、

最初のソースタグはmp3 オーディオファイルを構成します。
- ブラウザが mp3 をサポートしている場合は、mp3 ファイルを再生します。
- mp3 形式がサポートされていない場合は、次の行を読み続けてください。
2 番目のソースタグは、ogg 形式のオーディオファイルを構成します。
- ブラウザが ogg をサポートしている場合は、ogg ファイルを再生します。
- ogg 形式がサポートされていない場合は、次の行を読み続けてください。
3 番目のソースタグは、オーディオファイルを wav 形式で構成します。
- ブラウザが wav をサポートしている場合は、wav ファイルを再生します。
- wav 形式がサポートされていない場合は、次の行を読み続けてプロンプトメッセージを表示します。

IE 6 / 7 / 8 など、ブラウザのバージョンが低すぎる場合は表示されます很抱歉 , 当前浏览器不支持现有音频格式 ~。