背景のHTML音楽コードを追加する方法

...

ユーザーが閲覧しながら楽しむために、Webサイトにバックグラウンドミュージックを追加します。

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

ステップ1

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

今日のビデオ

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

ステップ2

音楽ファイルを繰り返し再生する場合は、「loop」属性を追加します。

ステップ3

ユーザーのブラウザに複数のファイル形式の選択肢を提供する場合は、「audio」タグの「src」属性の代わりに複数の「source」タグを使用します。

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

ステップ4

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

ヒント

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