HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

Webページのバックグラウンドでサウンドファイルを再生する方法

Webページに音声を組み込むには、HTMLの<audio>要素を使用します。一方、ページのバックグラウンドでサウンドファイルを再生したい場合は、<embed>〜</embed>要素を使う方法があります。

<embed>要素にautoplay属性（autostart属性）を指定すると、ページが読み込まれたタイミングで自動的に音楽の再生が始まります。これにより、訪問者がページを開くたびにBGMが流れる仕組みを作れます。

プレイヤーを非表示にする設定

width属性とheight属性に極端に小さな値を設定することで、プレイヤーをWebページ上に見えないようにできます。これにより、画面には何も表示されず、音だけがバックグラウンドで流れる状態になります。

また、loop属性を追加すると、音声が終了した後に最初からもう一度再生されるかどうか（ループ再生の有無）を指定できます。「true」を設定すれば、曲がエンドレスで繰り返し再生されます。

コード例

以下のコードを実行すると、Webページのバックグラウンドでサウンドファイルを再生できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML background music</title>
   </head>
   <body>
      <p>The music is running in the background.</p>
      <p>(Song: Kalimba which is provided as a Sample Music in Windows)</p>
      <embed src="/html/Kalimba.mp3" loop="true" autostart="true" width="2"
         height="0">
   </body>
</html>

補足：現代的な実装について

<embed>要素によるBGM再生はやや古い手法です。現在の標準的な開発では、<audio>要素にautoplay属性やloop属性を組み合わせて使うことが推奨されています。ただし、近年の主要ブラウザには自動再生を制限するポリシーが存在するため、実際のサイトではユーザーがボタンをクリックした際に再生を開始するなど、操作を起点とした設計にすることが一般的です。

  1. YouTubeをバックグラウンドで再生する方法|Androidで無料で実現する2つのテクニック

    YouTubeは今や説明不要の定番サービスとなり、子供から大人まで幅広い世代に利用されています。もはやテレビに取って代わる存在だと言っても過言ではありません。 映画やドキュメンタリー、お笑い番組の視聴はもちろん、音楽ストリーミングとして活用している人も多いのではないでしょうか。 ところが、AndroidスマホでYouTubeの音楽を聴きながら他の作業をしたいとき、思わぬ壁にぶつかります。PCでは画面を切り替えても音声が流れ続けますが、Androidではアプリを切り替えたり画面を消したりすると再生が止まってしまうのです。 この問題を解決するには、有料プラン「YouTube Premium」のバッ

  2. 【保存版】Android・iOSでYouTubeをバックグラウンド再生する方法

    YouTubeは世界で最も視聴されている動画プラットフォームですが、スマホの画面をロックした状態(=バックグラウンド)で音楽を再生するのは意外と難しいものです。画面をロックした瞬間にYouTubeは自動的に再生を停止してしまうため、ロック中に動画や音楽を聴き続けることができません。しかも、YouTubeアプリ内にはこの問題を解決する設定項目が用意されていません。Googleは有料サブスクリプションという選択肢を提供していますが、対応地域が限られていたり月額費用がかかったりと、誰もが気軽に使えるものではありませんでした。なぜYouTubeをバックグラウンドで再生したいのか?バックグラウンド再生が