融云 Web 播放声音 — Flash 篇 （播放 AMRWAV）

Posted 2021-09-16 融云RongCloud

本文主要介绍 Flash 播放 AMR 格式 Base64码 音频。

在此之前么有接触过 Flash ,接触 AS3 是一头雾水，不过幸好有 TypeScript 和 javascript 的基础看起来不是很费劲，现学现卖的就是开了 ”跳坑“ 之旅~~~

1、实现思路

起初一点实现思路都木有，不知道该从何做起，只知道用 Flash 播放 AMR ，度娘谷姐的一顿找，结果可想而知，没有糟糕，只有十分糟糕，哈哈。

后来想了想，凡事都得有个思路，不能闷头干，瞬间恍然大悟，为自己浪费的快一天的时间，感到羞愧和害怕.....

① Flash 都能播放哪些音频。

② 在 ActionScript 中AMR 是如何转换成 Flash 可播放的音频的。

③ JS 中如何调用 ActionScript 中方法，如何交互。

④ 如何把 SWF 文件嵌入到 html 页面中。

⑤ 如何把 AMR（Audio） 和 Flash 播放AMR 两种方式封装起来。

2、逐一破解

① Flash 都能播放哪些音频：

MP3 格式是 Flash 默认支持的音频格式，WAVE 格式需要转换可以播放，其他格式也是需要转换的，因为先做的 Chrome 下播放声音，对 WAVE 音频多少有些了解，所以决定从 WAVE 音频入手，所以按照上述的套路来 ”屡思路“：

(1) 不管如何转换，肯定要操作字节数组，所以第一步把 AMR 格式的 base64 码 转换为 ByteArray 数组。

(2) 如何把 AMR 的 ByteArray 转换成 WAVE 格式的 ByteArray 数组，毫无疑问 ，肯定需要解码的过程。

按照这两个小步骤逐一做，很快找到了 base64 的转码过程（开始是自己用 AS 实现了 JS 中的的 转码过程，可用但不完美，最终借鉴 github 上大牛的转换过程），但 AMR 转换 WAVE 这个就没有那么容易了，最终确定，AS 解 AMR 比较费劲，需要 用 C 语言来解码，然后用 CrossBirdge 生成可以供 Flash 调用的 SWC 文件。

OK，到这为止，第一步就完美解决了。

② 在 ActionScript 中AMR 是如何转换成 Flash 可播放的音频的：

上文中有提到，需要用 C 语言 进行对 AMR 解码，下文中会给出 C 语言解码和生成 SWC 的教程（借鉴大牛的）。

③ JS 中如何调用 ActionScript 中方法，如何交互，下文中会贴出完整代码（一定要看注释、注释、注释），此处写出 JS 调用过程。

JS 代码：

function callFlashMethod() {
// play 是 flash 代码中定义的 ExternalInterface.addCallback("play",this.play); 下文中会有详细介绍。
thisMovie("嵌入页面上<object>的ID").play("base64str");
}
​
function thisMovie(movieName) {
if (navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName]
}
else {
return document[movieName]
}
}
document.getElementById("playId").onclick = function(){
callFlashMethod();
};

④ 如何把 SWF 文件嵌入到 HTML 页面中：

使用 swfobject.js 可以将 swf 文件嵌入到 HTML 页面中，参考资料 ：http://www.cnblogs.com/Carpe-Diem/articles/2310831.html

⑤ 如何把 AMR（Audio） 和 Flash 播放AMR 两种方式封装起来：

有了上面的铺垫，轻而易举的就可以封装啦（主要看 isIE 为 true 的情况）：

