文/孤獨笑愛上一條魚
對於個人站長來說,如何能讓自己的網站與眾不同、充滿個性,一直是不懈努力的目標。除了盡量提升頁面的視覺效果、互動功能以外,如果能在開啟網頁的同時,聽到一曲優美動人的音樂,相信這會讓你的網站增色不少。
一、學會添加音樂檔案
為網頁添加背景音樂的方法一般有兩種,第一種是透過普通的< bgsound>標籤來添加,另一種是透過< embed>標籤來添加。
(一)使用< bgsound>標籤
用Dreamweaver開啟需要新增背景音樂的頁面,點選「程式碼」開啟程式碼編輯視圖,在< body>< /body>之間輸入「< 」在彈出的程式碼提示框中選擇bgsound (圖1)。
圖1
Dreamweaver自動輸入「< bgsound」代碼後按空白鍵,代碼提示框會自動列出bgsound標籤的屬性來供你選擇使用。 bgsound標籤共有五個屬性,其中balance是設定音樂的左右均衡,delay是進行播放延遲的設置,loop是循環次數的控制,src則是我們音樂檔案的路徑,volume是音量設定。一般在加入背景音樂時,我們並不需要對音樂進行左右均衡以及延時等設置,所以只需要幾個主要的參數就可以了。最後的程式碼如下:
< bgsound src="music.mid" loop="-1">
其中,loop="-1"表示音樂無限循環播放,如果你要設定播放次數,則改為對應的數字即可。
這種加入背景音樂的方法是最基本的方法,也是最常用的一種方法,對於背景音樂的格式支援現在大多的主流音樂格式,如WAV、MID、MP3等。如果要顧及到網速較低的瀏覽者,則可以使用MID音效作為網頁的背景音樂,因為MID音樂檔案小,這樣在網頁開啟的過程中能很快載入並播放,但是MID也有不足的地方,它只能存放音樂的旋律,沒有好聽的和聲以及唱詞。如果你的網路速度較快,或是覺得MID音樂有些單調,也可以加入MP3的音樂。只要將上述程式碼中的happy.mid改為happy.mp3即可。
提示:在FrontPage中加入背景音樂要比Dreamweaver相對方便一些,只要在「背景」對話方塊中進行相關設定即可(圖2)。
圖2
(二)使用< embed>標籤
使用< embed>標籤來添加音樂的方法並不是很常見,但是它的功能非常強大,如果結合一些播放控制就可以打造出一個Web播放器。
它的使用方法與第一種基本一樣,只是第一步的程式碼提示框裡不要選擇gbsound,改而選擇embed即可。然後再選擇它的屬性進行對應的設定(圖3),從圖中可看出embed的屬性比gbsound的五個屬性多許多。最後的程式碼如下:< embed src="music.mp3" autostart="true" loop="true" hidden="true">< /embed>。
圖3
其中autostart用來設定開啟頁面時音樂是否自動播放,而hidden設定是否隱藏媒體播放器。因為embed實際上類似一個Web頁面的音樂播放器,所以如果沒有隱藏,則會顯示出你係統預設的媒體插件的。
對於這兩種方法,筆者認為二者之間都各有優缺點:第一種方法當頁面打開時音樂播放,如果將頁面最小化以後播放音樂會自動暫停,如果使用第二種方法則不會出現這種情況,只要不將視窗關閉,它就會一直播放。所以希望大家在運用過程中依照自己的狀況來選擇添加音樂的方法。
學會了簡單的加入網頁音樂方法後,就應該在介面和功能上下點功夫了。我們可以利用《網頁音樂播放器》打造一個時尚的音樂播放器。
二、打造時尚音樂播放器
學會了簡單的添加網頁音樂方法後,就應該在介面和功能上下點功夫了。我們可以利用《網頁音樂播放器》打造一個時尚的音樂播放器。
提示:《網頁音樂播放器》是一個網頁插件,運行製作好的頁面後,它會呼叫系統自帶的Windows Media播放器來播放事先設定好的MP3歌曲。
(一)簡單設定
先下載播放外掛程式(下載位址:http?//www.mh.fy.cn/soft/music.rar),解壓縮後進入目錄,其中music.htm就是我們要在首頁載入的播放條頁面,list.htm是瀏覽者用來查看播放清單的彈出頁面,js資料夾裡存放的是幾個播放控製文件,img裡則是一些播放介面的圖片檔案。
使用網頁編輯軟體開啟music.htm,找到以下程式碼:
< script Language="Javascript">
var blnAutoStart = true?
varblnRndPlay = false?
var blnStatusBar = false?
var blnShowVolCtrl = truetrue?
varblnShowPlist =
true? varPlist
?
var blnLoopTrk = true?
var blnShowMmInfo =false?
< /script>
在這裡可以對播放器進行基本的設定。以上各句依序意義為:是否自動播放,是否循序播放,是否顯示狀態欄,是否顯示音控狀態,是否允許顯示播放清單,是否使用SMI模式,是否循環播放,是否顯示歌曲資訊。你可以根據自己的需求對它們進行設置,其中true為“是”,false為“否”。另外,為了讓你的播放條更具個性色彩,你也可以在music.htm代碼中找到< marquee> ......< /marquee>語句,將其中的主頁名稱修改為你自己主頁的名稱。
(二)加入播放清單
開啟js資料夾中的播放清單檔案bglist.js,在這裡就可以把你喜歡的歌曲加入清單上來了,具體的新增格式為mkList "歌曲路徑"? "歌曲說明"? ,其中「歌曲路徑」可以是你上傳到主機上的本機位址,也可以指定網路上的MP3位址,「歌曲說明」是用來捲動顯示在播放條上的,可以是唱者和歌曲的名稱。例如要加入周傑倫的《龍捲風》,我們先在網路上找到可以即時播放的連結位址,然後再把它加到清單上:mkList " http://202.102.43.37/hy/yinyue/周杰倫/09.mp3 "?"周杰倫-龍捲風"。
提示:為了保持你的主頁音樂常聽常新,我們可以間隔一段時間就對播放清單更新一次。
(三)安裝播放器
為了防止點擊主頁連結而影響歌曲播放的連續性,我們要把播放頁面music.htm以框架形式安裝到主頁上去。
以FrontPage 2003為例,執行“新建→其他網頁模板”彈出“網頁模板”窗口,選擇“框架網頁→頁腳”,“確定”後在上框架裡設置初始網頁指向你的主頁,下框架裡則指向music.htm,然後在框架屬性中去掉框架邊框並適當調整下框架的高度(圖4),框架高度足以容納播放條的高度即可。預覽滿意後就可以儲存頁面了,然後把你的網站指向這個新頁面就可以了。
圖4