[原创]菜鸟应用JAVASCRIPT 之简易网页音乐播放程序 - JavaScript论坛

编程之星

等　级：职业侠客
威　望：2
帖　子：285
专家分：391
注　册：2007-4-10

楼主

问题点数：0 回复次数：18

[原创]菜鸟应用JAVASCRIPT 之简易网页音乐播放程序

*/ --------------------------------------------------------------------------------------
*/ 出自：编程中国 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 onload="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">
<param name="enableContextMenu" value="false">
</object>
<br>
<button onclick="control(2)">播放</button>
<button onclick="control(1)">暂停</button>
<button onclick="control(0)">停止</button>
<button onclick="playPrevious()">上一曲</button>
<button onclick="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插件,这是至关重要的!