網(wǎng)站背景音樂實(shí)現(xiàn)方法

發(fā)布時(shí)間：2014-04-09 21:35:06 作者：佚名

有時(shí)候我們需要為個(gè)人網(wǎng)站上加上個(gè)性的背景音樂，突顯個(gè)性，其實(shí)添加背景音樂挺簡(jiǎn)單額，大家可以參考下面的方法

對(duì)于個(gè)人站長(zhǎng)來說，如何能使自己的網(wǎng)站與眾不同、充滿個(gè)性，一直是不懈努力的目標(biāo)。除了盡量提高頁面的視覺效果、互動(dòng)功能以外，如果能在打開網(wǎng)頁的同時(shí)，聽到一曲優(yōu)美動(dòng)人的音樂，相信這會(huì)使你的網(wǎng)站增色不少。

　　一、學(xué)會(huì)添加音樂文件

　　為網(wǎng)頁添加背景音樂的方法一般有兩種，第一種是通過普通的<bgsound>標(biāo)簽來添加，另一種是通過<embed>標(biāo)簽來添加。

　　（一）使用<bgsound>標(biāo)簽

　　用Dreamweaver打開需要添加背景音樂的頁面，點(diǎn)擊“代碼”打開代碼編輯視圖，在<body></body>之間輸入“<”在彈出的代碼提示框中選擇bgsound(圖1)。

　　Dreamweaver自動(dòng)輸入“<bgsound”代碼后按空格鍵，代碼提示框會(huì)自動(dòng)將bgsound標(biāo)簽的屬性列出來供你選擇使用。bgsound標(biāo)簽共有五個(gè)屬性，其中balance是設(shè)置音樂的左右均衡，delay是進(jìn)行播放延時(shí)的設(shè)置，loop是循環(huán)次數(shù)的控制，src則是我們音樂文件的路徑，volume是音量設(shè)置。一般在添加背景音樂時(shí)，我們并不需要對(duì)音樂進(jìn)行左右均衡以及延時(shí)等設(shè)置，所以僅需要幾個(gè)主要的參數(shù)就可以了。最后的代碼如下：

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

　　其中，loop="-1"表示音樂無限循環(huán)播放，如果你要設(shè)置播放次數(shù)，則改為相應(yīng)的數(shù)字即可。

　　這種添加背景音樂的方法是最基本的方法，也是最為常用的一種方法，對(duì)于背景音樂的格式支持現(xiàn)在大多的主流音樂格式，如WAV、MID、MP3等。如果要顧及到網(wǎng)速較低的瀏覽者，則可以使用MID音效作為網(wǎng)頁的背景音樂，因?yàn)镸ID音樂文件小，這樣在網(wǎng)頁打開的過程中能很快加載并播放，但是MID也有不足的地方，它只能存放音樂的旋律，沒有好聽的和聲以及唱詞。如果你的網(wǎng)速較快，或是覺得MID音樂有些單調(diào)，也可以添加MP3的音樂。只要將上述代碼中的happy.mid改為happy.mp3即可。

　　提示：在FrontPage中加入背景音樂要比Dreamweaver相對(duì)方便一些，只要在“背景”對(duì)話框中進(jìn)行相關(guān)設(shè)置即可(圖2)。

　　（二）使用<embed>標(biāo)簽

　　使用<embed>標(biāo)簽來添加音樂的方法并不是很常見，但是它的功能非常強(qiáng)大，如果結(jié)合一些播放控件就可以打造出一個(gè)Web播放器。

　　它的使用方法與第一種基本一樣，只是第一步的代碼提示框里不要選擇gbsound，改而選擇embed即可。然后再選擇它的屬性進(jìn)行相應(yīng)的設(shè)置(圖3)，從圖中可看出embed的屬性比gbsound的五個(gè)屬性多許多。最后的代碼如下：<embed　src="music.mp3"　autostart="true"　loop="true"　hidden="true"></embed>。

　　其中autostart用來設(shè)置打開頁面時(shí)音樂是否自動(dòng)播放，而hidden設(shè)置是否隱藏媒體播放器。因?yàn)閑mbed實(shí)際上類似一個(gè)Web頁面的音樂播放器，所以如果沒有隱藏，則會(huì)顯示出你系統(tǒng)默認(rèn)的媒體插件的。

