最新のWeb開発のチュートリアル

HTML5オーディオ


HTML5は、オーディオファイルを再生するための標準を提供します。

HTML5オーディオブラウザで、テキストを音声入力、再生、および合成、ならびに音声を組み込んだ、HTML5仕様書の主題です。


Web上のオーディオ

HTML5の前に、ウェブページ上のオーディオファイルを再生するための規格ではありませんでした。

HTML5の前に、オーディオファイルは、プラグインで再生することができ(like flash)

HTML5 <audio>要素は、Webページにオーディオを埋め込むための標準的な方法を指定します。


ブラウザのサポート

表中の数字は完全にサポートする最初のブラウザのバージョンを指定<audio>要素を。

素子
<audio> 4.0 9.0 3.5 4.0 10.5

HTML <audio>要素

HTMLでのオーディオファイルを再生するには、使用<audio>要素を:

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
»それを自分で試してみてください

<オーディオ>要素は、サウンド、またはオーディオストリームを表します。 一般的に再生/一時停止/音量コントロールをGUIウィジェットを示す、Webページ内の単一のオーディオファイルを再生するために使用されます。

<オーディオ>要素は、これらの属性があります。

グローバル属性(アクセスキー;クラス;のcontentEditable、コンテキストメニュー、DIR;ドラッグ;ドロップゾーン;隠さ; ID; LANG;スペルチェック;スタイル;のtabindex;タイトル;翻訳)

自動再生=「自動再生」または「」(空の文字列)または空が自動的にすぐに停止せずにそうすることができるよう、オーディオストリームの再生を開始するためのUser-Agentに指示します。

プリロード=「なし」または「メタデータ」または「自動」または「」(空の文字列)または空のオーディオストリーム自体やそのメタデータの楽観ダウンロードが価値があると考えられているかどうかについてのUser-Agentにヒントを表します。

「どれも」:ユーザーエージェントユーザーがオーディオストリームを必要とすることが期待されていないこと、または不要なトラフィックを最小限に抑えることが望ましいことにヒントません。

「メタデータ」:ユーザーがオーディオストリームを必要とすることが期待されていないことをユーザーエージェントにヒントが、(ように継続して)そのメタデータを取得することが望ましいこと。

「オート」:楽観的に全体のオーディオストリームをダウンロードするのUser-Agentへのヒントが望ましいと考えられています。

コントロール=「コントロール」または「」(空文字列)または空のオーディオストリームの再生を制御するためのユーザインタフェースを露出させるためにユーザーエージェントに指示します。

ループ=「ループ」または「」(空の文字列)または空が終わりに達したときにバックオーディオストリームの開始に追求するのUser-Agentに指示します。 mediagroup =文字列は、複数のビデオおよび/またはオーディオストリームをリンクするためのUser-Agentに指示します。

ミュート=「ミュート」または「」(空の文字列)または空の潜在的ユーザー設定を上書きし、オーディオストリームのデフォルト状態を表します。 SRC =非空[URL]潜在的にオーディオストリームのためのスペースURLに囲まれています。


HTMLオーディオ - それはしくみ

controls属性再生、一時停止、および音量のように、オーディオコントロールを追加します。

間のテキスト<audio></audio>タグがサポートしていないブラウザで表示されます<audio>要素を。

複数の<source>要素は、異なるオーディオファイルにリンクすることができます。 ブラウザが最初に認識の形式を使用します。


HTMLオーディオ - ブラウザのサポート

現在、3つのサポートされているファイル形式は、のためにそこにある<audio>要素:MP3、WAV、およびOgg:

ブラウザ MP3 wavファイル オッグ
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES

HTMLオーディオ - メディアタイプ

ファイル形式 メディアタイプ
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav

HTMLオーディオ - メソッド、プロパティ、およびイベント

HTML5はDOMのためのメソッド、プロパティ、およびイベントを定義し<audio>要素。

これは、ロードプレー、およびオーディオだけでなく、設定した時間とボリュームを一時停止することができます。

オーディオの再生が始まるときに通知することができますDOMイベントもあり、などを一時停止しています

完全なDOMの参考のために、私たちに行くHTML5オーディオ/ビデオDOMリファレンス


HTML5オーディオタグ

タグ 説明
<audio> 音声コンテンツを定義します
<source> などのメディア要素のための複数のメディアリソースを定義します<video><audio>

HTMLオーディオ - ウェブスピーチAPI

ウェブスピーチAPIは(キーボードを使用せずに)、Webアプリケーションのための代替入力方法を提供することを目的とします。 このAPIにより、開発者はウェブは、コンピュータのマイクから、テキストに音声を転写する機能をアプリ与えることができます。 録音した音声は、テキストがユーザーのために入力された後、転写用の音声サーバに送信されます。 API自体は、基礎となる音声認識の実装にとらわれないで、サーバーベースだけでなく、組み込みの認識機能の両方をサポートすることができます。 HTMLスピーチインキュベータグループは、均一な、クロスプラットフォームAPIの形でブラウザでオーディオ・音声技術の導入を提案しました。 APIは、両方が含まれています。

  • 音声入力API
  • スピーチAPIへのテキスト