基于WindowsMediaPlayer网页播放器的设计与实现

几年前我写了一篇关于网页播放器的文章，那个时候网页播放器做得比较粗糙简陋。后来一段时间里，我又对网页播放器做了新的调整，如下图是否有些小清新。HTML5的出现，可能基于WindowsMediaPlayer的网页版播放器显得落后了，但它的设计思想与理念依然是有一定的指导性的作用的。

如图，这是播放器的界面及说明标注。下面来介绍一下基于WindowsMediaPlayer网页播放器的设计与实现。

WindowsMediaPlayer相关HTML

<object id="ActiveX" classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6">    <!-- 媒体文件的URL -->    <param name="URL" value=""/>    <!-- 自动播放 -->    <param name="autoStart" value="false"/>    <!-- 声音平衡 -->    <param name="balance" value="0"/>    <!-- 音量 -->    <param name="volume" value="100"/>    <!-- 播放次数 -->    <param name="playCount" value="1"/>    <!-- 播放器的界面模式 -->    <param name="uiMode" value="invisible"/></object>

WindowsMediaPlayer相关JS的API

// 取得媒体网页插件对象var wmp = document.getElementById("ActiveX");// 当前的媒体对象wmp.currentMedia;// 当前媒体播放的位置wmp.controls.currentPosition;// 当前媒体播放的位置字符串wms.controls.currentPositionString;// 当前媒体文件的长度wmp.currentMedia.duration;// 当前媒体文件的长度字符串wmp.currentMedia.durationString;// 媒体文件的缓冲进度wmp.network.bufferingProgress;// 播放媒体文件wms.controls.play();// 暂停播放wmp.controls.pause();// 停止播放wmp.controls.stop();// 播放器的播放状态wmp.playState;

其中的播放器的播放状态有10种，如下：

StateName StateValue StateName StateValue stop 1 pause 2 play 3 forward 4 backward 5 buffer 6 wait 7 over 8 connect 9 ready 10

播放列表的存储方式

在html中使用js来处理的数据两种常用格式是json和xml，在这里我们采用xml，这样会比较直观，定义的xml数据结构如下：

<playlist>    <music>        <name>groove coverage - only love</name>        <url>file:///F:/Music/groove coverage - only love.mp3</url>    </music>    ...</playlist>

有了以上的准备，下面开始着手做下面几件事：

绘制播放器的界面

WindowsMediaPlayer的网页播放器界面比较普通，我们可以给它打造一个自己喜欢的界面。在这里我们使用html和css，以及少量的js即可。为了使用界面更加美观，在这里使用了大量的图片来修饰。
这里比较棘手的可能是播放器上进度条的控制，我们可以单独为它的实现写一个js脚本。

使用JS调用WMP的API

利用上面介绍的API，实现播放器按钮与WindowsMediaPlayer之间的交互。每个媒体文件只能播放一次，这样可以随便切换媒体文件。
播放列表以xml方式存储起来，使用jQuery来读取，以便媒体文件之间的切换与修改。

播放器的细节处理

1、播放信息若显示不下，使其以滚动文字来显示
2、播放的媒体文件若不在可视区域内，使其滚动到可视区域内
3、调节播放与音量进度条时，能显示其调节过程的进度
4、顺序播放模式下，如果播放最后一个媒体文件，清除播放器设置，包括样式之类的

当然这其中还涉及到很多实现细节，篇幅有限，更多可以参照源码。我把个人实现的源码放到CSDN上，可以前往http://download.csdn.net/detail/kingwtd/9786117去下载。

源码的运行需要安装Java8，因为里面集成了音频文件的加载程序和Jetty服务器，可以直接加载某个目录下的音频文件，并且可以使用jQuery直接访问xml文件。下载解压后直接运行start.bat会出现如下画面：

根据提示进行操作，出现Web服务器启动成功的日志后，可以在IE浏览器（IE8或IE8以上版本）中输入标出的地址（http://localhost:8121/）即可出现播放器。