　　對(duì)于這兩種方法，筆者認(rèn)為二者之間都各有優(yōu)缺點(diǎn)：第一種方法當(dāng)頁面打開時(shí)音樂播放，如果將頁面最小化以后播放音樂會(huì)自動(dòng)暫停，如果使用第二種方法則不會(huì)出現(xiàn)這種情況，只要不將窗口關(guān)閉，它會(huì)一直播放。所以希望大家在運(yùn)用過程中根據(jù)自己的情況來選擇添加音樂的方法。

　　學(xué)會(huì)了簡(jiǎn)單的添加網(wǎng)頁音樂方法后，就應(yīng)該在界面和功能上下點(diǎn)功夫了。我們可以利用《網(wǎng)頁音樂播放器》打造一個(gè)時(shí)尚的音樂播放器。

二、打造時(shí)尚音樂播放器

　　學(xué)會(huì)了簡(jiǎn)單的添加網(wǎng)頁音樂方法后，就應(yīng)該在界面和功能上下點(diǎn)功夫了。我們可以利用《網(wǎng)頁音樂播放器》打造一個(gè)時(shí)尚的音樂播放器。

　　提示：《網(wǎng)頁音樂播放器》是一個(gè)網(wǎng)頁插件，運(yùn)行制作好的頁面后，它會(huì)調(diào)用系統(tǒng)自帶的Windows　Media播放器來播放事先設(shè)定好的MP3歌曲。

　　（一）簡(jiǎn)單設(shè)置

　　首先下載播放插件(下載地址：http://www.dbjr.com.cn/jiaoben/32793.html)，解壓后進(jìn)入目錄，其中music.htm就是我們要在主頁上加載的播放條頁面，list.htm是瀏覽者用于查看播放列表的彈出頁面，js文件夾里存放的是幾個(gè)播放控制文件，img里則是一些播放界面的圖片文件。

　　使用網(wǎng)頁編輯軟件打開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?
　　</script>

　　在這里可以對(duì)播放器進(jìn)行基本的設(shè)置。以上各句依次含義是：是否自動(dòng)播放，是否循序播放，是否顯示狀態(tài)欄，是否顯示音控狀態(tài)，是否允許顯示播放清單，是否使用SMI模式，是否循環(huán)播放，是否顯示歌曲信息。你可以根據(jù)自己的需要對(duì)它們進(jìn)行設(shè)置，其中true為“是”，false為“否”。另外，為了使你的播放條更具個(gè)性色彩，你還可以在music.htm代碼中找到<marquee>　......</marquee>語句，將其中的主頁名稱修改為你自己主頁的名稱。

　　（二）添加播放列表

　　打開js文件夾中的播放列表文件bglist.js，在這里就可以把你喜歡的歌曲添加到列表上來了，具體的添加格式為mkList"歌曲路徑"?　"歌曲說明"?，其中“歌曲路徑”可以是你上傳到主機(jī)上的本地地址，也可以指定網(wǎng)絡(luò)上的MP3地址，“歌曲說明”是用來滾動(dòng)顯示在播放條上的，可以是演唱者和歌曲的名稱。比如要添加周杰倫的《龍卷風(fēng)》，我們先在網(wǎng)絡(luò)上找到可以實(shí)時(shí)播放的鏈接地址，然后再把它添加到列表上：mkList"http://202.102.43.37/hy/yinyue/周杰倫/09.mp3"?"周杰倫——龍卷風(fēng)"。

　　提示：為了保持你的主頁音樂常聽常新，我們可以間隔一段時(shí)間就對(duì)播放列表更新一次。

　　（三）安裝播放器

　　為了防止點(diǎn)擊主頁鏈接而影響歌曲播放的連續(xù)性，我們要把播放頁面music.htm以框架形式安裝到主頁上去。

　　以FrontPage　2003為例，執(zhí)行“新建→其他網(wǎng)頁模板”彈出“網(wǎng)頁模板”窗口，選擇“框架網(wǎng)頁→頁腳”，“確定”后在上框架里設(shè)置初始網(wǎng)頁指向你的主頁，下框架里則指向music.htm，然后在框架屬性中去掉框架邊框并適當(dāng)調(diào)整下框架的高度(圖4)，框架高度足以容納播放條的高度即可。預(yù)覽滿意后就可以保存頁面了，然后把你的網(wǎng)站指向這個(gè)新頁面就可以了。