以前は、ブラウザにはオーディオおよびビデオコンテンツをサポートする機能が組み込まれていませんでしたが、インターネットの発達に伴い、最新のブラウザの機能としてのマルチメディア要素のサポートが必要になりました。 HTML5で新しい要素が導入されました

オーディオファイル形式は、メディア（ストレージデバイス）に保存されたときのオーディオデータの構造と表示機能を決定します。 オーディオデータの冗長性を排除するために、原則として、特別なオーディオコーデックが使用され、そのおかげでオーディオデータが圧縮されます。 最新のブラウザ 次の3つのオーディオ形式をサポートします:

ブラウザ	MP3	Wav	Ogg
はい	はい	はい
はい	はい	はい
オペラ	はい	はい	はい
はい	はい	番号
NS	はい	番号	番号
角	はい	はい	番号

• MP3形式はコーデックであり、同時にコンテナです。 ダウンロード可能な音楽をホストするために、世界中で広く使用されています。
• WAV形式-コーデックとコンテナも同時に。
• Oggコンテナ+ Vorbisオーディオコーデック..。 これは一般に「OggVorbis」と呼ばれます。 特許取得済みのMP3、AAC、WMAを置き換えるためにXiphコミュニティによって開発されました。

オーディオのMIMEタイプ：

フォーマット

MIMEタイプ
MP3	オーディオ/ mpeg
Ogg	オーディオ/ ogg
Wav	オーディオ/ wav

ブラウザのサポート

鬼ごっこ			オペラ		IExplorer	角
	4.0	3.5	10.5	4.0	9.0	12.0

属性

属性	意味	説明
自動再生	自動再生	準備が整うとすぐにオーディオが自動的に開始されることを示します。
コントロール	コントロール	組み込みのメディアファイルコントロール（再生/一時停止ボタン、特定のクリップにジャンプするスライダー、およびボリュームスライダー）を表示します。
ループ	ループ	ファイルの再生をループします（私たちの曲は良いです-最初からやり直してください）..
ミュート	ミュート	音声がミュートされる（音が出ない）ことを示します。
プリロード	自動 メタデータ なし	ページの読み込み時にオーディオを読み込む方法を指定します。 自動再生属性が存在する場合、属性は無視されます。
src	URL	オーディオファイルのURLを指定します。

使用例

エレメント

HTML5のオーディオ

この例では、次のことを行います。

ページにオーディオコンテンツを追加しました（タグ

最も注目すべき機能の1つ HTML5ストリーミングオーディオです。

あなたがウェブ開発の分野に従事しているなら、それからの選択 10の信じられないほどのHTML5オーディオプレーヤーあなたにとって非常に便利です。

-クリーンで書かれたオーディオおよびビデオプレーヤー HTML5と CSS..。 古いブラウザのサポートは 閃光と Silverlight模倣する選手 HTML5 MediaElement API.
MediaElementには多くのスキンがあり、WordPress、Drupal、Joomlaなどの人気のあるプラットフォームをサポートしています。

このプレーヤーは非常にミニマルですが、機能的です。 プレイリストや流行のエフェクトが必要な場合に最適です。

別の偉大なプレーヤー、間違いなくこのリストで最高です。 長所 カスタマイズが非常に簡単で、サイズが十分に柔軟で、無制限の数の色に合わせてカスタマイズできるという点で。
もつ クロスブラウザのサポート、そして古いブラウザにはそれがあります 閃光-アナログ。

使用しています Mootoolsあなたのウェブサイトで？ はいの場合、おそらくあなたはこのプレーヤーが上で作られたのが好きになるでしょう HTML5と Mootools JavaScriptフレームワーク。 プレーヤーは、最新のすべてのブラウザーで完全に機能します。

このプレーヤーは、リストから支払われる唯一のプレーヤーです。 彼はすべての価値があります $5 しかし、それは完全に機能します。 プレーヤーには、オーバーダビングによる盗聴からオーディオを保護するなど、多くの便利な機能があります。これは、商用利用に非常に適しています。

ソース： http://codecanyon.net/item/universal-html5-audio-player

