一種基于JavaScript的網頁在線播放列表

摘 要: 隨著網絡技術的發展，當前出現了許多網絡在線視聽播放，而大多數網絡在線視聽播放只是為用戶提供在線鏈接視聽，沒有為用戶提供在線播放列表。本文作者設計了一種基于JavaScript的網頁播放列表，可以保存用戶喜歡的節目，并且用戶可以自己編輯，豐富了網頁在線視聽的功能。

關鍵詞: RealPlayer控件 Windows Media player控件 JavaScript 網頁播放器 在線播放列表

1.引言

為了實現用戶的對網頁播放器的操作而不過多增加客戶對服務器的操作，網頁播放器可以采用ActiveX技術實現，把媒體播放器控件嵌入到網頁中，然后通過編程語言來對控件進行控制以實現視聽播放。用Real Player控件實現的網頁播放器可播放大部分與微軟Windows Media Player兼容的媒體檔案格式，當中包括非串流處理的檔案類型和串流處理的檔案類型。網頁播放器支持以循序及隨機方式來播放媒體項目的功能，支持以正常方式及倒數方式動態顯示曲目的時間長度;前者表示曲目已播放的時間，后者表示曲目剩余的時間。

2.做網頁在線播放列表所使用的技術簡介

2.1ActiveX控件在網頁中的應用

ActiveX技術對網絡的發展有著重要的作用。網頁播放器和網頁在線播放列表的實現主要得益于ActiveX技術和腳本語言。ActiveX控件用于網頁的過程是將控件嵌入主頁中，用戶通過瀏覽器訪問該主頁時，將主頁中的控件下載，并在用戶機器上注冊，以后就可在用戶的瀏覽器上運行。

2.2Real Player控件部分PARAM參數含義

Name:Autostart Value:True或是False作用:指定是否自動播放指定的源文件。

Name:Height Value:任何整數值作用:指定RealPlayer元素的高度，單位:像素。

Name:Loop Value:True或是False作用:可以讓你指定片斷是否無限循環。

Name:Nologo Value:True或是False作用:避免RealPlayer啟動時在圖像窗口中顯示。

Name:Scriptcallbacks Value:用逗號分割的列表作用:指定瀏覽器的回調監控。

Name:Src Value:合法的URL地址作用:指定播放的文件或是源文件的地址。

2.3JavaScript語言簡介

當我們把ActiveX控件嵌入到網頁中要它實現一定的功能，必須要用一種腳本語言進行控制。JavaScript是一種基于對象和事件驅動并具有安全性能的腳本語言，具有以下幾個基本特點:(1)是一種腳本編寫語言;(2)是基于對象的語言;(3)簡單性;(4)安全性;(5)動態性;(6)跨平臺性。

3.網頁在線播放列表的設計

3.1網頁在線播放列表的結構

整個網頁在線播放列表主要由網頁播放器、網頁在線播放列表、bglist.js文件三個模塊組成。網頁在線播放列表的內容寫在一個獨立的文檔中(bglist.js)，用戶可以把喜歡的節目都保存在這個文件中。bglist.js是一個Javascript文檔。用戶對播放列表的各種操作都是通過該文件進行。

3.2網頁在線播放器的制作

為了制作一個功能豐富的網頁播放器，我們必須要用到腳本語言對ActiveX控件進行控制。播放器的外觀可用網頁制作工具(如DreamweaverMX)制作一個。把這個網頁播放器的主框架保存為music.htm。而各種播放功能則由幾個輔助文件bglist.js、cnsidebud.js、imgchg.js、time.js來實現。

其中bglist.js這個文件主要是存放媒體文件的路徑和信息，當網頁播放器啟動時會先調用此文件，然后網頁播放器通過該文件中的曲目順序來連接曲目進行播放。bglist.js這個文件由多個mkList()函數組成。該函數格式是:mkList(“歌曲路徑”，“歌曲信息”，“間隔時間”，“是否加載列表(留空為加載，不加載填f)”)。cnsidebud.js文件里有許多的函數，對網頁播放器進行初始化函數initExobud()，初始化函數首先為網頁播放器動態的連接庫函數wmp.dll(Windows Media Player播放器庫函數)，為網頁播放器建立環境設定。然后查找在線播放列表上已經勾選的曲目進行連接播放。

本播放器是利用流播放事件實現的。

3.3網頁在線播放列表的制作

首先用DreamweaverMX制作一個播放列表網頁，保存為list.htm，這個頁面中只需含有播放列表的背景和外框，內部沒有任何內容，在運行時動態地調用顯示控制播放列表函數(dspList(n))來顯示在線播放列表上的曲目。

顯示控制播放列表函數(dspList(n))主要是根據bglist.js這個文件來決定在線播放列表上顯示的曲目內容，在線播放列表對曲目的控制功能主要也是由dspList(n)函數實現的。這個函數首先定義一個變量elmABlock，這個變量主要是控制在線播放列表上一次顯示曲目的數量。totElm這個變量是統計在線播放列表上曲目的總數。totBlock這個變量是統計在線播放列表的頁數。totBlock的值可以由Math.floor((via.intMmCnt-1)/elmABlock)得到。Math.floor(n)是一系統個函數，它的作用是返回一個不大于n的最大整數。Cblock變量表示在線播放列表顯示的當前頁。

用戶可通過通過Add標簽和Del標簽對在線播放列表里的曲目進行添加和刪除。為了用戶更好地添加視聽曲目，我把許多視聽曲目的路徑都保存在一個用Access創建的數據庫中，取名為yule。此數據庫中的幾個表分別用來存放Flash、歌曲、音樂及電影等資源的URL。同時還建立一個名為user的數據庫，在數據庫里面建立一個用戶信息表register。這個表里面記錄了用戶的相關信息當用戶把在線播放列表的內容保存到用戶信息表中，以后用戶再登錄時用戶就可以打開上次保存的在線播放列表進行播放。

4.結語

通過JavaScript調用、控制ActiveX控件，能很好地實現客戶端的各種視聽播放功能，同時盡可能地減輕了服務器的負擔。本在線播放列表的最大優點是用戶可以定制，運行時幾乎不占用服務器時間。由于是基于腳本語言JavaScript，當用戶禁止執行腳本時系統將會無法實現上述功能，這是使用腳本語言的一個缺陷。因此本在線播放列表只適合在安全級別要求不高的場合使用。

參考文獻:

[1]吳靜，王鵬，魯云.爪哇奇遇——JavaScript網絡編程實例.北京:中國電力出版社，2004:1-13.

[2]蔣民.Javascript實例、技巧與應用.北京:清華大學出版社，2006:274-275.