HTMLオーディオ

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。

例: [ 1 ]

<オーディオコントロール> < source src = "https://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4" type = "audio/mp4" /> < source src = "https://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga" type = "audio/ogg; codecs=vorbis" /> < p >お使いのユーザー エージェントは HTML5 Audio 要素をサポートしていません。</ p > </ audio >

対応ブラウザ

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でサポートされています。[ 2 ] [ 3 ] [ 4 ]

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

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

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

さまざまなウェブブラウザでサポートされている形式
形式 容器 MIMEタイプ クロムインターネットエクスプローラー角ファイアフォックスオペラサファリ
PCMWAVオーディオ/wavはいいいえはいはい、v3.5でははい、v11.00でははい、v3.1では
MP3MP3オーディオ/MPEGはい[ 9 ]はい、IE9でははいはい、71節にあります[ 10 ]はい[ 9 ]はい、v3.1では
AACMP4オーディオ/mp4はいはい、IE9でははいOSから[ a ]はいはい
ADTS [ b ]オーディオ/aacオーディオ/aacpはいいいえはいOS [ a ] v45.0より[ 12 ] [ 13 ]はいはい
ヴォルビスオッグオーディオ/oggはい、v9ではいいえv79では[ 14 ]、v17ではWeb Media Extensions [ 15 ]はい、v3.5では[ 16 ]はい、v10.50ではXiph QuickTimeコンポーネント（macOS 10.11以前）
ウェブMオーディオ/WebMはいいいえv79では[ 14 ]、v17ではWeb Media Extensions [ 15 ]はい、v4.0では[ 17 ]はい、v10.60ではいいえ
オーパスオッグオーディオ/oggはい、v25 では可能です（Windows の場合は v31 です）。いいえv79では[ 18 ]、v17ではWeb Media Extensions [ 15 ]はい、v15.0では[ 19 ]はい、v14ではいいえ
ウェブMオーディオ/WebMはいいいえv79では[ 18 ]、v17ではWeb Media Extensions [ 15 ]はい、v28.0では[ 20 ]はいはい、Safari 15以降とmacOS Montereyでは可能です[ 21 ] [ 22 ]
カナダ空軍オーディオ/x-cafいいえいいえいいえいいえいいえはい、Safari 11とmacOS High Sierraでは可能です
FLACFLACオーディオ/flacはい、56節にあります[ 23 ]いいえはい、16節にあります[ 24 ]はい、51節にあります[ 25 ]はいはい、11節では[ 26 ]
オッグオーディオ/oggはい、56節にあります[ 23 ]いいえv79では[ 27 ]、v17ではWeb Media Extensions [ 15 ]はい、51節にあります[ 25 ]はいいいえ

Web Audio API と MediaStream Processing API

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

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

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

対応ブラウザ

PCの場合:

  • Google Chrome 10 [ 33 ]（14以降デフォルトで有効化[ 34 ]）
  • Firefox 23 (25以降はデフォルトで有効)
  • オペラ15
  • サファリ6
  • マイクロソフトエッジ12
  • オペラGX 36

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

  • Android 28 向けGoogle Chrome（29 以降はデフォルトで有効）および Apple iPad
  • Safari 6 (使用制限あり (ユーザーが呼び出した場合以外はミュートされます))
  • Firefox 23 (25以降はデフォルトで有効)
  • タイゼン

ウェブ音声API

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

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

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

< 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以降
  • Google Chrome 25以上
  • Firefox デスクトップ 44.0 以上 (Linux および Mac) / 45.0 以上 (Windows) [一部: 音声合成のみ、認識なし、49.0 以降はデフォルトで有効]

参照

注記

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

参考文献

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