V 関係する技術 HTML5と 閃光非常に軽量になります（ 10 Kb）ストリーミングオーディオを再生するための信頼性の高いクロスブラウザソリューション。
あなたが何ができるか知りたい サウンドマネージャー2？ デモを表示するには、にアクセスしてください。

説明

Webページのオーディオ録音設定を追加、再生、および管理します。 ファイルパスは、src属性またはネストされたタグを介して指定されます。 コンテナ内

ブラウザでサポートされているコーデックのリストは限られており、表に示されています。 1.1。

タブ。 1.コーデックとブラウザ

コーデック	インターネットエクスプローラ	クロム	オペラ	サファリ	Firefox
ogg / vorbis
wav
mp3
AAC

指定されたブラウザでのユニバーサル再生の場合、オーディオは異なるコーデックを使用してエンコードされ、ファイルはタグを介して同時に追加されます .

構文

属性

ページが読み込まれるとすぐにサウンドの再生が始まります。 オーディオファイルにコントロールバーを追加します。 終了後、最初から音を繰り返します。 Webページのロードとともにファイルをアップロードするために使用されます。 再生中のファイルへのパスを指定します。

終了タグ

必須。

HTML5 IE 8 IE 9+ Cr Op Sa Fx

アレクサンダークリメンコフ-14

Operaブラウザでの例の結果を図に示します。 1.1。

米。 1.オーディオファイルの再生

ブラウザ

オーディオ再生コントロールはブラウザによって外観が異なりますが、基本的な要素は同じです。 これらは、再生/一時停止ボタン、トラックの長さ、経過時間と合計再生時間、および音量レベルです。

適度に高速なインターネット接続の出現により、FlashはWebサイトでサウンドを再生するための唯一のツールでした。 しかし、HTML5は、インターネットでのサウンドの再生方法を根本的に変えるでしょう。 この記事では、タグの使用方法について詳しく説明します。 あなたのサイトで。

を使用しております

以下は、タグを使用する最も簡単な例です。mp3ファイルをダウンロードして再生します。 属性に注意してください 自動支払い自動的に音を鳴らすために使用されます。 ただし、ユーザーを煩わせるため、サイトで自動的にサウンドを再生しないでください。

ループでサウンドを再生する

音をループさせたいですか？ loop属性は、これを行うのに役立ちます。 ただし、ユーザーがサイトを途中で離れたくない場合は、自動再生とループを乱用しないでください。

コントロールの表示

サウンドを自動的に再生するのではなく、これは間違いなく悪い習慣ですが、音量や再生（一時停止）ボタンなどのいくつかのコントロールをブラウザーに表示させる必要があります。 これは、属性を追加するだけで簡単に実行できます コントロール.

さまざまなファイル形式

タグはほとんどの最新のブラウザでサポートされていますが、問題は、ブラウザが異なればファイル形式も異なることです。 たとえば、SafariはMP3を再生できますが、Firefoxは再生できず、代わりにOGGファイルを再生します。 この問題の解決策は、両方の形式を使用して、使用しているブラウザに関係なく、すべての訪問者がサウンドを聞くことができるようにすることです。

ファイルのMIMEタイプの指定

異なるファイル形式を使用する場合は、ブラウザがサポートするファイルをローカライズできるように、各ファイルのMIMEタイプを指定することをお勧めします。 これは、属性を使用して簡単に実行できます タイプ.

古いブラウザの場合

訪問者がIE6またはタグをサポートしていない他の先史時代のブラウザを使用している場合はどうなりますか？ すべてが簡単です。以下は、タグをサポートしていないブラウザのメッセージを表示するコードです。

ファイルバッファリング

大きなファイルを再生する場合、ファイルバッファリングが使用される場合があります。 これには、属性を使用できます プリロード..。 次の3つの値を取ることができます。

• なし-ファイルバッファを使用したくない場合。
• 自動-ブラウザでファイル全体をバッファリングする場合。
• メタデータ-サービス情報（音の長さなど）のみをダウンロードします。

JavaScript再生制御

JavaScriptを介してHTML5オーディオプレーヤーを制御するのは非常に簡単です。 次の例は、JavaScriptを使用して基本的なオーディオプレーヤーコントロールを構築する方法を示しています。

