バックグラウンド HTML ミュージック コードを追加する方法

World Wide Web の初期の頃から、Web ページに音楽を埋め込むさまざまな方法が普及してきました。特に、HTML の「embed」タグ、Java ベースのオーディオ プレーヤー、および Flash ベースのプレーヤーはすべて、Web ページにバックグラウンド ミュージックを追加するためのオプションとして利用できますが、すべてのブラウザーやプラットフォームと完全に互換性がある、または普遍的に受け入れられているソリューションはありません。 .新しい HTML5 標準には、埋め込みオーディオ再生用に特別に定義された「audio」タグが含まれています。

ステップ 1

次のコードを HTML ドキュメントの本文の任意の場所に追加して、音楽ファイルを埋め込み、訪問者が Web サイトを閲覧したときに自動的に再生します。

埋め込みたい音楽ファイルのパスとファイル名が含まれるように「src」属性を変更します。

ステップ 2

音楽ファイルを何度も再生したい場合は、"loop" 属性を追加してください:

ステップ 3

ユーザーのブラウザに複数のファイル形式の選択肢を提供したい場合は、「audio」タグの「src」属性の代わりに複数の「source」タグを使用してください:

この例では、ユーザーのブラウザが MP3 ファイルと OGG ファイルのどちらを再生するかを決定します。この手法は、特定のオーディオ形式のみを再生できるモバイル デバイスをターゲットにする場合に役立ちます。

ステップ 4

「embed」タグを「audio」タグ内にネストして、HTML5 をサポートしていない古いブラウザーをサポートします。この「embed」タグの使用は非推奨であることに注意してください (つまり、公式にサポートする必要がなくなったことを意味します)。そのため、ユーザーが古い Web ブラウザーを使用していると思われる場合にのみ、この手法を試すようにしてください。以下に例を示します:

ヒント

ユーザーが音楽を停止して音量を変更できるようにするには、「controls」属性を「audio」タグに追加することを検討してください。さらに、このブラウザの動作に正当な理由がない限り、「autoplay」属性を使用しないことを検討してください。多くのユーザーは、許可なく予期せず再生される埋め込みバックグラウンド ミュージックを煩わしく感じ、すぐに Web サイトを離れてしまいます。