Web 播放声音 — Flash 篇 (播放 AMR、WAV)

本文主要介绍 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 码 就说完了,主要是说说思路,觉得demo地址,可以再“Web 播放声音  — 介绍篇”下载。

时间: 2024-10-20 22:34:07

Web 播放声音 — Flash 篇 (播放 AMR、WAV)的相关文章

Web 播放声音 — AMR(Audio) 篇

本文主要介绍 AMR(Aduio) 播放 AMR 格式 Base64码 音频. 1.必备资料 github AMR 开源库 :https://github.com/jpemartins/amr.js用心把这个项目看一遍,对于我下面说的话,可以忽略啦,代码是最好的文章,哈哈~~ 2.核心 JS 库 :amr.js .pcmdata.min.js.libamr-nb.js (g上述ithub项目中有另外三个js,我给合成一个amr.js,不要混乱)这三个 JS 是播放声音的主要依赖,下面一 一 介绍

web页面如何播放amr的音频文件

这个需求由来已久,公司的语音订单很多,每次客服都是从服务器down下语音来听.很不方便..于是我就上网扒拉看有么有什么web播放器能播放amr格式的音频文件,amr百度百科 总之找了很久.,,然后发现苹果的QuickTime Player 播放器能播放.. 具体步骤如下: 1.下载QuickTime Player 2.在服务器端需要添加web服务器的mime.type支持就是在Apache 啊nginx啊之类的mime.type文件增加如下 audio/amr amr audio/amr-wb 

Android音频: 如何使用AudioTrack播放一个WAV格式文件?

翻译 By Long Luo 原文链接:Android Audio: Play a WAV file on an AudioTrack 译者注: 1. 由于这是技术文章,所以有些词句使用原文,表达更准确. 2. 由于水平有效,有些地方可能翻译的不够准确,如有不当之处,敬请批评指正. 3. 针对某些语句,适当补充了上下文及更适合中文阅读,尽量做到信达雅. 如果你已经成功地了解了关于AudioTrack的一些话题,那么你可能享受它带来的好处,例如低延迟(在STATIC(静态)模式),能够生成流式音频

带有波形图的flash音乐播放器

最近项目里需要这么一个东西,但是找遍了网上也没有合适的带波形图的播放器. 曾经找到过非常接近的解决方案,最后都不能用: media player,如果机器安装了高版本的media player是可以显示波形图的,优点是客户端一般不需要额外下载(因为调用的是windows下的wmp.dll),缺点是如果是低版本的media player就没法显示波形图,并且即使是高版本的,有时候也不会显示波形图,原因未知… flash播放器,这个网上有很多例子,但是有大部分的波形图都是假的,就是放了一个抖动的动画

高性能WEB开发 - 图片篇

一.缩小图片大小 当图片很多的时候,减少图片大小是提高下载速度最直接的方法. 1. 使用PNG8代替GIF(非动画图片),因为PNG8在效果一样的情况,图片大小比GIF要小. 2. 用fireworks处理PNG图片,在我们产品中很多PNG图片是美工直接用photoshop导出的, 后来让美工用fireworks处理PNG(大概的方式是选择保存为PNG8,删除背景色). 处理后100K的图片大小基本减少了3/4,但图片质量也会有少许降低,要看自己是否能接受. 3. 使用Smush.it(http

JS控制flash的播放

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN"> <head&

web入侵基础篇

基本的命令....最基础的,为以后提权做准备 入侵基础篇.zip:http://pan.baidu.com/s/1dDhAHwd web入侵基础篇,布布扣,bubuko.com

Spring Boot干货系列:(五)开发Web应用JSP篇

Spring Boot干货系列:(五)开发Web应用JSP篇 原创 2017-04-05 嘟嘟MD 嘟爷java超神学堂 前言 上一篇介绍了Spring Boot中使用Thymeleaf模板引擎,今天来介绍一下如何使用SpringBoot官方不推荐的jsp,虽然难度有点大,但是玩起来还是蛮有意思的. 正文 先来看看整体的框架结构,跟前面介绍Thymeleaf的时候差不多,只是多了webapp这个用来存放jsp的目录,静态资源还是放在resources的static下面. 引入依赖 使用内嵌的to

C# Window Form解决播放amr格式音乐问题

最近搞一个项目,需要获取微信端语音文件,下载之后发现是AMR格式的录音文件,这下把我搞晕了,C#中的4种播放模式不支持播放AMR,想到都觉得头痛,如何是好?最后找到的方案,其实也简单:windows media player 1.上网下载最新的解码器:K-Lite Codec Pack,下载地址百度可以查询,如果没有可以联系我 2.就是下C#代码,选择项目-->添加引用-->Com组件-->选择windows media player,如图: 3.C#播放语音代码:(这个仅仅是播放代码,