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

WebページにBGM（バックグラウンドミュージック）を追加する方法

BGMを追加する基本的な方法

Webページにバックグラウンドミュージック（BGM）を追加するには、<embed>…</embed>要素を使用します。さらにautostart属性を指定することで、ページが読み込まれるたびに音楽が自動的にバックグラウンドで再生されます。

プレイヤーをページ上に表示したくない場合は、width属性とheight属性の値を極端に小さく設定することで、プレイヤーを見えなくできます。また、loop属性を追加すれば、音声を最初から繰り返し再生するかどうかを指定できます。音楽ファイルはあらかじめサーバーにアップロードし、そのURLをsrc属性に指定してください。

WebページにBGM（バックグラウンドミュージック）を追加する方法

コード例

以下のコードを実行すると、WebページにBGMを追加できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML 背景音楽</title>
   </head>
   <body>
      <p>音楽がバックグラウンドで再生されています。</p>
      <p>（曲名：Kalimba／Windowsのサンプルミュージック）</p>
      <embed src="/html/Kalimba.mp3" loop="true" autostart="true" width="2" height="0">
   </body>
</html>

補足：HTML5では<audio>要素の使用が推奨

なお、<embed>要素は現在では非標準の扱いになっており、HTML5以降では<audio>要素を使うのが一般的です。以下のように記述するだけで、よりシンプルにBGMを実装できます。

<audio src="/html/Kalimba.mp3" autoplay loop></audio>

autoplay属性で自動再生、loop属性で繰り返し再生が可能です。ただし、最近のブラウザの多くは、ユーザーの操作がない状態での音声の自動再生を制限している点に注意しましょう。実際のサイトでは、ユーザーのクリックをトリガーに再生を開始する設計にするなど、快適な閲覧体験を損なわない工夫を行うことをおすすめします。

  1. Kodiに音楽を追加する方法｜スキン変更からアドオン導入・管理まで完全ガイド

    Kodiというソフトウェアをご存じでしょうか？まだ使ったことがないなら、デジタルライフを快適にしてくれる最強アプリを見逃しているかもしれません。メディアアプリの整理は面倒で後回しにしがちですが、Kodiを使えばプリインストール済みのアプリもサードパーティ製のものも一括でコントロールできます。旧称XBMCとして知られるKodiは、オープンソースで無料のプラットフォームであり、動画・写真・映画・ポッドキャスト・ストリーミングなどを視聴できます。まさにワンストップのデジタルエンターテインメントハブです。この記事では、Kodiで音楽を追加する方法をわかりやすく解説します。 Kodiに音楽を追加する

  2. 【初心者向け】Facebookプロフィールに音楽を追加する方法｜曲のピン留め・ストーリー設定も解説

    「音楽は世界共通の言語」とよく言われます。言葉だけでは伝えきれない思いも、音楽なら的確に伝えられるものです。そして嬉しいことに、お気に入りのSNSであるFacebookでも、プロフィールに好きな音楽を表示できるようになりました。あなたのプロフィールを訪れた人が、あなたの好きな曲を知ることができるのです。この記事では、その設定方法を詳しくご紹介します。 自分の雰囲気や人柄をぴったり表してくれる一曲、ありませんか？Facebookの新機能を使えば、そうした曲をプロフィールに追加して、あなたの音楽のセンスをアピールしつつ、フィードにも彩りを添えられます。しかも追加の手順はとても簡単。まだ試したことが