ウェブサイトのBGM実装方法

ウェブサイトのBGM実装方法
個々のウェブマスターにとって、自分のウェブサイトをいかにユニークで個性あふれるものにするかは、常に絶え間ない努力の目標となってきました。ページの視覚効果やインタラクティブ機能を最大限に向上させるだけでなく、Web ページを開いているときに美しく感動的な音楽が聞こえると、Web サイトに彩りが加わると思います。

1. 音楽ファイルの追加方法を学ぶ

一般的に、Web ページにバックグラウンド ミュージックを追加する方法は 2 つあります。1 つは通常の <bgsound> タグを使用して追加する方法で、もう 1 つは <embed> タグを使用して追加する方法です。

1. <bgsound> タグの使用

Dreamweaver を使用して、バックグラウンド ミュージックを追加するページを開き、「コード」をクリックしてコード編集ビューを開き、<body></body> の間に「<」と入力して、ポップアップ コード プロンプト ボックスで bgsound を選択します (図 1)。


Dreamweaver は自動的に「<bgsound」コードを入力し、スペース バーを押します。コード プロンプト ボックスには、選択できる bgsound タグの属性が自動的に表示されます。 bgsound タグには 5 つの属性があり、balance は音楽の左右のバランスを設定するために使用され、delay は再生遅延を設定するために使用され、loop はループの数を制御するために使用され、src は音楽ファイルのパスであり、volume は音量を設定するために使用されます。通常、バックグラウンド ミュージックを追加する場合、音楽の左右のバランスや遅延を設定する必要はないため、いくつかの主要なパラメータのみが必要になります。最終的なコードは次のようになります。

<bgsound src="music.mid" loop="-1">

このうち、loop="-1" は音楽が無限ループで再生されることを意味します。音楽の再生回数を設定したい場合は、対応する数字に変更するだけです。

このバックグラウンド ミュージックを追加する方法は、最も基本的かつ最も一般的に使用される方法です。バックグラウンド ミュージックの形式は、WAV、MID、MP3 など、現在主流の音楽形式のほとんどをサポートしています。インターネット速度が遅い視聴者を考慮したい場合は、MID サウンド効果を Web ページのバックグラウンド ミュージックとして使用できます。MID 音楽ファイルは小さいため、Web ページを開いたときにすばやく読み込んで再生できます。ただし、MID にも欠点があります。音楽のメロディーしか保存できず、美しいハーモニーや歌詞がありません。インターネットの速度が速い場合や、MID の音楽が少し単調だと思う場合は、MP3 の音楽を追加することもできます。上記のコード内の happy.mid を happy.mp3 に変更するだけです。

ヒント: FrontPage でバックグラウンド ミュージックを追加するのは、Dreamweaver よりも比較的簡単です。[背景] ダイアログ ボックスで関連する設定を行うだけです (図 2)。


(ii) <embed>タグの使用

<embed> タグを使用して音楽を追加する方法はあまり一般的ではありませんが、非常に強力です。いくつかの再生コントロールと組み合わせると、Web プレーヤーを作成できます。

使用方法は基本的に最初の方法と同じですが、最初の手順では、コード プロンプト ボックスで gbsound を選択せず​​、代わりに embedded を選択します。次に、そのプロパティを選択し、それに応じて設定します (図 3)。図からわかるように、embed のプロパティは gbsound の 5 つのプロパティよりもはるかに多くあります。最終的なコードは次のようになります: <embed src="music.mp3" autostart="true" loop="true" hidden="true"></embed>。

このうち、autostart はページを開いたときに音楽を自動的に再生するかどうかを設定するために使用され、hidden はメディア プレーヤーを非表示にするかどうかを設定するために使用されます。埋め込みは実際には Web ページ上の音楽プレーヤーのようなもので、非表示になっていない場合は、システムのデフォルトのメディア プラグインが表示されます。

これら 2 つの方法には、それぞれ長所と短所があると思います。最初の方法では、ページを開くと音楽が再生されます。ページを最小化すると、音楽は自動的に一時停止します。2 番目の方法を使用すると、これは発生しません。ウィンドウが閉じられない限り、音楽は再生され続けます。そのため、使用時にはご自身の状況に合わせて音楽の追加方法を選択していただければと思います。

ウェブに音楽を追加する簡単な方法を学んだら、インターフェースと機能に取り組む必要があります。 「Web Music Player」を使用すると、スタイリッシュな音楽プレーヤーを作成できます。

2. スタイリッシュな音楽プレーヤーを作成する

ウェブに音楽を追加する簡単な方法を学んだら、インターフェースと機能に取り組む必要があります。 「Web Music Player」を使用すると、スタイリッシュな音楽プレーヤーを作成できます。

ヒント: 「Web Music Player」は Web ページ プラグインです。作成されたページを実行すると、システムに組み込まれている Windows Media Player が呼び出され、事前に設定された MP3 曲が再生されます。

1. シンプルな設定

