减小字体
增大字体- ·上一篇文章：纯javascript联动的例子
- ·下一篇文章：用javascript仿163邮箱网盘多文件上传用户控件
菜鸟应用JAVASCRIPT 之 简易网页音乐播放程序
原帖及讨论：
*/ --------------------------------------------------------------------------------------
*/ 出自： 编程中国 http://www.bc-cn.net
*/ 作者： 编程之星★ E-mail：rostar@126.com QQ：150163704
*/ 时间： 2007-8-30 编程首发
*/ 声明： 尊重作者劳动，转载请保留本段文字
*/ --------------------------------------------------------------------------------------
菜鸟应用SCRIPT 之 简易网页音乐播放程序
—— 编程之星
2007-8-30
大家好,已经有一段时间没有在论坛发贴了.以前我在发表一张贴—《菜鸟应用SCRIPT 之 简单图片浏览》.虽然没有人给我回贴,但人气还算是不错的,而且还让管理员给加精了,在此要向管理员表示谢意.
那么今天我们来学习一下网页音乐播放程序的原理,这应该是大家,特别是初学者比较感兴趣的话题.我写的这个程序功能并不全面,而且界面也不美观,但这张贴旨在讨论一下其中的原理,所以就请大家将就一下啦.大家还可以在此基础上写出一个功能全面的网页播放程序出来.这个程序运行的前提是—电脑上安装了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 Playercontrols集合的方法
方法名 作用
play() 播放歌曲
pause() 暂停歌曲
stop() 停止歌曲
程序测试连接:
程序.html" target=_blank>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 >
<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 >播放</button>
<button >暂停</button>
<button >停止</button>
<button >上一曲</button>
<button >下一曲</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){},这语句是script中捕获错误的语句,这里用这个语句的原因是,如果函数内部用错误,那么就忽略其运行错误.我们再来看这一句setColor(0);这表示调用另外一个函数,后面我们会详解这个.再看看document.WMP.URL=MusicList.options[0].value;这个语句表示将列表中的第1项的值赋予给播放插件的URL属性用作播放插件的播放文件地址,因为列表中各项的值都是一些歌曲的文件地址.接着,我们看到document.WMP.controls.play();这语句进行播放操作,因为在上一个语句中我们已经给播放插件指定播放文件的地址了,所以我们就要用到播放插件的集合controls的play()方法来进行播放歌曲.
2. getMusicIndex()分析:
这个表示, 获取当前播放歌曲在列表中的索引.本程序获取播放歌曲索引的目的就是用来进行播放上一曲和下一曲的操作.我们首先声音一个变量MusicIndex,这个变量属于局部变量,用来存储当前播放歌曲的位置(列表中的项目下标索引).当然我们可以声音一个全局