それが今日のすべてです。
この記事がHTML5タグの基本的な機能を理解するのに役立つことを願っています。 .

この質問は非常に頻繁に発生するため、レッスンでは別の記事を取り上げることにしました。 HTMLにはすべてのブラウザでオーディオを再生するためのユニバーサルテクノロジがないため、この問題を解決するために、ほとんどのサイトで行われているように、オーディオプレーヤーファイルをダウンロードすることを提案します。 私たちはすべてを段階的に行います：

1. サイトが配置されているホスティングのルートディレクトリ（インデックスファイルがあるフォルダー）に、オーディオフォルダーを作成します。 将来的には、すべてのオーディオファイルをその中に配置する予定です。

3. 次に、必要なファイルを、できればmp3形式で選択します。 フォルダを作成する オーディオサイトのルートでアップロードします。

4. 残っているのは、プレーヤーの接続コードを挿入することだけです。 あらゆるサイトに適しています適切な場所で、プレーヤーファイルとオーディオファイルへのパスを指定するだけで、それに応じて単語を置き換えることができます your_domainと audio_file_name:

そして、あなたは完了です！ 作品もご覧いただけます 例.

HTMLでバックグラウンドミュージックを設定する方法

HTMLとブラウザの機能を使用して、ページにバックグラウンドミュージックを挿入することもできます。 正しい形式のオーディオファイルが必要になります：WAV、AU、MIDIまたはMP3。 例として、指定された拡張子を持つ任意のファイルを使用できます。

最初の方法埋め込みタグです。 embed要素は、ブラウザがネイティブに理解しないオブジェクト（たとえば、ビデオファイル、フラッシュムービー、一部のサウンドファイルなど）をロードして表示するために使用されます。

構文は非常に単純です。

終了タグは必要ありません。

次に、属性を持つレコードの例を見てみましょう。以下では、それらのデコードについて説明します。

HTMLでオーディオを再生するためのタグ属性を埋め込む
width-パネルの幅（ピクセル（またはパーセンテージ））
高さ-パネルの高さ（ピクセル（またはパーセンテージ））
整列-テキストに対するパネルの位置、可能な値は左、右、中央です
hidden-パネルを非表示にできます。属性値：true-パネルは非表示、false-パネルは表示されます（デフォルト値）
autostart-値true-ページが読み込まれるとプレーヤーが自動的に起動します。false-再生ボタンが押されるのを待ちます
loop-loop、true-トラックは円で再生され、falseの場合は1回だけ再生されます

2番目の方法。非常に古いですが、実用的でもあります）ファイルと同じフォルダ（ディレクトリ）にメロディを追加し、本文に次のコードを記述します。

その結果、ページを読み込んだ後、bgsoundタグで指定したメロディーが鳴ります。 次に、タグの属性を詳しく見てみましょう。 :

src-オーディオファイルへのパス
ループ-メロディーを何回繰り返すか（-1の場合、無限に繰り返されます）
残高-ステレオバランス値（-10000〜10000）
音量-再生中のメロディーの音量。0が最大、-10000が最小です。

ただし、プレーヤーを制御することはできません。ページが更新されるたびに、トラックが再度再生されます。

身元音楽の挿入方法を説明した後、すでに様々なサイトにアクセスしているユーザーの大多数は、原則として音楽を聴いているので、これを思いとどまらせたいと思います。 したがって、付随する音楽は、彼にサイトのタブを閉じるように強制することしかできません。

HTML5にオーディオと音楽を挿入-オーディオタグ

オーディオ-サイトのバックグラウンドサウンド、音楽、またはその他のオーディオストリームを定義するペアのタグ。

オーディオタグの属性

自動再生-ファイルはページが読み込まれるとすぐに再生されます（bgsoundのバックグラウンドミュージックと同様）
コントロール-ブラウザにプレーヤーのコントロールパネルを表示します
ループ-終了後にファイルを再度再生します
プリロード-オーディオファイルのダウンロードは、ページの読み込みとともに行われます
src-オーディオファイルへのパス（mp3またはogg）

オーディオタグ付きのサンプルコード

HTML5のオーディオ