基于WMP/Audio5js网页播放器的设计与实现

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

Player

如图，这是播放器的界面及说明标注。下面来介绍一下基于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;
// 当前媒体播放的位置字符串
wmp.controls.currentPositionString;
// 当前媒体文件的长度
wmp.currentMedia.duration;
// 当前媒体文件的长度字符串
wmp.currentMedia.durationString;
// 媒体文件的缓冲进度
wmp.network.bufferingProgress;
// 播放媒体文件
wmp.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或http://git.oschina.net/kingariel/kaplayer去下载。

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

Console

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

基于Audio5j的网页播放器

为了能支持多浏览器，引入了Audio5js作为支撑插件。仍然是在上述的设计理念上，成功将这款网络播放器升级为可跨多浏览器的网络播放器。

注：源代码已在码云上托管，更多详见：https://git.oschina.net/kingariel/kaplayer