HTML オーディオは HTML 仕様の主題であり、音声からテキストへの変換を含むオーディオをすべてブラウザー内に組み込みます。

<audio>要素

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

この<audio>要素には以下の属性があります:音楽

  • グローバル属性 (accesskey; class; contenteditable; contextmenu; dir; draggable; dropzone; hidden; id; lang; spellcheck; style; tabindex; title; translate)
  • autoplay = "autoplay" または "" (空の文字列) または空
    ユーザーエージェントに、停止せずにできるだけ早くオーディオ ストリームの再生を自動的に開始するように指示します。
  • preload = "none" または "metadata" または "auto" または "" (空の文字列) または空
    オーディオ ストリーム自体またはそのメタデータの楽観的なダウンロードが価値があるかどうかについて、ユーザー エージェントへのヒントを表します。
    • "none": ユーザーがオーディオ ストリームを必要としないこと、または不要なトラフィックを最小限に抑えることが望ましいことをユーザー エージェントにヒントします。
    • 「メタデータ」: ユーザーがオーディオ ストリームを必要とすることは想定されていないが、そのメタデータ (継続時間など) を取得することが望ましいことをユーザー エージェントにヒントします。
    • "auto": オーディオ ストリーム全体を楽観的にダウンロードすることが望ましいと考えられることをユーザー エージェントにヒントします。
  • controls = "controls" または "" (空の文字列) または空は、
    オーディオ ストリームの再生を制御するためのユーザー インターフェイスを公開するようにユーザー エージェントに指示します。
  • loop = "loop" または "" (空の文字列) または空は、
    オーディオ ストリームの最後に達したときに、ユーザー エージェントにオーディオ ストリームの先頭に戻るように指示します。
  • mediagroup = 文字列
    複数のビデオやオーディオ ストリームをリンクするようにユーザー エージェントに指示します。
  • muted = "muted" または "" (空の文字列) または空
    オーディオ ストリームのデフォルトの状態を表し、ユーザー設定を上書きする可能性があります。
  • src = 空でない [URL] スペースで囲まれる可能性があります
    オーディオ ストリームの URL。

例：

対応ブラウザ

PCの場合:

  • グーグルクローム
  • インターネット エクスプローラー 9
  • ファイアフォックス3.5
  • オペラ 10.5
  • サファリ3.1

モバイルデバイスの場合:

  • Android ブラウザ 2.3
  • グーグルクローム
  • インターネット エクスプローラー モバイル 9
  • サファリ4
  • ファイアフォックス
  • Opera モバイル 11

サポートされているオーディオコーディング形式

HTMLオーディオの採用は、HTMLビデオと同様に、フリーフォーマットを支持する派と特許に縛られたフォーマットを支持する派の間で二極化しています。2007年、 W3CはHTML5仕様において、主要なブラウザベンダー全てに受け入れられるフォーマットがないことを理由に、 Vorbisの使用とOgg Theoraの使用の推奨を撤回しました。

AppleとMicrosoftは、 ISO / IECで定義されたフォーマットであるAACと、旧来のMP3をサポートしています。MozillaとOperaは、OggおよびWebMコンテナで、無料かつオープンでロイヤリティフリーのVorbisフォーマットをサポートしており、特許に縛られたMP3とAACが「非フリー」であることが保証されていることを批判しています。Googleはこれまで、すべての一般的なフォーマットをサポートしています。

有限長のAACファイルのほとんどは、MPEG-4コンテナ（.mp4、.m4a）にラップされており、Internet Explorer、Safari、Chromeではネイティブでサポートされており、FirefoxとOperaではOSによってサポートされています。[引用が必要]無限長のAACライブストリームのほとんどは、Audio Data Transport Streamコンテナ（.aac、.adts）にラップされており、Chrome、Safari、Firefox、Edgeでサポートされています。[1] [2] [3]

多くのブラウザはWAV Eコンテナ内の非圧縮PCMオーディオもサポートしています。[4]

2012年には、 IETFによって無料かつオープンなロイヤリティフリーのOpusフォーマットがリリースされ、標準化されました。Mozilla、Google、Opera、Edgeでサポートされています。[4] [5] [6] [7]

この表は、要素によるオーディオ コーディング形式の現在のサポートを示します<audio>。

Web Audio API と MediaStream Processing API