まず、再生プラグインをダウンロードし(ダウンロードアドレス:https://www.jb51.net/jiaoben/32793.html)、解凍してディレクトリに入ります。Music.htmはホームページにロードする再生バーページ、list.htmは視聴者がプレイリストを表示するためのポップアップページ、jsフォルダにはいくつかの再生制御ファイルが含まれ、imgにはいくつかの再生インターフェースイメージファイルが含まれます。

Web 編集ソフトウェアを使用して music.htm を開き、次のコードを見つけます。

<script Language="Javascript">
var blnAutoStart = true?
var blnRndPlay = false?
var blnStatusBar = false?
var blnShowVolCtrl = true?
var blnShowPlist = true?
var blnUseSmi = false?
var blnLoopTrk = true?
var blnShowMmInfo =false?
</スクリプト>

ここでプレーヤーの基本設定を行うことができます。上記の文章は、自動再生するかどうか、順番に再生するかどうか、ステータスバーを表示するかどうか、サウンドコントロールの状態を表示するかどうか、プレイリストの表示を許可するかどうか、SMI モードを使用するかどうか、ループ再生するかどうか、曲の情報を表示するかどうかを意味します。必要に応じて設定できます。true は「はい」、false は「いいえ」を意味します。さらに、再生バーをよりパーソナライズするには、music.htm コード内の <marquee>......</marquee> ステートメントを見つけて、ホームページ名を自分のホームページの名前に変更することもできます。

(II) プレイリストを追加する

js フォルダ内のプレイリスト ファイル bglist.js を開くと、お気に入りの曲をここにリストに追加できます。 追加の具体的な形式は、mkList "song path"? "song description"? です。ここで、"song path" はホストにアップロードしたローカル アドレス、またはネットワーク上の MP3 アドレスを指定できます。"song description" は再生バーをスクロールするために使用されます。歌手と曲名を指定できます。たとえば、ジェイ・チョウの「Tornado」を追加する場合は、まずインターネット上でリアルタイムで再生できるリンク アドレスを見つけて、それをリストに追加します: mkList "http://202.102.43.37/hy/yinyue/周杰伦/09.mp3"? "ジェイ・チョウ - Tornado"。

ヒント:ホームページの音楽を常に最新の状態に保つために、プレイリストを定期的に更新することができます。

(III) プレーヤーをインストールする

ホームページリンクをクリックしても曲の再生の継続性が損なわれないようにするために、再生ページ music.htm をフレーム形式でホームページに設置する必要があります。

FrontPage 2003 を例にとると、「新規 → その他の Web ページ テンプレート」を実行して「Web ページ テンプレート」ウィンドウをポップアップし、「フレーム Web ページ → フッター」を選択し、「OK」をクリックして、上部フレームの初期 Web ページをホームページに、下部フレームを music.htm に設定するように設定します。次に、フレームのプロパティでフレームの境界線を削除し、下部フレームの高さを適切に調整します (図 4)。フレームの高さは、再生バーの高さに十分対応できる必要があります。プレビューに満足したら、ページを保存し、Web サイトをこの新しいページに向けることができます。

<<:  LeetCode の SQL 実装 (184. 部門内で最も高い給与)

>>:  実践的な経験を共有するためのコードチェックツールstylelintの紹介

推薦する

特定のシンボルで複数の行と列に分割するMySQLの例

一部の障害コード テーブルでは、履歴またはパフォーマンス上の理由から、次の設計パターンが使用されます...

各グループの最新データを取得するためにMySQLベースのグループを実装する

序文:グループ化関数はグループ内の最初のデータを取得しますが、各グループ内の最新のデータを取得する必...

Linux (Centos7) での redis5 クラスターの構築と使用方法の詳細な説明

目次1. 簡単な説明2. クラスターを作成する手順2.1. ディレクトリを作成する2.2. ソースコ...

入力テキストボックスの長さをコンテンツに応じて変更する方法

初め:コードをコピーコードは次のとおりです。 <input type="text&q...

Web インタビュー Vue カスタム コンポーネントと呼び出しメソッド

輸入:プロジェクトの要件により、同じコードの一部をコンポーネントにカプセル化し、必要な場所にインポー...

WeChatアプレットはシンプルな計算機を実装する

参考までにWeChatアプレットで書かれた簡単な計算機です。具体的な内容は次のとおりです。 jisa...

nginx を最適化する 6 つの方法

1. Nginxの同時実行性を最適化する [root@proxy ~]# ab -n 2000 -c...

伝説的な VUE 構文シュガーは何をするのでしょうか?

目次1. 糖衣構文とは何ですか? 2. VUE の構文糖とは何ですか? 1. 最も一般的な構文シュガ...

Vueはv-modelを使用してel-paginationコンポーネントのプロセス全体をカプセル化します。

v-model を使用してページング情報オブジェクトをバインドします。ページング情報オブジェクトに...

Windows での MySQL インストール チュートリアル (画像とテキスト付き)

MySQL インストール手順 MySQL は、スウェーデンの MySQL AB によって開発された...

Zabbixを使用してOracleテーブルスペースの操作プロセスを監視する

0. 概要Zabbix は非常に強力なオープンソースの監視ツールです。以下では、Zabbix がテー...

Dockerのデフォルトネットワークセグメントを変更する実装方法の分析

背景同社のサーバーはすべて Alibaba Cloud ECS ホストを購入しています。デフォルトの...

HTML テーブルの空白セル補完を実装する方法

私が初めて Web 開発を独学で学んだ頃は、いわゆる DIV/CSS レイアウトはなく、テーブル レ...

IntelliJ IDEA に Docker プラグインをインストールする詳細な手順 (2018 バージョン)

目次1. 開発環境2. dockerプラグインをインストールする1. アイデアのインストール2. イ...

MySQL InnoDB ReplicaSet の簡単な紹介

目次01 InnoDBレプリカセットの紹介02 InnoDBレプリカセットの制限03 導入前に知って...