你的位置:首页 > 网页设计

[网页设计]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 是播放声音的主要依赖,下面一 一 介绍下:

  ① amr.js : 可以理解成 “桥” 的概念,连接底层解码和客户端调用的桥梁。

  ② pcmdata.min.js : 封装 pcm data, PCM是一种编码格式 , PCM 添加上 RIFF 头 可以组成 Wave 音频(Wave 不止这一种编码方式),细节太深,小弟也不懂啦~~,有空深             挖。

  ③ libamr-nb.js : amr转换的核心库,这个文件比较大,压缩后大概也要 600kb 左右。

  ④ 如果下载三个核心库,建议从上篇 “Web 播放声音  — 介绍篇” 中的附件中卸载,在 github 现在的核心库,在 Chrome 下只能播放一次,把这个问题修复了一下,原因是      以同样的 Audio.src 创建 Audio 在 Chrome 下就不能二次播放,网上说法各异,最终自己动手解决了,详细可以在 amr.js 中的 global.util.play 方法中看。

3、具体用法

  说了有一阵子白话了,该上点代码了,下面是我封装的播放 AMR 格式 Base64 码 的插件,直接在页面引用可以 ,下载地址可以在 “Web 播放声音  — 介绍篇” 下载。

  页面一点样式都没有加,只有两个按钮,小伙伴凑合凑合,哈哈~~

  代码中只引入了 voice.js 一个 js,其他 js 动态引用了。(公司有 cdn 所以直接放在上面了)。

    步骤:

    第一步:执行初始化。

    第二步:调用相应方法。

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title>Example</title><script src="js/voice.js"></script></head><body><input type="button" value="play" id="playId"/><input type="button" value="stop" id="stopId"/></body><script type="text/javascript">

//初始化RongIMLib.RongIMVoice.init();
//播放
document.getElementById("playId").onclick = function(){
   // base64Str : amr 格式的 base64 码,可以用 HTML5 FileReader 或者canvas 进行转换 。
   var base64Str = "IyFBTVIKLNEafAAeef/hgmeAH8AD/+ggggAALMWpzAAf+f/hgmYAH8AD/+ggggAALEV+mgIf+f/hlGYCH8RGH+ggg+IiLE9FsgAeLP/gmyfQHOAz5qRSggiYLJCYjhETDa/giiYg33Oz99Su+hiILNHNfAAf+f/hgmYAH8AD/+ggggAALMWFzAAf+f/hgmYAH8AD/+ggggAALNGpzAAf+f/hgmYAH8AD/+ggggAALE4csoB5sf9lkkxqW51ZZegtsmYqLIsXQA0htL0vj55kHodV5Ik/SKIoLE8XnBwpvO5Xn42Xdtyqk5KTkRyeLJdmnB4BBMI1biyoWiAi3i9xLseGLGUGUpBphDE++psEzkywnUH68MxcLJbqQB4CBcQ7pzqFTycUUtGuMk0ULJMXRhwgDonzLl/njVsRFafpt8yiLJcNQB4AF+S6LiT1KANiUqkLyIiOLGkNtB5Ea6QcnnWtUY6+pGq5AVuwLHoWdh5BYX5agJQYmJJix5GicDgQLHQCjhxghnG7GQ9yqaLWUzr2hrlMLHcNnB8AqHn/"; RongIMLib.RongIMVoice.play(base64Str );};
//暂停
document.getElementById("stopId").onclick = function(){ RongIMLib.RongIMVoice.stop(); }; 

</script>

</html>

在这里也把 "voice.js" 的代码贴出来,使用 typescript 写完后生成出来的,方便小伙伴们查看:

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 码,代码中哪里有错误或者有异议麻烦小伙伴们联系我,一起讨论,有则改之无法加冕,一起进步,thx~~。