var RongIMLib;
(function (RongIMLib) {
var RongIMVoice = (function () {
function RongIMVoice() {
}
/**

• 初始化声音库

*/
RongIMVoice.init = function () {
if (this.isIE) {
var div = document.createElement("div");
div.setAttribute("id", "flashContent");
document.body.appendChild(div);
var script = document.createElement("script");
script.src = "http://cdn.ronghub.com/swfobject-2.0.0.min.js";
var header = document.getElementsByTagName("head")[0];
header.appendChild(script);
setTimeout(function () {
var swfVersionStr = "11.4.0";
var flashvars = {};
var params = {};
params.quality = "high";
params.bgcolor = "#ffffff";
params.allowScriptAccess = "always";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "player";
attributes.name = "player";
attributes.align = "middle";
swfobject.embedSWF("http://cdn.ronghub.com/player-2.0.2.swf", "flashContent", "1", "1", swfVersionStr, null, flashvars, params, attributes);
}, 200);
}
else {
var list = ["http://cdn.ronghub.com/pcmdata-2.0.0.min.js", "http://cdn.ronghub.com/libamr-2.0.1.min.js"];
for (var i = 0, len = list.length; i < len; i++) {
var script = document.createElement("script");
script.src = list[i];
document.head.appendChild(script);
}
}
this.isInit = true;
};
/**

• 开始播放声音
• @param data {string} amr 格式的 base64 码
• @param duration {number} 播放大概时长 用 data.length / 1024

*/
RongIMVoice.play = function (data, duration) {
this.checkInit("play");
var me = this;
if (me.isIE) {
me.thisMovie().doAction("init", data);
}
else {
me.palyVoice(data);
me.onCompleted(duration);
}
};
/**

• 停止播放声音

*/
RongIMVoice.stop = function () {
this.checkInit("stop");
var me = this;
if (me.isIE) {
me.thisMovie().doAction("stop");
}
else {
if (me.element) {
me.element.stop();
}
}
};
/**

• 播放声音时调用的方法

*/
RongIMVoice.onprogress = function () {
this.checkInit("onprogress");
};
RongIMVoice.checkInit = function (postion) {
if (!this.isInit) {
throw new Error("RongIMVoice not initialized,postion:" + postion);
}
};
RongIMVoice.thisMovie = function () {
return eval("window[\'player\']");
};
RongIMVoice.onCompleted = function (duration) {
var me = this;
var count = 0;
var timer = setInterval(function () {
count++;
me.onprogress();
if (count >= duration) {
clearInterval(timer);
}
}, 1000);
if (me.isIE) {
me.thisMovie().doAction("play");
}
};
RongIMVoice.base64ToBlob = function (base64Data, type) {
var mimeType;
if (type) {
mimeType = { type: type };
}
base64Data = base64Data.replace(/^(.*)[,]/, \'\');
var sliceSize = 1024;
var byteCharacters = atob(base64Data);
var bytesLength = byteCharacters.length;
var slicesCount = Math.ceil(bytesLength / sliceSize);
var byteArrays = new Array(slicesCount);
for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
var begin = sliceIndex * sliceSize;
var end = Math.min(begin + sliceSize, bytesLength);
var bytes = new Array(end - begin);
for (var offset = begin, i = 0; offset < end; ++i, ++offset) {
bytes[i] = byteCharacters[offset].charCodeAt(0);
}
byteArrays[sliceIndex] = new Uint8Array(bytes);
}
return new Blob(byteArrays, mimeType);
};
RongIMVoice.palyVoice = function (base64Data) {
var reader = new FileReader(), blob = this.base64ToBlob(base64Data, "audio/amr"), me = this;
reader.onload = function () {
var samples = new AMR({
benchmark: true
}).decode(reader.result);
me.element = AMR.util.play(samples);
};
reader.readAsBinaryString(blob);
};
RongIMVoice.isIE = /Trident/.test(navigator.userAgent);
RongIMVoice.isInit = false;
return RongIMVoice;
})();
RongIMLib.RongIMVoice = RongIMVoice;
//兼容AMD CMD
if ("function" === typeof require && "object" === typeof module && module && module.id && "object" === typeof exports && exports) {
module.exports = RongIMVoice;
}
else if ("function" === typeof define && define.amd) {
define("RongIMVoice", [], function () {
return RongIMVoice;
});
}
})(RongIMLib || (RongIMLib = {}));

截止到这里，Flash 播放 AMR 格式 base64 码 就说完了，主要是介绍下大概思路

以上是融云 SDK 里的源码，不过最近推出了直接使用 Audio 方式播放 AAC 格式的音频文件

原始文章连接：https://www.cnblogs.com/yuhongda0315/p/5224450.html

融云官网：https://www.rongcloud.cn

融云文档：https://docs.rongcloud.cn/v4