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

一、學(xué)會添加音樂文件
為網(wǎng)頁添加背景音樂的方法一般有兩種,第一種是通過普通的<bgsound>標(biāo)簽來添加,另一種是通過<embed>標(biāo)簽來添加。
(一)使用<bgsound>標(biāo)簽
用Dreamweaver打開需要添加背景音樂的頁面,點擊“代碼”打開代碼編輯視圖,在<body></body>之間輸入“<”在彈出的代碼提示框中選擇bgsound(圖1)。
Dreamweaver自動輸入“<bgsound”代碼后按空格鍵,代碼提示框會自動將bgsound標(biāo)簽的屬性列出來供你選擇使用。bgsound標(biāo)簽共有五個屬性,其中balance是設(shè)置音樂的左右均衡,delay是進(jìn)行播放延時的設(shè)置,loop是循環(huán)次數(shù)的控制,src則是我們音樂文件的路徑,volume是音量設(shè)置。一般在添加背景音樂時,我們并不需要對音樂進(jìn)行左右均衡以及延時等設(shè)置,所以僅需要幾個主要的參數(shù)就可以了。最后的代碼如下:
<bgsound src="music.mid" loop="-1">
其中,loop="-1"表示音樂無限循環(huán)播放,如果你要設(shè)置播放次數(shù),則改為相應(yīng)的數(shù)字即可。
這種添加背景音樂的方法是最基本的方法,也是最為常用的一種方法,對于背景音樂的格式支持現(xiàn)在大多的主流音樂格式,如WAV、MID、MP3等。如果要顧及到網(wǎng)速較低的瀏覽者,則可以使用MID音效作為網(wǎng)頁的背景音樂,因為MID音樂文件小,這樣在網(wǎng)頁打開的過程中能很快加載并播放,但是MID也有不足的地方,它只能存放音樂的旋律,沒有好聽的和聲以及唱詞。如果你的網(wǎng)速較快,或是覺得MID音樂有些單調(diào),也可以添加MP3的音樂。只要將上述代碼中的happy.mid改為happy.mp3即可。
提示:在FrontPage中加入背景音樂要比Dreamweaver相對方便一些,只要在“背景”對話框中進(jìn)行相關(guān)設(shè)置即可(圖2)。
(二)使用<embed>標(biāo)簽
使用<embed>標(biāo)簽來添加音樂的方法并不是很常見,但是它的功能非常強(qiáng)大,如果結(jié)合一些播放控件就可以打造出一個Web播放器。
它的使用方法與第一種基本一樣,只是第一步的代碼提示框里不要選擇gbsound,改而選擇embed即可。然后再選擇它的屬性進(jìn)行相應(yīng)的設(shè)置(圖3),從圖中可看出embed的屬性比gbsound的五個屬性多許多。最后的代碼如下:<embed src="music.mp3" autostart="true" loop="true" hidden="true"></embed>。
其中autostart用來設(shè)置打開頁面時音樂是否自動播放,而hidden設(shè)置是否隱藏媒體播放器。因為embed實際上類似一個Web頁面的音樂播放器,所以如果沒有隱藏,則會顯示出你系統(tǒng)默認(rèn)的媒體插件的。
對于這兩種方法,筆者認(rèn)為二者之間都各有優(yōu)缺點:第一種方法當(dāng)頁面打開時音樂播放,如果將頁面最小化以后播放音樂會自動暫停,如果使用第二種方法則不會出現(xiàn)這種情況,只要不將窗口關(guān)閉,它會一直播放。所以希望大家在運用過程中根據(jù)自己的情況來選擇添加音樂的方法。
學(xué)會了簡單的添加網(wǎng)頁音樂方法后,就應(yīng)該在界面和功能上下點功夫了。我們可以利用《網(wǎng)頁音樂播放器》打造一個時尚的音樂播放器。
二、打造時尚音樂播放器
學(xué)會了簡單的添加網(wǎng)頁音樂方法后,就應(yīng)該在界面和功能上下點功夫了。我們可以利用《網(wǎng)頁音樂播放器》打造一個時尚的音樂播放器。
提示:《網(wǎng)頁音樂播放器》是一個網(wǎng)頁插件,運行制作好的頁面后,它會調(diào)用系統(tǒng)自帶的Windows Media播放器來播放事先設(shè)定好的MP3歌曲。
(一)簡單設(shè)置
首先下載播放插件(下載地址:http://www.dbjr.com.cn/jiaoben/32793.html),解壓后進(jìn)入目錄,其中music.htm就是我們要在主頁上加載的播放條頁面,list.htm是瀏覽者用于查看播放列表的彈出頁面,js文件夾里存放的是幾個播放控制文件,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>
在這里可以對播放器進(jìn)行基本的設(shè)置。以上各句依次含義是:是否自動播放,是否循序播放,是否顯示狀態(tài)欄,是否顯示音控狀態(tài),是否允許顯示播放清單,是否使用SMI模式,是否循環(huán)播放,是否顯示歌曲信息。你可以根據(jù)自己的需要對它們進(jìn)行設(shè)置,其中true為“是”,false為“否”。另外,為了使你的播放條更具個性色彩,你還可以在music.htm代碼中找到<marquee> ......</marquee>語句,將其中的主頁名稱修改為你自己主頁的名稱。
(二)添加播放列表
打開js文件夾中的播放列表文件bglist.js,在這里就可以把你喜歡的歌曲添加到列表上來了,具體的添加格式為mkList"歌曲路徑"? "歌曲說明"?,其中“歌曲路徑”可以是你上傳到主機(jī)上的本地地址,也可以指定網(wǎng)絡(luò)上的MP3地址,“歌曲說明”是用來滾動顯示在播放條上的,可以是演唱者和歌曲的名稱。比如要添加周杰倫的《龍卷風(fēng)》,我們先在網(wǎng)絡(luò)上找到可以實時播放的鏈接地址,然后再把它添加到列表上:mkList"http://202.102.43.37/hy/yinyue/周杰倫/09.mp3"?"周杰倫——龍卷風(fēng)"。
提示:為了保持你的主頁音樂常聽常新,我們可以間隔一段時間就對播放列表更新一次。
(三)安裝播放器
為了防止點擊主頁鏈接而影響歌曲播放的連續(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)站指向這個新頁面就可以了。
相關(guān)文章
- HTML表格用于在網(wǎng)頁上展示數(shù)據(jù),通過標(biāo)簽及其相關(guān)標(biāo)簽來創(chuàng)建,表格由行和列組成,每一行包含一個或多個單元格,單元格可以包含文本、圖像、鏈接等元素,本文將詳細(xì)介紹HTML表格2025-03-12
- 本文介紹了三種禁止HTML頁面滾動的方法:通過CSS的overflow屬性、使用JavaScript的滾動事件監(jiān)聽器以及使用CSS的position:fixed屬性,每種方法都有其適用場景和優(yōu)缺點,感興2025-02-24
- 在 Web 開發(fā)中,文本的視覺效果是提升用戶體驗的重要因素之一,通過 CSS 技巧,我們可以創(chuàng)造出許多獨特的效果,例如文字鏤空效果,本文將帶你一步一步實現(xiàn)一個簡單的文字鏤空2024-11-17
Html去除a標(biāo)簽的默認(rèn)樣式的操作代碼
在Html中,a標(biāo)簽?zāi)J(rèn)的超鏈接樣式是藍(lán)色字體配下劃線,這可能不滿足所有設(shè)計需求,如需去除這些默認(rèn)樣式,可以通過CSS來實現(xiàn),本文給大家介紹Html去除a標(biāo)簽的默認(rèn)樣式的操作代碼2024-09-25- 在HTML中,可以通過設(shè)置CSS的resize屬性為none,來禁止用戶手動拖動文本域(textarea)的大小,這種方法簡單有效,適用于大多數(shù)現(xiàn)代瀏覽器,但需要在老舊瀏覽器中進(jìn)行測試以確保2024-09-25
如何通過HTML/CSS 實現(xiàn)各類進(jìn)度條的功能
本文詳細(xì)介紹了如何利用HTML和CSS實現(xiàn)多種風(fēng)格的進(jìn)度條,包括基礎(chǔ)的水平進(jìn)度條、環(huán)形進(jìn)度條以及球形進(jìn)度條等,還探討了如何通過動畫增強(qiáng)視覺效果,內(nèi)容涵蓋了使用HTML原生標(biāo)簽2024-09-19- Canvas 提供了一套強(qiáng)大的 2D 繪圖 API,適用于各種圖形繪制、圖像處理和動畫制作,可以幫助你創(chuàng)建復(fù)雜且高效的網(wǎng)頁圖形應(yīng)用,這篇文章主要介紹了HTML中Canvas關(guān)鍵知識點總結(jié)2024-06-03
html table+css實現(xiàn)可編輯表格的示例代碼
本文主要介紹了html table+css實現(xiàn)可編輯表格的示例代碼,主要使用HTML5的contenteditable屬性,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)2024-03-06- 本文主要介紹了HTML中使用Flex布局實現(xiàn)雙行夾批效果,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)2024-02-22
- 在網(wǎng)站開發(fā)中,登錄頁面是必不可少的一部分,本文就來介紹一下HTML+CSS實現(xiàn)登錄切換,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需2024-02-02