あなたのウェブサイトにバックグラウンドオーディオ/音楽を追加する方法

autoplayに注目してください 属性。これは、ユーザーがWebページにアクセスするとすぐにオーディオの再生を開始する場合に必要です。

デモ： 例を聞くには、コンピューター/ヘッドフォンの音量を下げて、このデモをクリックしてください。

HTMLでサポートされているオーディオ形式には、MP3、WAV、OGGの3つがあります。 内 typeでフォーマットを指定する要素 属性：

このチュートリアルではWAV形式を使用しているため、 type ="audio / wav"を追加しました。 上記の要素の属性。

オーディオ要素の属性

以下は、 に組み込まれているいくつかの便利な属性です。 要素、およびきめ細かい制御を提供します。

ループバックグラウンドオーディオ

バックグラウンドオーディオをループするには、 loopを追加します 属性：

<audio autoplay loop>
  <source src="your-audio-file.wav" type="audio/wav" />
</audio>

バックグラウンドオーディオをミュート

バックグラウンドオーディオをミュートするには、 muteを追加します 属性：

<audio muted>
  <source src="your-audio-file.wav" type="audio/wav" />
</audio>

mutedを使用する理由 属性？ウェブページから要素全体を削除せずに、オーディオ要素のオーディオソースを一時的に無効にして、後で再びオンにすることをお勧めします。

コントロールインターフェースを追加

コントロール（再生、一時停止など）を追加するには、コントロールを使用します 属性：

<audio controls>
  <source src="your-audio-file.wav" type="audio/wav" />
</audio>

これで、ユーザーはオーディオファイルを聞きたい場合に[再生]をクリックできます。

オーディオ形式のブラウザサポート

• MP3はすべてのブラウザでサポートされています
• WAVはEdge/IEを除くすべてのブラウザでサポートされています
• OGGは、Edge/IEとSafariを除くすべてのブラウザーでサポートされています

2020年7月現在。

ヒント： を追加します に エンドユーザーがプライマリファイル形式をサポートしていないブラウザを使用している場合のフォールバックとしての要素：

<audio controls>
  <source src="your-audio-file.wav" type="audio/wav" />
  <source src="your-audio-file.mp3" type="audio/mpeg" />
</audio>

これで、エンドユーザーのブラウザがWAV形式をサポートしていない場合、代わりにMP3ソースが再生されます。