首頁 web前端 html教學 網站背景音樂實作方法_HTML/Xhtml_網頁製作

網站背景音樂實作方法_HTML/Xhtml_網頁製作

May 16, 2016 pm 04:38 PM

對個人站長來說,如何能讓自己的網站與眾不同、充滿個性,一直是不懈努力的目標。除了盡量提升頁面的視覺效果、互動功能以外,如果能在開啟網頁的同時,聽到一曲優美動人的音樂,相信這會讓你的網站增色不少。

  一、學會添加音樂檔案

  為網頁添加背景音樂的方法一般有兩種,第一種是透過普通的標籤來添加,另一種是透過標籤來新增。

  (一)使用標籤

  用Dreamweaver開啟需要新增背景音樂的頁面,點選「程式碼」開啟程式碼編輯視圖,在之間輸入「


  Dreamweaver自動輸入「
  

  其中,loop="-1"表示音樂無限循環播放,如果你要你要設定播放次數,則改為對應的數字即可。

  這種加入背景音樂的方法是最基本的方法,也是最為常用的一種方法,對於背景音樂的格式支援現在大多的主流音樂格式,如WAV、MID、MP3等。如果要顧及到網速較低的瀏覽者,則可以使用MID音效作為網頁的背景音樂,因為MID音樂檔案小,這樣在網頁開啟的過程中能很快載入並播放,但是MID也有不足的地方,它只能存放音樂的旋律,沒有好聽的和聲以及唱詞。如果你的網路速度較快,或是覺得MID音樂有些單調,也可以加入MP3的音樂。只要將上述程式碼中的happy.mid改為happy.mp3即可。

  提示:在FrontPage中加入背景音樂要比Dreamweaver相對方便一些,只要在「背景」對話框中進行相關設定即可(圖2)。


  (二)使用標籤

  使用標籤來新增音樂的方法並不是很常見,但是它的功能非常強大,如果結合一些播放控制就可以打造出Web播放器。

  它的使用方法與第一種基本一樣,只是第一步的程式碼提示框裡不要選擇gbsound,改而選擇embed即可。然後再選擇它的屬性進行對應的設定(圖3),從圖中可看出embed的屬性比gbsound的五個屬性多許多。最後的程式碼如下:

  其中autostart用來設定打開頁面時音樂是否自動播放,而hidden設定是否隱藏媒體播放器。因為embed實際上類似一個Web頁面的音樂播放器,所以如果沒有隱藏,則會顯示出你係統預設的媒體插件的。

  對於這兩種方法,筆者認為二者之間都各有優缺點:第一種方法當頁面打開時音樂播放,如果將頁面最小化以後播放音樂會自動暫停,如果使用第二種方法則不會出現這種情況,只要不將視窗關閉,它就會一直播放。所以希望大家在運用過程中依照自己的狀況來選擇添加音樂的方法。

  學會了簡單的加入網頁音樂方法後,就應該在介面和功能上下點功夫了。我們可以利用《網頁音樂播放器》打造一個時尚的音樂播放器。

    二、打造時尚音樂播放器

  學會了簡單的添加網頁音樂方法後,就應該在介面和功能上下點功夫了。我們可以利用《網頁音樂播放器》打造一個時尚的音樂播放器。

  提示:《網頁音樂播放器》是一個網頁插件,運行製作好的頁面後,它會呼叫系統自帶的Windows Media播放器來播放事先設定好的MP3歌曲。

  (一)簡單設定

  先下載播放外掛程式(下載位址:http://www.jb51.net/jiaoben/32793.html),解壓縮後進入目錄,其中music.htm就是我們要在主頁上加載的播放條頁面,list.htm是瀏覽者用於查看播放清單的彈出頁面,js資料夾裡存放的是幾個播放控製文件,img裡則是一些播放介面的圖片檔。

  使用網頁編輯軟體開啟music.htm,找到以下程式碼:

  <script><br />  var blnAutobage="Javascript"><br />  var 3 = false <br />  var blnStatusBar = false <br />  var blnShowVolCtrl = true<br />  var blnShowPlist = true<br />  var blnUseSmi = false<br />  var blnLoopTrk = true<br />  var blnShowMmInfo =false<br /> </script>

  在這裡可以對播放器進行基本的設定。以上各句依序意義為:是否自動播放,是否循序播放,是否顯示狀態欄,是否顯示音控狀態,是否允許顯示播放清單,是否使用SMI模式,是否循環播放,是否顯示歌曲資訊。你可以根據自己的需求對它們進行設置,其中true為“是”,false為“否”。另外,為了讓你的播放條更具個性色彩,你也可以在music.htm代碼中找到 ......語句,將其中的主頁名稱修改為你自己主頁的名稱。

  (二)新增播放清單

  開啟js資料夾中的播放清單檔案bglist.js,在這裡就可以把你喜歡的歌曲加入清單上來了,具體的新增格式為mkList "歌曲路徑" "歌曲說明",其中「歌曲路徑」可以是你上傳到主機上的本地地址,也可以指定網路上的MP3位址,「歌曲說明」是用來捲動顯示在播放條上的,可以是演唱者和歌曲的名稱。例如要加入周傑倫的《龍捲風》,我們先在網路上找到可以即時播放的連結位址,然後再把它加到清單上:mkList "http://202.102.43.37/hy/yinyue/周杰倫/09. mp3""周杰倫-龍捲風"。

  提示:為了保持你的主頁音樂常聽常新,我們可以間隔一段時間就對播放清單更新一次。

  (三)安裝播放器

  為了防止點擊主頁連結而影響歌曲播放的連續性,我們要把播放頁面music.htm以框架形式安裝到主頁上去。

  以FrontPage 2003為例,執行“新建→其他網頁模板”彈出“網頁模板”窗口,選擇“框架網頁→頁腳”,“確定”後在上框架裡設置初始網頁指向你的首頁,下方框架中則指向music.htm,然後在框架屬性中去掉框架邊框並適當調整下框架的高度(圖4),框架高度足以容納播放條的高度即可。預覽滿意後就可以儲存頁面了,然後把你的網站指向這個新頁面就可以了。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1655
14
CakePHP 教程
1413
52
Laravel 教程
1306
25
PHP教程
1252
29
C# 教程
1226
24
HTML容易為初學者學習嗎? HTML容易為初學者學習嗎? Apr 07, 2025 am 12:11 AM

HTML適合初學者學習,因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩,易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高,可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML,CSS和JavaScript的角色:核心職責 HTML,CSS和JavaScript的角色:核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

Gitee Pages靜態網站部署失敗:單個文件404錯誤如何排查和解決? Gitee Pages靜態網站部署失敗:單個文件404錯誤如何排查和解決? Apr 04, 2025 pm 11:54 PM

GiteePages靜態網站部署失敗:404錯誤排查與解決在使用Gitee...

HTML中起始標籤的示例是什麼? HTML中起始標籤的示例是什麼? Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

如何用CSS3和JavaScript實現圖片點擊後周圍圖片散開並放大效果? 如何用CSS3和JavaScript實現圖片點擊後周圍圖片散開並放大效果? Apr 05, 2025 am 06:15 AM

實現圖片點擊後周圍圖片散開並放大效果許多網頁設計中,需要實現一種交互效果:點擊某張圖片,使其周圍的...

HTML,CSS和JavaScript:Web開發人員的基本工具 HTML,CSS和JavaScript:Web開發人員的基本工具 Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構,使用標籤如、等。 2.CSS控製網頁樣式,使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互,通過事件監聽和DOM操作。

網頁批註如何實現Y軸位置的自適應佈局? 網頁批註如何實現Y軸位置的自適應佈局? Apr 04, 2025 pm 11:30 PM

網頁批註功能的Y軸位置自適應算法本文將探討如何實現類似Word文檔的批註功能,特別是如何處理批註之間的間�...

See all articles