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

推薦する

CSS のマージンの崩壊問題を解決する方法

まず、マージン崩壊が発生する 3 つの状況を見てみましょう。 1. 隣接する 2 つのブロックレベル...

JavaScript キャンバス テキスト クロック

この記事では、テキストクロックを実装するためのキャンバスの具体的なコードを例として紹介します。具体的...

HTMLおよびJSPページがキャッシュされ、Webサーバーから再取得されるのを防ぎます。

ユーザーがログアウトした後、ブラウザの戻るボタンがクリックされると、Web アプリケーションは保護さ...

HTML webpackプラグインの使用に関する簡単な分析

html-webpack-pluginプラグインを使用してページを開始すると、htmlページをメモリ...

Ubuntu 19.04 インストール チュートリアル (画像とテキストの手順)

1. 準備1.1 VMware 15 をダウンロードしてインストールするダウンロード リンク: h...

MySQL がテーブルを読み取れないエラー (MySQL 1018 エラー) の解決方法

1. エラーの再現MySQL データベースにはアクセスできますが、データベース テーブルを読み取るこ...

mysql 行列変換サンプルコード

1. 需要3 つのテーブルがあります。一定期間にわたるさまざまな抗生物質感受性の結果、つまり rep...

サーバー上でjupyterノートブックを実行する問題を解決する

目次サーバーはjupyterノートブックを実行します仮想環境次にファイアウォールをオフにしますJup...

Pure CSS と Flutter はそれぞれブリージング ライト効果を実現します (サンプル コード)

前回、非常に熱心なファンから、月を呼吸する光の効果にできるかどうか尋ねられました。月の大きさの写真が...

VUEの基本を理解するのに役立つ記事

目次VUEとはVueのコアプラグインVueルーターヴュークスアクシオス要素UI Vue フロントエン...

HTML+CSSは、要素の位置までスクロールして読み込みアニメーション効果を表示します。

要素までスクロールするたびに読み込みアニメーションを追加するにはどうすればよいですか?初期パラメータ...

nginx のスムーズな再起動を実装する方法

1. 背景サーバーの開発プロセスでは、新しいコードや構成をロードするためにサービスを再起動することが...

Zookeeper 不正アクセス テストの問題

目次序文Zookeeper サービスのオープンを検出情報を入手する接続テスト接続先修理計画参照する序...

Bash スクリプトでの配列メソッドの作成と使用の概要

Bashで配列を定義するbash スクリプトで新しい配列を作成する方法は 2 つあります。 1 つ目...

モバイルブラウザが位置をサポートしない場合の解決策: 修正

具体的な方法は以下の通りです。 CSSコードコードをコピーコードは次のとおりです。 .wap_bot...