简易音乐播放器
*/ --------------------------------------------------------------------------------------
*/ 出自： 編程中國(guó)? http://www.bc-cn.net
*/ 作者： 編程之星★??? E-mail：rostar@126.com??? QQ：150163704
*/ 時(shí)間： 2007-8-30? 編程論壇首發(fā)
*/ 聲明： 尊重作者勞動(dòng)，轉(zhuǎn)載請(qǐng)保留本段文字
*/ --------------------------------------------------------------------------------------
?
?????????????????????????? 應(yīng)用JAVASCRIPT 之 簡(jiǎn)易網(wǎng)頁(yè)音樂(lè)播放程序
?????????????????????????????????????????????????? —— 編程之星
?????????????????????????????????????????????????????? 2007-8-30
大家好,已經(jīng)有一段時(shí)間沒(méi)有在論壇發(fā)貼了.以前我在論壇發(fā)表一張貼—《菜鳥(niǎo)應(yīng)用JAVASCRIPT 之 簡(jiǎn)單圖片瀏覽》.雖然沒(méi)有人給我回貼,但人氣還算是不錯(cuò)的,而且還讓管理員給加精了,在此要向管理員表示謝意.
那么今天我們來(lái)學(xué)習(xí)一下網(wǎng)頁(yè)音樂(lè)播放程序的原理,這應(yīng)該是大家,特別是初學(xué)者比較感興趣的話(huà)題.我寫(xiě)的這個(gè)程序功能并不全面,而且界面也不美觀(guān),但這張貼旨在討論一下其中的原理,所以就請(qǐng)大家將就一下啦.大家還可以在此基礎(chǔ)上寫(xiě)出一個(gè)功能全面的網(wǎng)頁(yè)播放程序出來(lái).這個(gè)程序運(yùn)行的前提是—電腦上安裝了Windows Media Player.
要想實(shí)現(xiàn)網(wǎng)頁(yè)音樂(lè)播放的效果,就應(yīng)該對(duì)插件(Windows Media Player或Real Player)的屬性和方法有一些了解.這里,我們只討論一些本程序涉及到的Windows Media Player插件的一些屬性和方法.
?????????????????????????????????? Windows Media Player的屬性
???????????????? 屬性名????????????? 屬性值????????????? 作用??????
???????????????? URL???????????????? 歌曲的地址????????? 設(shè)置或返回播放插件播放的歌曲文件地址??????
???????????????? uiMode????????????? None或Mini或Full??? 設(shè)置播放插件是否顯示控制條等??????
???????????????? enableContextMenu?? True或False???????? 設(shè)置播放插件是否顯示右鍵菜單??????
???????????????? controls??????????????????????????????? 播放插件的一個(gè)集合屬性,用來(lái)控制播放等????
??????????????????????? Windows Media Player屬性controls集合的方法
????????????????????????????????????? 方法名??? 作用??????
????????????????????????????????????? play()??? 播放歌曲??????
????????????????????????????????????? pause()?? 暫停歌曲??????
????????????????????????????????????? stop()??? 停止歌曲????
程序測(cè)試連接:
?????? http://rostar.xinwen520.net/簡(jiǎn)易網(wǎng)頁(yè)音樂(lè)播放程序.html
? 把程序的完整源代碼給大家.然后大家只要看代碼中的注釋?xiě)?yīng)該就能理解的啦.如果還不理解的話(huà),那么就看我的解釋,文字可能欠準(zhǔn)確和流暢,請(qǐng)包涵.
<html>
<head>
<script>
//打開(kāi)就播放
function loadPlay()
{
? try{
??? setColor(0);
??? document.WMP.URL=MusicList.options[0].value; //指定(播放)列表中的第一首歌曲
??? document.WMP.controls.play(); //播放
? }catch(e){}
? //try{}catch(e){}表示忽略程序運(yùn)行中出現(xiàn)的錯(cuò)誤
}
//以下函數(shù)獲取當(dāng)前播放歌曲在列表中的索引
function getMusicIndex()
{
? try{
??? var MusicIndex=0; //存儲(chǔ)當(dāng)前播放歌曲的位置
??? /*
???? 遍歷整個(gè)播放列表.
???? 獲取當(dāng)前播放歌曲在列表中的下標(biāo)位置
???? 用document.WMP.URL來(lái)和列表項(xiàng)的值比較
??? */
??? for(i=0;i<MusicList.length;i++)
??? {
????? if(document.WMP.URL==document.all.MusicList.options[i].value)
????? {?????
??????? MusicIndex=i; //記錄下當(dāng)前播放歌曲的位置
??????? break;
????? }???
??? }
??? return MusicIndex; //整個(gè)函數(shù)返回當(dāng)前播放歌曲的下標(biāo)位置
? }catch(e){}
? setTimeout('getMusicIndex()',1000); //每隔1秒就檢測(cè)一下當(dāng)前播放歌曲的位置
}
getMusicIndex(); //調(diào)用getMusicIndex()函數(shù)
//設(shè)置當(dāng)前播放與不播放的歌曲的顏色
function setColor(me)
{
? for(i=0;i<MusicList.length;i++)
? {
??? MusicList.options[i].style.color="purple";
??? if(i==me)
??? {?????
????? MusicList.options[i].style.color="green";?
????? continue;
??? }???
? }
}
//播放上一曲
function playPrevious()
{
?? try{
??? var PlayIndex=getMusicIndex(); //將當(dāng)前播放歌曲的位置存儲(chǔ)到PlayIndex變量中
??? PlayIndex--; //當(dāng)前播放歌曲的位置-1就表示起上一曲的位置
??? setColor(PlayIndex);
??? document.WMP.URL=MusicList.options[PlayIndex].value;
??? document.WMP.controls.play();???
? }catch(e){}
}
//播放下一曲
function playNext()
{
?? try{
??? var PlayIndex=getMusicIndex(); //將當(dāng)前播放歌曲的位置存儲(chǔ)到PlayIndex變量中
??? PlayIndex++; //當(dāng)前播放歌曲的位置+1就表示起下一曲的位置
??? setColor(PlayIndex);
??? document.WMP.URL=MusicList.options[PlayIndex].value;
??? document.WMP.controls.play();???
? }catch(e){}
}
//控制播放,暫停,停止
function control(me)
{
? switch (me)
? {
??? case 1 :? //暫停
????? document.WMP.controls.pause();
????? break;
??? case 2 : //播放
????? document.WMP.controls.play();
????? break;???
??? case 0 : //停止
????? document.WMP.controls.stop();
????? break;???
? }
}
</script>
</head>
<body οnlοad="loadPlay()">
<object id="WMP" classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" width="232" height="200" loop=-1>
<param name="URL">
<param name="uiMode" value="none"><!-- none,mini,full -->
<param name="enableContextMenu" value="false">
</object>
<br>
<button οnclick="control(2)">播放</button>
<button οnclick="control(1)">暫停</button>
<button οnclick="control(0)">停止</button>
<button οnclick="playPrevious()">上一曲</button>
<button οnclick="playNext()">下一曲</button>
<br>
<select id="MusicList" multiple>
<option value="http://down.5458.net/yenja/zy/jwys.mp3">水木年華--借我一生
<option value="http://media3.91vc.com/vc0912/space/2007/05/16/cyzhuiyue/1560247_20070517004036.mp3">水木年華--少年往事
<option value="http://www.m8cool.com/UserFiles/BbsAttachments/2007072219356718750-29B4.mp3">水木年華--別哭,我最?lèi)?ài)的人
</select>
<p>
</body>
</html>
?
?
程序代碼詳細(xì)分析:
? 本程序中共有6個(gè)函數(shù).接下來(lái)我試著向大家一個(gè)個(gè)的分析這些函數(shù).
1.loadPlay()函數(shù)分析:
我們先看看第1個(gè)函數(shù)loadPlay(),這個(gè)函數(shù)表示,一打開(kāi)網(wǎng)頁(yè)就播放插件就播放列表中的第一首歌曲.我們可以可以看到函數(shù)內(nèi)部有這樣的語(yǔ)句try{}catch(e){},這語(yǔ)句是Javascript中捕獲錯(cuò)誤的語(yǔ)句,這里用這個(gè)語(yǔ)句的原因是,如果函數(shù)內(nèi)部用錯(cuò)誤,那么就忽略其運(yùn)行錯(cuò)誤.我們?cè)賮?lái)看這一句setColor(0);這表示調(diào)用另外一個(gè)函數(shù),后面我們會(huì)詳解這個(gè)函數(shù).再看看document.WMP.URL=MusicList.options[0].value;這個(gè)語(yǔ)句表示將列表中的第1項(xiàng)的值賦予給播放插件的URL屬性用作播放插件的播放文件地址,因?yàn)榱斜碇懈黜?xiàng)的值都是一些歌曲的文件地址.接著,我們看到document.WMP.controls.play();這語(yǔ)句進(jìn)行播放操作,因?yàn)樵谏弦粋€(gè)語(yǔ)句中我們已經(jīng)給播放插件指定播放文件的地址了,所以我們就要用到播放插件的集合屬性controls的play()方法來(lái)進(jìn)行播放歌曲.
2. getMusicIndex()函數(shù)分析:
? 這個(gè)函數(shù)表示, 獲取當(dāng)前播放歌曲在列表中的索引.本程序獲取播放歌曲索引的目的就是用來(lái)進(jìn)行播放上一曲和下一曲的操作.我們首先聲音一個(gè)變量MusicIndex,這個(gè)變量屬于局部變量,用來(lái)存儲(chǔ)當(dāng)前播放歌曲的位置(列表中的項(xiàng)目下標(biāo)索引).當(dāng)然我們可以聲音一個(gè)全局變量來(lái)存儲(chǔ),但如果能用局部變量解決問(wèn)題的話(huà),盡量不要使用全局變量,這是一個(gè)好的建議(我在某些地方看到的,嘿嘿).為了取得當(dāng)前播放歌曲在列表中的下標(biāo)位置,我們需要遍歷整個(gè)播放列表,然后用播放插件的URL屬性和列表中各項(xiàng)的值(value屬性值)作比較,如果兩個(gè)一致的話(huà),那么就提取出該項(xiàng)在播放列表中的下標(biāo)位置,這樣我們就要用到for(i=0;i<MusicList.length;i++){…}循環(huán)來(lái)遍歷啦,在這個(gè)for循環(huán)的內(nèi)部,我們用了if語(yǔ)句來(lái)判斷是否符合要求,如果符合了就將當(dāng)前播放歌曲的位置存儲(chǔ)到MusicIndex變量中,然后就退出for循環(huán).接下來(lái),我們可以看到return MusicIndex;這個(gè)語(yǔ)句表明getMusicIndex()函數(shù)返回一個(gè)值,這個(gè)值就是MusicIndex局部變量的值.
3. setColor(me)函數(shù)分析:
? 這個(gè)函數(shù)表示,設(shè)置當(dāng)前播放與不播放的歌曲的顏色,這樣就能夠很清楚的知道正在播放那一首歌曲啦.這函數(shù)有一個(gè)參數(shù)me,這個(gè)參數(shù)是跟當(dāng)前播放歌曲的下標(biāo)有關(guān)的.我們首先用一個(gè)for循環(huán)來(lái)遍歷整個(gè)播放列表,在for循環(huán)的內(nèi)部可以看到這樣的一個(gè)語(yǔ)句: MusicList.options[i].style.color="purple";,這表示將列表中的各項(xiàng)的文字顏色設(shè)置成紫色.接下來(lái)就用一個(gè)if語(yǔ)句塊啦,我們開(kāi)看看if塊中的條件語(yǔ)句i==me,這表示,如果某個(gè)列表中的項(xiàng)的下標(biāo)位置和函數(shù)的參數(shù)me一致的話(huà),那么就將該項(xiàng)的文本顏色設(shè)置成綠色(執(zhí)行MusicList.options[i].style.color="green";)并且開(kāi)始進(jìn)入下半輪的循環(huán)(執(zhí)行continue;并不是重新開(kāi)始循環(huán)!)continue語(yǔ)句就在循環(huán)中的作用就好像你在路上走路時(shí)遇到的一個(gè)石頭,當(dāng)遇到這個(gè)石頭的時(shí)候,你就跨過(guò)它,繼續(xù)往下走 (這是我個(gè)人的愚蠢的理解,專(zhuān)供像我們這些IQ的人用來(lái)記憶理解的,大家也可以不用這么理解,嘿嘿).
4. playPrevious()函數(shù)分析:
? 這個(gè)函數(shù)表示,用來(lái)播放上一首歌曲.我們先看var PlayIndex=getMusicIndex();這表示將getMusicIndex()函數(shù)的返回值(當(dāng)前播放的歌曲的位置)賦值給PlayIndex變量.再看看PlayIndex--;這語(yǔ)句表示PlayIndex的變量值減去1,這樣一來(lái), PlayIndex的值就是當(dāng)前播放歌曲的上一首歌曲的下標(biāo)位置了,接下來(lái)再看, setColor(PlayIndex);這表示調(diào)用setColor(me)函數(shù)來(lái)設(shè)置指定項(xiàng)的文本顏色,不要忘了PlayIndex作為setColor(me)函數(shù)的實(shí)際參數(shù).下面兩句不用再解釋了吧,如果還不十分理解的話(huà),請(qǐng)參考前面的解釋.
5. playNext()函數(shù)分析:
? 請(qǐng)參考playPrevious()函數(shù)分析,兩者的主要也是唯一的差別就是加減號(hào)的使用.
6. control(me)函數(shù)分析:
? 這個(gè)函數(shù)表示,用來(lái)進(jìn)行播放插件的控制操作,如播放,暫停,停止.我們可以看到該函數(shù)內(nèi)部只有switch結(jié)構(gòu)塊, switch結(jié)構(gòu)塊的條件表達(dá)式是采用該函數(shù)的形式參數(shù)me.接下來(lái),我們來(lái)看case 1 ,這表示,如果如果me和1匹配的話(huà),那么就暫停播放(執(zhí)行document.WMP.controls.pause();語(yǔ)句),break;表示退出switch結(jié)構(gòu)塊.依此類(lèi)推,下面的不用解釋了吧!
? 我們?cè)趤?lái)看看HTML代碼中的一句:
<object id="WMP" classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" width="232" height="200" loop=-1>,大家注意<object>標(biāo)記的classid屬性值了! clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6表示在網(wǎng)頁(yè)中加載Windows Media Player插件,這是至關(guān)重要的!??
?
好啦,解釋完畢啦,大家可以放松心情啦,改天記得要寫(xiě)一個(gè)很棒的播放程序出來(lái)哦.
下面供大家下載來(lái)看看.
?
本文來(lái)自CSDN博客，轉(zhuǎn)載請(qǐng)標(biāo)明出處：http://blog.csdn.net/jcc3120/archive/2008/02/15/2096407.aspx
總結(jié)
- 上一篇： 使用Hashcat破解Windows系统
- 下一篇： AD基础知识小课堂