zz from http://www.blogbus.com/blogbus/blog/diary.php?diaryid=139912

很多来店里听歌的朋友都写信询问在线播放音乐的方法和一些空间的参数意义。

这篇日志将介绍控件 CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6 一些最

实用的参数,和外部调用的简单方法并提供几段简单的js函数。

开始制作自己的在线播放器,

第一步 :在网页中插入activex控件

<object classid=”clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6″
id=”player1” width=”0″ height=”0″codebase=http://activex.microsoft.com
/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701standby=Loading Microsoft?
Windows Media? Player components… type=application/x-oleobject>

其中

classid=”clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6″
codebase=http://activex.microsoft.com/activex/
controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701standby=Loading Microsoft?
Windows Media? Player components… type=application/x-oleobject
是控件类型和网络上的下载地址。

id是控件的名称用来在其他地方调用

width和height设为0使控件隐藏起来,因为我们要做自己的个性播放器。

第二步 : 设置空间的基本参数<param>

<param name=”autoStart” value=”-1″>  页面载入自动播放

<param name=”playCount” value=”100″> 连续播放次数

<param name=”volume” value=”40″> 音量

<param name=”URL” value=”"> 播放地址

还有很多参数,可自行查阅 SDK

该控件还有很多重要对象,用脚本语言来控制控件,实际上就是控制各对象的
各个属性。例如当单击某按纽时,执行Player1.controls.stop(),就会使id
名为player1的控件停止播放;如果执行Player1.URL=”如
风.mp3″;Player1.controls.play();就会播放名为“如风”的mp3文件。

第三步 : 是最关键的步骤,制作自己的控制面板

1. 你需要设计好自己的按钮,可以用fireworks或photoshop限于篇幅就不具
体介绍了,也可以从一些播放器的面板上截取。

2. 设计好我们所需要的功能:播放/暂停,停止,进度控制,音量调整,歌曲选择
这是最基本的,由于是在线播放器,打开文件功能自然是多余的(但不是不可实
现的),在这里我们用歌曲选择功能来代替。

3. 每个功能实现的渠道你可以自己决定,可以是按钮,可以是超链,可以是图
片,可以是层…原理是一样的.为了美观,我选择了图片。

4. 这里有两种方法,我们先介绍常见的以js实现,下面开始加代码.(以下假
设我们都是用图片,添加的事件为onclick等)

播放键:

js函数:
functionStartMeUp()
{
if(Player1.playState!
=3&&Player1.playState!=0)
{Player1.controls.play
();
show_buffer();}
}
player1为wmactivex的id,
playState为”播放状态对象”:=3为正在播放,
1为暂停,2为停止,0为未定义(当播放对象即url属性为空时,等于0)
controls.play();就是告诉wm,开始播放url里指定的文件.
show_buffer();是我自己编写的函数,用来现实进度条。

暂停键:

js函数
functionPauseMe()
{
if(Player1.playState==3)
Player1.controls.pause();
}

停止键:

js函数:
functionStopMe()
{
Player1.controls.stop()
}

做一个可以拖动的层,用来作为调节音量的滑杆.
name=”Layer2″>
onmousedown=”movevol(‘Layer2′)”onmouseup=”c_col();”alt=”音量”>

js部分:
varp_Obj=”none”;
functionmovevol(m_Obj)
{
p_Obj=m_Obj;
pX=parseInt(document.all(p_Obj).style.left)-event.x;
if(((pX+event.x)>110)&&((pX+event.x)<137))
document.all(Mouse_Obj).style.left=pX+event.x;
}
以上的js使layer2层只可以被鼠标左右拖动,且范围是110–137(距离窗口左边的像素)之间
现在还没有完,关键是当层被拖动到一个位置后,松开鼠标时使音量的值发生改变:
functionc_col();
{
Player1.settings.Volume=((Layer2.style.left.slice(0,3)-110)/27)*100;
}

原理就是把层移动的位移按一定的公式转化为音量的变化
值.Player1.settings.Volume就是控件的音量属性,取值范围0–100.
其中的slice(0,3)-110)/27)*100部分应该依据自己的播放器重新定义数值。

5. 另一种方法看似操作简单,但是在应用较多时就很不方便了,不过在blog
中还是比较实用的。使用以下代码

<input type=”各种类型(image,button等)” value=”"(button显示名
字) src=”图片连接 onclick=”"(比如player1.controls.stop()就是停止按钮)> 

这样的代码比js看起来直观很多,大家可以尝试着做。

我也是摸索着做的,有不足的地方还请大家见谅。


评论

该日志第一篇评论

发表评论

评论也有版权!