「网页音乐播放器」之实现分析（一）

经过查阅资料，实现网页音乐播放器大致有以下三种方式：

• Windows Media Player
• Flash Player
• HTML5 Audio

下面将就每一种实现方式及 API 做详细阐述：

1、通过 Windows Media Player 方式

以下是来自百度百科的解释：

Windows Media Player是微软公司出品的一款免费的播放器，属于Microsoft Windows的一个组件，通常简称"WMP"，支持通过插件增强功能。

Windows Media Player播放器只能播放微软自家的MP3、WMA、WAV等格式，当然现在可以通过安装一些解码器来增强WMP的播放格式。

显然，Windows Media Player 的缺点是显而易见的，比如只能运行在 Windows 平台下，支持的文件格式有限等。

用过网页版 QQ空间 的小伙伴应该经常会遇到，在 IE浏览器 的底部，会出现一个 ActiveX 控件加载的提示，表示当前网页需要运行 ActiveX 控件以提升用户体验。

ActiveX插件也叫做OLE控件或OCX控件，它是一些软件组件或对象，可以将其插入到WEB网页或其它应用程序中。在因特网上，ActiveX插件软件的特点是：一般软件需要用户单独下载然后执行安装，而ActiveX插件是当用户浏览到特定的网页时，IE浏览器即可自动下载并提示用户安装。

ActiveX插件安装的前提是必须先下载，然后经过认证，最终用户确认同意方能安装，因此嵌有ActiveX脚本程序的页面可能会变得非常慢，甚至导致浏览器瞬间失去响应。

笔者找到了 QQ空间 用来播放音乐的插件 QzoneMusicInstall.exe，由于笔者对这种 exe 文件不是太懂，所以直接跳过。

下面将用代码来示范如何在网页中插入 Windows Media Player 播放器：

1、判断是否是 IE 浏览器

var isIE = !!window.ActiveXObject;

2、工具函数，用来在某个容器元素下追加节点

function createElementIn(type, containerId, doc) {
    var _doc = doc || document,
        element;
    var container = _doc.getElementById(containerId);
    element = _doc.createElement(type);
    container.appendChild(element);
    return element
}

3、插入 Windows Media Player 播放器到指定 id 的容器元素下：

function insertMediaPlayer(args) {
    var params = {};
    var objAttrs = {};
    for (var k in args) switch (k) {
        case "style":
        case "height":
        case "width":
        case "id":
        case "src":
            objAttrs[k] = args[k];
            break;
        default:
            params[k] = args[k]
    }
    if (args["src"]) params["src"] = args["src"];
    var str = [];
    str.push("<object ");
    if (isIE) str.push('classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" ');
    else str.push('type="application/x-ms-wmp" ');
    for (var i in objAttrs) {
        str.push(i);
        str.push('="');
        str.push(objAttrs[i]);
        str.push('" ')
    }
    str.push(">");
    if (isIE)
        for (var i in params) {
            str.push('<param name="');
            str.push(i);
            str.push('" value="');
            str.push(params[i]);
            str.push('" /> ')
        }
    str.push("</object>");
    var playerDiv = createElementIn("div", "wm_control");
    playerDiv.innerHTML = str.join("");
    return playerDiv.firstChild
}

可以发现，IE 需要使用 classid 属性声明，而其他浏览器则需要使用 type 属性声明。

var wmPlayer = insertMediaPlayer({
    id: "wmplayer",
    height: 0,
    width: 0,
    autoStart: "false",
    invokeURLs: "false",
    uiMode: "invisible",
    enablePositionControls: "true",
    canScan: "true",
    canSeek: "true"
})

执行上面的代码后，在 IE浏览器 下将得到形如下面的元素:

<object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" id="wmplayer" height="0" width="0">
    <param name="autoStart" value="false">
    <param name="invokeURLs" value="false">
    <param name="uiMode" value="invisible">
    <param name="enablePositionControls" value="true">
    <param name="canScan" value="true">
    <param name="canSeek" value="true">
</object>

而在其他浏览器下则是这样的：

<object type="application/x-ms-wmp" id="wmplayer" height="0" width="0"></object>

以下是 一些 param 以及对应的 value 值的说明：

<param name="URL" value="" />           // 媒体文件地址
<param name="rate" value="1" />
<param name="balance" value="0" />      // 声道 0全声道，-100左声道，100右声道
<param name="currentPosition" value="0" />
<param name="playCount" value="1" />    // 播放次数
<param name="autoStart" value="-1" />   // 是否自动播放 -1 是，0 否
<param name="currentMarker" value="0" />
<param name="invokeURLs" value="-1" />
<param name="volume" value="50" />      // 音量
<param name="mute" value="0" />');      // 是否静音 -1 是，0 否
<param name="uiMode" value="none" />    // 播放器模式 full(默认) 显示全部控件，none 仅视频窗口，mini 视频及一些常用控件，invisible 不显示任何控件及视频窗口
<param name="stretchToFit" value="0" />
<param name="windowlessVideo" value="0" />
<param name="enabled" value="-1" />');
<param name="enableContextMenu" value="-1" />
<param name="fullScreen" value="0" />');            // 是否全屏
<param name="enableErrorDialogs" value="-1" />      // 是否允许出错信息提示

JavaScript 与播放器交互（注意区分大小写）

wmPlayer.URL = ""           // 播放媒体地址
wmPlayer.controls.play()    // 开始播放
wmPlayer.controls.stop()    // 停止播放
wmPlayer.controls.pause()   // 暂停播放
wmPlayer.settings.mute = true | false   // 控制是否静音
wmPlayer.fullScreen = true | false      // 控制是否全屏

wmPlayer.playState          // 播放机状态, 共有 1－10 个状态, 具体如下

wmPlayer.playState == 1  // 停止播放
wmPlayer.playState == 2  // 暂停播放
wmPlayer.playState == 3  // 正常播放
wmPlayer.playState == 4  // 向前搜索
wmPlayer.playState == 5  // 向后搜索
wmPlayer.playState == 6  // 缓冲处理
wmPlayer.playState == 7  // 等待反应
wmPlayer.playState == 8  // 播放完毕
wmPlayer.playState == 9  // 连接媒体
wmPlayer.playState == 10 // 准备就绪

wmPlayer.controls.currentPositionString  // 取得媒体当前位置,以形如 06:01 的时间形式显示
wmPlayer.controls.currentPosition        // 获取或设置媒体当前位置,以形如 300.001 的秒数形式显示,精确到毫秒
wmPlayer.currentMedia.durationString     // 取得媒体总长度,以形如 06:01 的时间形式显示
wmPlayer.currentMedia.duration           // 取得媒体总长度,以形如 300.001 的秒数形式显示,精确到毫秒

2、通过 Flash 的方式

敬请期待，下期分解！

3、通过 HTML5 提供的新标签 Audio

敬请期待，下期分解！

考虑到要讲清楚每一种实现方式，内容会有点多，以及文章篇幅问题，故把对于余下两种实现方式的分析阐述和本期分开。如果您对内容感兴趣或者觉得内容还不错，欢迎点赞或者 star 我。

感谢您花费时间阅读我的文章！