W3Cが策定したWeb Audio API仕様は、Webアプリケーションにおけるオーディオ処理と合成のための高水準JavaScript APIを規定しています。主要なパラダイムはオーディオルーティンググラフであり、複数のAudioNodeオブジェクトが相互に接続されて全体的なオーディオレンダリングを定義します。実際の処理は主に基盤となる実装（通常は最適化されたアセンブリ/C/C++コード）で行われますが、JavaScriptによる直接的な処理と合成もサポートされています。[27]

MozillaのFirefoxブラウザは、 2010年に実装され2011年にリリースされたバージョン4以降、同様のAudio Data API拡張機能を実装していますが[28]、Mozillaはこれが非標準であり非推奨であると警告し、代わりにWeb Audio APIを推奨しています。[29] Audioletなどの一部のJavaScriptオーディオ処理および合成ライブラリは、両方のAPIをサポートしています。

W3Cオーディオワーキンググループは、Mozillaが開発したMediaStream Processing API仕様も検討している。[30]この仕様は、オーディオのミキシングと処理に加えて、HTML要素との同期、オーディオとビデオのストリームのキャプチャ、そのようなメディアストリームのピアツーピアルーティング など、より一般的なメディアストリーミングをカバーしている。[31]

対応ブラウザ

PCの場合:

モバイルデバイスの場合:

ウェブ音声API

Web Speech APIは、 Webアプリケーションにキーボードを使わない代替入力方法を提供することを目的としています。このAPIを使用することで、開発者はWebアプリケーションに、コンピュータのマイクから入力された音声をテキストに変換する機能を提供できます。録音された音声は音声サーバーに送信され、文字起こしされた後、テキストがユーザーに向けて入力されます。このAPI自体は、基盤となる音声認識の実装に依存せず、サーバーベースの認識器と組み込み認識器の両方をサポートできます。[34] HTML Speech Incubatorグループは、統一されたクロスプラットフォームAPIの形で、ブラウザに音声認識技術を実装することを提案しています。このAPIには、以下の2つのAPIが含まれています。[35]

  • 音声入力API
  • テキスト読み上げAPI

Googleは2011年3月にこの機能をGoogle Chromeに統合しました。[36]次のようなコードでユーザーが音声でウェブを検索できるようにしました。 

< script  type = " application / javascript" > function 
startSearch ( event ) { event.target.form.submit ( ) ; } </ script > < form action = "http://www.google.com/search" > < input type = " search" name = " q" speech required onspeechchange = "startSearch" > </ form >

対応ブラウザ

  • Safari 14.1以降[37]
  • Google Chrome 25以上
  • Firefoxデスクトップ版44.0以上（LinuxおよびMac）/45.0以上（Windows）[一部：音声合成のみ、認識なし、49.0以降はデフォルトで有効] [38] [39]

参照

注記

  1. ^ ab ライセンス上の理由により、AACコーデックはネイティブサポートされていません。オーディオファイルのデコードには、ホストOSが互換性のあるライブラリを提供する必要があります。[10]
  2. ^ MPEG-4ファイルには、 メタデータを含むヘッダーと、それに続く「トラック」が含まれます。トラックには、H.264でエンコードされたビデオデータやAACでエンコードされたオーディオデータなど、ビデオデータとオーディオデータが含まれます。一方、ADTSは一連のフレームで構成されるストリーミング形式で、各フレームにはヘッダーとAACデータが続きます。[2]

