ホームページ > 記事 > ウェブフロントエンド > html5のaudioでサポートされている音声形式の解決策

html5のaudioでサポートされている音声形式の解決策

青灯夜游転載: 2018-10-09 15:56:206239ブラウズ

HTML5 Audio タグは、wav、mp3、ogg、acc、webm などの形式をサポートできますが、主要なブラウザにはサポートが組み込まれていない非常に重要な音楽ファイル形式 midi (拡張子 Mid) があります。著作権の問題により、すべてのブラウザが MP3 OGG などをサポートしているわけではありません。この記事では、HTML5 でオーディオをサポートするためのソリューションを紹介します。興味のある方はぜひご覧ください。困っている友人は参考にしていただければ幸いです。

ブラウザとオーディオの互換性

すべてのブラウザのメーカーが特定のオーディオファイル形式の使用に同意しているわけではありません。画像の場合、PNG、JPEG、または GIF 形式のファイルがどのブラウザでもページに読み込まれます。残念ながら、これはオーディオファイルには当てはまりません。表 1 は、Web ページで使用できる音声ファイル形式を示していますが、すべての形式がすべてのブラウザで使用できるわけではありません。たとえば、Chrome、Internet Explorer 9 (IE9)、および Safari ブラウザは、非圧縮形式を使用する減少傾向の標準である WAV ファイルをサポートしていません。

HTML5 ブラウザとオーディオ形式の互換性

##オーディオ形式Chrome FirefoxIE9OperaSafari##OGGMP3WAV#サポートされていませんすべてのブラウザが単一のファイル形式を使用するという普遍的なファイル形式はありません。少なくとも 2/5 のブラウザでは特定のサウンドを再生できなくなるということです。これはブラウザメーカーが頑固で単一のオーディオ規格に合意できないという問題ではなく、むしろ特許権とロイヤルティを含む法的および財務上の問題です。ソフトウェア特許による制限を受けない OGG フォーマットは、この問題を完全に解決することを目的としています。ただし、この記事の執筆時点では、Opera も Safari も OGG をサポートしていません。 OGG 形式のファイルよりも利用可能な WAV および MP3 ファイルの方がはるかに多いため、ブラウザの製造元がこれを考慮していることは間違いありません。事実上の標準としての MP3 は優れたソリューションです。


サポート	サポート	サポートされている	サポートされていません	サポートされていません
サポートされています	サポートされていません	サポートされている	サポートされていない	サポートされている
サポートされていない	サポートされている	サポートされていません	サポートされています

解決策: 3 つのファイルタイプと b97864c2e0ef2353a16c4d64c7734e92 タグを使用します

現在の状況を考えると、まだそうはなっていないと思われるかもしれません。 HTML5 ページでオーディオを使用する絶好の瞬間です。これはある意味では真実かもしれませんが、HTML5 は、お気に入りのブラウザが互換性のある形式を見つけられるようにするソリューションを提供します。

b97864c2e0ef2353a16c4d64c7734e92 タグと組み合わせて使用すると、e02da388656c3265154666b7c71a8ddc タグを b97864c2e0ef2353a16c4d64c7734e92 コンテナ内にネストできます。あなたがワーグナーのファンで、彼のオペラ「ワルキューレの騎行」を HTML5 ページで聴きたいとします。まず、OGG、MP3、WAV という 3 つのファイル形式で音楽を取得する必要があります。これらの音楽ファイルを HTML5 ファイルと同じフォルダーに配置します。次に、各ファイル名を個別の e02da388656c3265154666b7c71a8ddc タグに置き、オーディオコンテナ内のすべてのソースタグは、以下に示すように b97864c2e0ef2353a16c4d64c7734e9281d2bc32cafa2076a27f10cdd878d0ab で構成されます。

<audio controls>
    <source src=”http://demo.mimvp.com/html5/take_you_fly.ogg” />
    <source src=”http://demo.mimvp.com/html5/take_you_fly.mp3″ />
    <source src=”http://demo.mimvp.com/html5/take_you_fly.wav” />
</audio>

訪問者がどのブラウザを使用しているかに関係なく、最初に読み取ったファイルの種類が自動的に選択され、サウンドが再生されます。

概要

上記は、ご紹介した HTML5 でのオーディオサポートオーディオ形式ソリューションの完全な内容です。お役に立てば幸いです。学ぶことは誰にとっても役立ちます。関連チュートリアルの詳細については、Html5 ビデオチュートリアル

をご覧ください。

html5のaudioでサポートされている音声形式の解決策

関連記事