ウェブサイトの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の紹介

推薦する

Apache Bench で Web ストレス テストを実装する方法

1. Apache Benchの紹介ApacheBench は、Apache サーバーに付属する W...

MySQL 主キー ID を生成する方法 (自己増分、一意、不規則)

目次1. uuid関数を使用して、一意かつ不規則な主キーIDを生成します。 2. idの自動成長1....

IE9 のネイティブ ページ互換性の問題に対する解決策についての簡単な説明

序文最近、クライアントのネイティブページを引き継ぎました。顧客は、ページが IE9 以降のバージョン...

MySQL5.7.27-winx64 バージョン win10 のダウンロードとインストールのチュートリアル図

MySQL 5.7 のインストール私たちは学校で MySQL データベースを学んでいます。先生は私た...

docker tagとdocker pushの使い方の詳しい説明

Dockerタグの詳しい説明docker tag コマンドの使い方と、ローカルイメージを daocl...

MySQLにおける分散ロックの考え方をDBの助けを借りて詳しく説明します

序文スタンドアロン ロックであっても分散ロックであっても、共有データに基づいて現在の操作の動作を判断...

VSCode の Remote-SSH を使用して Linux に接続し、リモート開発を行う

Remote-SSHをインストールして設定するまず VSCode を開き、拡張機能を見つけて、Rem...

Vueはタブナビゲーションバーを実装し、左右のスライド機能をサポートしています

この記事では主に、Vue を使用してタブ ナビゲーション バーを実装し、flex レイアウトを使用し...

検証コードケースのJavaScript実装

この記事では、検証コードの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...

JS 継承の詳細

目次序文準備する要約する継承方法プロトタイプ継承プロトタイプチェーン継承コンストラクタの借用(クラス...

オブジェクト内のフィールドを削除する js メソッド

この記事では主に、オブジェクト内のフィールドを削除するための js の実装を紹介し、次のように共有し...

React で Antd の Form コンポーネントを使用してフォーム機能を実装する方法

1. 構造部品1. フォームには、入力コントロール、標準フォーム フィールド、ラベル、ドロップダウン...

小さなページングデザイン

ユーザーが目的のものを探すために前進するか後退するかを選択できるようにします。たとえば、Taobao...

MySQL の一時テーブルと派生テーブルについての簡単な説明

派生テーブルについてメイン クエリに派生テーブルが含まれている場合、または SELECT ステートメ...

EXPLAIN コマンドの詳細な説明と MySQL での使用方法

1. シナリオの説明: 同僚から MySQL で explain を使用する方法を教わったので、返さ...