参考文献

  1. ^ "MP4 コンテナ · Issue #95 · karlheyes/icecast-kh". GitHub . 2022年11月18日閲覧。
  2. ^ ab 「テクニカルノートTN2236:高効率高度オーディオコーディング（HE-AAC）」。
  3. ^ 「1224887 – OpenMax IL AAC オーディオ デコード クライアントを実装する」。
  4. ^ ab 「メディアタイプとフォーマットガイド：画像、音声、動画コンテンツ - Webメディアテクノロジー | MDN」。developer.mozilla.org。
  5. ^ 「2012 年 9 月 11 日: Opus オーディオ コーデックが RFC6716 になり、Opus 1.0.1 リファレンス ソースがリリースされました」。
  6. ^ 「Opus は素晴らしい、そして今ではオーディオ コーデックの標準です! – Mozilla Hacks – Web 開発者ブログ」。
  7. ^ 「WebM、VP9、Opus のサポート - Microsoft Edge 開発者ブログ」Microsoft Edge 開発者ブログ. blogs.windows.com . 2016年4月18日. 2017年3月22日閲覧。
  8. ^ ab 「Chromiumでmp3サポートを有効にする」。Google 。 2018年5月1日閲覧。
  9. ^ 「Firefox 71.0 リリースノート」。Mozilla。2019年12月3日。
  10. ^ 「メディアタイプとフォーマットガイド：画像、音声、動画コンテンツ」Mozilla Developer Network . Mozilla . 2019年12月6日閲覧。
  11. ^ 「1190341 - audio/aacp shoutcast はサポートされていません」。
  12. ^ 「1169212 - MediaDataDemuxer である ADTSDemuxer を作成する」。
  13. ^ ab “Platform Status – Microsoft Edge Developer”. 2021年2月27日時点のオリジナルよりアーカイブ。2020年5月11日閲覧。
  14. ^ abcde 「Microsoft Edge向けOGG VorbisおよびTheoraサポートを備えたWebメディア拡張パッケージのご紹介」Microsoft Edge開発ブログ. Microsoft . 2017年12月5日.
  15. ^ 「Firefox ノート - デスクトップ」。
  16. ^ 「Firefox ノート - デスクトップ」。
  17. ^ ab “Platform Status – Microsoft Edge Developer”. developer.microsoft.com . 2021年2月27日時点のオリジナルよりアーカイブ。2020年5月11日閲覧。
  18. ^ 「Firefox ノート - デスクトップ」。
  19. ^ 「Firefox 28.0、すべての新機能、更新、修正をご覧ください」。
  20. ^ Simmons, Jen (2021年10月26日). 「Safari 15のWebKitの新機能」
  21. ^ 「Apple 開発者ドキュメント」。developer.apple.com。
  22. ^ ab 「<audio>とWebAudioのFLACコーデックサポート」。Chromeプラットフォームステータス。2016年12月27日閲覧。
  23. ^ “Platform Status – Microsoft Edge Developer”. developer.microsoft.com . 2021年2月27日時点のオリジナルよりアーカイブ。 2020年5月11日閲覧。
  24. ^ ab 「開発者向けFirefox 51」。Mozilla Developer Network 。2016年12月27日閲覧。
  25. ^ Chaim Gartenberg (2017年6月6日). 「Apple、iOS 11でFLACロスレスオーディオのサポートを追加と報道」The Verge .
  26. ^ “プラットフォームのステータス – Microsoft Edge 開発者”. 2021年2月27日時点のオリジナルよりアーカイブ。2020年5月11日閲覧。
  27. ^ Chris Rogers (2012年3月15日). 「Web Audio API」. W3C . 2012年7月20日時点のオリジナルよりアーカイブ。 2012年7月4日閲覧。{{cite web}}: CS1 maint: bot: 元のURLステータス不明（リンク）
  28. ^ 「オーディオデータAPI」。
  29. ^ 「Audio API拡張機能の紹介」Mozilla Developer Network . Mozilla . 2012年3月5日. 2012年5月5日時点のオリジナルよりアーカイブ。 2012年7月4日閲覧。
  30. ^ 「Audio Processing API」. W3C . 2011年12月15日. 2012年6月14日時点のオリジナルよりアーカイブ。2012年7月4日閲覧。{{cite web}}: CS1 maint: bot: 元のURLステータス不明（リンク）
  31. ^ Robert O'Callahan (2012年5月31日). 「MediaStream Processing API」. W3C . 2012年7月4日閲覧。
  32. ^ 「Web Audio APIがChromeで利用できるようになりました（Chris Rogers、2011年2月1日投稿、[email protected]、2011年2月より）」lists.w3.org . 2022年11月18日閲覧。
  33. ^ Scott Gilbertson (2011年9月19日). 「Chrome 14、オーディオ性能の向上とネイティブクライアントのサポートを追加」. Webmonkey . Wired . 2012年7月4日閲覧。
  34. ^ 「APIドラフト」 。 2012年1月28日閲覧。
  35. ^ 「HTML5 Speech API」 。 2012年1月28日閲覧。
  36. ^ 「Talking to your computer」 . 2012年1月28日閲覧。
  37. ^ 「Web Speech API – Web API | MDN」 。 2024年5月20日閲覧。
  38. ^ 「開発者向けFirefox 49 – Mozilla | MDN」 。 2024年5月20日閲覧。
  39. ^ 「Web Speech API – Web API | MDN」 。 2024年5月20日閲覧。
  • HTML/要素/オーディオ – W3C Wiki
  • HTML5 オーディオ要素 – W3C
  • ウェブオーディオAPI – W3C
  • メディアストリーム処理API – W3C
  • ウェブ音声API – W3C
  • ウェブオーディオDAW – GitHub
  • Mozilla の Web Audio API