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