如何在浏览器播放amr格式的音频文件

良心建议： 网页不支持播放amr格式的音频文件，有条件的同学可以在后台使用ffmpeg转码后再在前端使用audio标签进行播放（MP3或wav），如果非要在网页播放amr，请继续阅读

本篇分两部分，播放本地的amr文件和播放在线的amr文件，一边看代码一边解释,原理都是把amr文件转换成base64字符串后直接播放该字符串 本地的amr文件（pc）： html代码

js代码

// 初始化两个插件 audiojs.events.ready(function () { var as = audiojs.createAll(); }); RongIMLib.RongIMVoice.init();

function selectFile(file) { var reader = new FileReader() // 接收选择的amr文件 reader.readAsDataURL(file.files[0]) // 对amr文件进行转码 reader.onload = function (f) { var base64Str = f.target.result.split(',')[1] // base64字符串，有兴趣的可以输出来看一看 RongIMLib.RongIMVoice.play(base64Str); // 直接播放该base64 字符串} }

作用：选择amr文件后进行转码（base64），直接播放base64字符串

播放在线的amr文件：原理都是把amr文件转码成base64字符串后再直接播放该字符串 上代码（只有js）

// 初始化两个插件 audiojs.events.ready(function () { var as = audiojs.createAll(); }); RongIMLib.RongIMVoice.init();

function get_voices() { $.ajax({ url: 'url', // 请求后台，后台把amr文件进行base64编码后直接返回 dataType: 'text', // 注意：因为是返回base64字符串，所以要用‘text’类型 success: function (res) { RongIMLib.RongIMVoice.play(res) // 同样道理，直接播放该base64字符串 }, error: function (res) { console.log(res) } }) } }

二。

将amr文件转化成base64字符串，用js转换成音频播放

js文件下载链接: https://pan.baidu.com/s/1kWsLOc3 密码: 2ca5

链接: https://pan.baidu.com/s/1smk2fdN 密码: qcbw

$a=file_get_contents("./a.amr"); $b=base64_encode($a); // echo $b; // die; ?>

三，

这个需求由来已久，公司的语音订单很多，每次客服都是从服务器down下语音来听。很不方便。。于是我就上网扒拉看有么有什么web播放器能播放amr格式的音频文件，amr百度百科

总之找了很久。，，然后发现苹果的QuickTime Player 播放器能播放。。

具体步骤如下：

1.下载QuickTime Player

2.在服务器端需要添加web服务器的mime.type支持就是在Apache 啊nginx啊之类的mime.type文件增加如下

audio/amr amr audio/amr-wb amr audio/amr-wb+ amr audio/amr amr amr

3.在页面插入如下代码

源码复制打印关于

播放

//js代码如下。。好吧用到了jquery自己替换吧 var playerQT = document.getElementById("playerQT"); $("#playerBtn").bind("click",function(e){ var playerUrl = e.target.getAttribute("playerUrl"); playerAudio(playerUrl); }); function playerAudio(url){ var html = 'ltembed width="1px" height="1px" name="plugin" src="'+url+'" type="audio/amr" id="QT_EMB">'; playerQT.innerHTML = html; }

4.在获取这个amr的url里服务端代码增加header如下

header(’Content-type: audio/amr’);

原文地址：http://myway.sinaapp.com/30.html

http://blog.sina.com.cn/s/blog_c70924a60101gwgm.html

audio.min.js

(function(h,o,g){var p=function(){for(var b=/audio(.min)?.js.*/,a=document.getElementsByTagName("script"),c=0,d=a.length;c ',settings:{autoplay:false,loop:false,preload:true,imageLocation:p+"player-graphics.gif",swfLocation:p+"audiojs.swf",useFlash:function(){var b=document.createElement("audio");return!(b.canPlayType&&b.canPlayType("audio/mpeg;").replace(/no/,""))}(),hasFlash:function(){if(navigator.plugins&&navigator.plugins.length&&navigator.plugins["Shockwave Flash"])return true;else if(navigator.mimeTypes&&navigator.mimeTypes.length){var b=

navigator.mimeTypes["application/x-shockwave-flash"];return b&&b.enabledPlugin}else try{new ActiveXObject("ShockwaveFlash.ShockwaveFlash");return true}catch(a){}return false}(),createPlayer:{markup:'

',

playPauseClass:"play-pause",scrubberClass:"scrubber",progressClass:"progress",loaderClass:"loaded",timeClass:"time",durationClass:"duration",playedClass:"played",errorMessageClass:"error-message",playingClass:"playing",loadingClass:"loading",errorClass:"error"},css:' .audiojs audio { position: absolute; left: -1px; } .audiojs { width: 460px; height: 36px; background: #404040; overflow: hidden; font-family: monospace; font-size: 12px; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444), color-stop(0.5, #555), color-stop(0.51, #444), color-stop(1, #444)); background-image: -moz-linear-gradient(center top, #444 0%, #555 50%, #444 51%, #444 100%); -webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); -o-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); } .audiojs .play-pause { width: 25px; height: 40px; padding: 4px 6px; margin: 0px; float: left; overflow: hidden; border-right: 1px solid #000; } .audiojs p { display: none; width: 25px; height: 40px; margin: 0px; cursor: pointer; } .audiojs .play { display: block; } .audiojs .scrubber { position: relative; float: left; width: 280px; background: #5a5a5a; height: 14px; margin: 10px; border-top: 1px solid #3f3f3f; border-left: 0px; border-bottom: 0px; overflow: hidden; } .audiojs .progress { position: absolute; top: 0px; left: 0px; height: 14px; width: 0px; background: #ccc; z-index: 1; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ccc), color-stop(0.5, #ddd), color-stop(0.51, #ccc), color-stop(1, #ccc)); background-image: -moz-linear-gradient(center top, #ccc 0%, #ddd 50%, #ccc 51%, #ccc 100%); } .audiojs .loaded { position: absolute; top: 0px; left: 0px; height: 14px; width: 0px; background: #000; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #222), color-stop(0.5, #333), color-stop(0.51, #222), color-stop(1, #222)); background-image: -moz-linear-gradient(center top, #222 0%, #333 50%, #222 51%, #222 100%); } .audiojs .time { float: left; height: 36px; line-height: 36px; margin: 0px 0px 0px 6px; padding: 0px 6px 0px 12px; border-left: 1px solid #000; color: #ddd; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5); } .audiojs .time em { padding: 0px 2px 0px 0px; color: #f9f9f9; font-style: normal; } .audiojs .time strong { padding: 0px 0px 0px 2px; font-weight: normal; } .audiojs .error-message { float: left; display: none; margin: 0px 10px; height: 36px; width: 400px; overflow: hidden; line-height: 36px; white-space: nowrap; color: #fff; text-overflow: ellipsis; -o-text-overflow: ellipsis; -icab-text-overflow: ellipsis; -khtml-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -webkit-text-overflow: ellipsis; } .audiojs .error-message a { color: #eee; text-decoration: none; padding-bottom: 1px; border-bottom: 1px solid #999; white-space: wrap; } .audiojs .play { background: url("$1") -2px -1px no-repeat; } .audiojs .loading { background: url("$1") -2px -31px no-repeat; } .audiojs .error { background: url("$1") -2px -61px no-repeat; } .audiojs .pause { background: url("$1") -2px -91px no-repeat; } .playing .play, .playing .loading, .playing .error { display: none; } .playing .pause { display: block; } .loading .play, .loading .pause, .loading .error { display: none; } .loading .loading { display: block; } .error .time, .error .play, .error .pause, .error .scrubber, .error .loading { display: none; } .error .error { display: block; } .error .play-pause p { cursor: auto; } .error .error-message { display: block; }',

trackEnded:function(){},flashError:function(){var b=this.settings.createPlayer,a=j(b.errorMessageClass,this.wrapper),c='Missing flash player plugin.';if(this.mp3)c+=' Download audio file.';g[h].helpers.removeClass(this.wrapper,b.loadingClass);g[h].helpers.addClass(this.wrapper,b.errorClass);a.innerHTML=c},loadError:function(){var b=this.settings.createPlayer,a=j(b.errorMessageClass,this.wrapper);g[h].helpers.removeClass(this.wrapper,

b.loadingClass);g[h].helpers.addClass(this.wrapper,b.errorClass);a.innerHTML='Error loading: "'+this.mp3+'"'},init:function(){g[h].helpers.addClass(this.wrapper,this.settings.createPlayer.loadingClass)},loadStarted:function(){var b=this.settings.createPlayer,a=j(b.durationClass,this.wrapper),c=Math.floor(this.duration/60),d=Math.floor(this.duration%60);g[h].helpers.removeClass(this.wrapper,b.loadingClass);a.innerHTML=(c<10?"0":"")+c+":"+(d<10?"0":"")+d},loadProgress:function(b){var a=this.settings.createPlayer,

c=j(a.scrubberClass,this.wrapper);j(a.loaderClass,this.wrapper).style.width=c.offsetWidth*b+"px"},playPause:function(){this.playing?this.settings.play():this.settings.pause()},play:function(){g[h].helpers.addClass(this.wrapper,this.settings.createPlayer.playingClass)},pause:function(){g[h].helpers.removeClass(this.wrapper,this.settings.createPlayer.playingClass)},updatePlayhead:function(b){var a=this.settings.createPlayer,c=j(a.scrubberClass,this.wrapper);j(a.progressClass,this.wrapper).style.width=

c.offsetWidth*b+"px";a=j(a.playedClass,this.wrapper);c=this.duration*b;b=Math.floor(c/60);c=Math.floor(c%60);a.innerHTML=(b<10?"0":"")+b+":"+(c<10?"0":"")+c}},create:function(b,a){a=a||{};return b.length?this.createAll(a,b):this.newInstance(b,a)},createAll:function(b,a){var c=a||document.getElementsByTagName("audio"),d=[];b=b||{};for(var e=0,i=c.length;e

e="audiojs_wrapper"+this.instanceCount;this.instanceCount++;if(b.getAttribute("autoplay")!=null)c.autoplay=true;if(b.getAttribute("loop")!=null)c.loop=true;if(b.getAttribute("preload")=="none")c.preload=false;a&&this.helpers.merge(c,a);if(c.createPlayer.markup)b=this.createPlayer(b,c.createPlayer,e);else b.parentNode.setAttribute("id",e);e=new g[o](b,c);c.css&&this.helpers.injectCss(e,c.css);if(c.useFlash&&c.hasFlash){this.injectFlash(e,d);this.attachFlashEvents(e.wrapper,e)}else c.useFlash&&!c.hasFlash&&

this.settings.flashError.apply(e);if(!c.useFlash||c.useFlash&&c.hasFlash)this.attachEvents(e.wrapper,e);return this.instances[d]=e},createPlayer:function(b,a,c){var d=document.createElement("div"),e=b.cloneNode(true);d.setAttribute("class","audiojs");d.setAttribute("className","audiojs");d.setAttribute("id",c);if(e.outerHTML&&!document.createElement("audio").canPlayType){e=this.helpers.cloneHtml5Node(b);d.innerHTML=a.markup;d.appendChild(e);b.outerHTML=d.outerHTML;d=document.getElementById(c)}else{d.appendChild(e);

d.innerHTML+=a.markup;b.parentNode.replaceChild(d,b)}return d.getElementsByTagName("audio")[0]},attachEvents:function(b,a){if(a.settings.createPlayer){var c=a.settings.createPlayer,d=j(c.playPauseClass,b),e=j(c.scrubberClass,b);g[h].events.addListener(d,"click",function(){a.playPause.apply(a)});g[h].events.addListener(e,"click",function(i){i=i.clientX;var f=this,k=0;if(f.offsetParent){do k+=f.offsetLeft;while(f=f.offsetParent)}a.skipTo((i-k)/e.offsetWidth)});if(!a.settings.useFlash){g[h].events.trackLoadProgress(a);

g[h].events.addListener(a.element,"timeupdate",function(){a.updatePlayhead.apply(a)});g[h].events.addListener(a.element,"ended",function(){a.trackEnded.apply(a)});g[h].events.addListener(a.source,"error",function(){clearInterval(a.readyTimer);clearInterval(a.loadTimer);a.settings.loadError.apply(a)})}}},attachFlashEvents:function(b,a){a.swfReady=false;a.load=function(c){a.mp3=c;a.swfReady&&a.element.load(c)};a.loadProgress=function(c,d){a.loadedPercent=c;a.duration=d;a.settings.loadStarted.apply(a);

a.settings.loadProgress.apply(a,[c])};a.skipTo=function(c){if(!(c>a.loadedPercent)){a.updatePlayhead.call(a,[c]);a.element.skipTo(c)}};a.updatePlayhead=function(c){a.settings.updatePlayhead.apply(a,[c])};a.play=function(){if(!a.settings.preload){a.settings.preload=true;a.element.init(a.mp3)}a.playing=true;a.element.pplay();a.settings.play.apply(a)};a.pause=function(){a.playing=false;a.element.ppause();a.settings.pause.apply(a)};a.setVolume=function(c){a.element.setVolume(c)};a.loadStarted=function(){a.swfReady=

true;a.settings.preload&&a.element.init(a.mp3);a.settings.autoplay&&a.play.apply(a)}},injectFlash:function(b,a){var c=this.flashSource.replace(/\$1/g,a);c=c.replace(/\$2/g,b.settings.swfLocation);c=c.replace(/\$3/g,+new Date+Math.random());var d=b.wrapper.innerHTML,e=document.createElement("div");e.innerHTML=c+d;b.wrapper.innerHTML=e.innerHTML;b.element=this.helpers.getSwf(a)},helpers:{merge:function(b,a){for(attr in a)if(b.hasOwnProperty(attr)||a.hasOwnProperty(attr))b[attr]=a[attr]},clone:function(b){if(b==

null||typeof b!=="object")return b;var a=new b.constructor,c;for(c in b)a[c]=arguments.callee(b[c]);return a},addClass:function(b,a){RegExp("(\\s|^)"+a+"(\\s|$)").test(b.className)||(b.className+=" "+a)},removeClass:function(b,a){b.className=b.className.replace(RegExp("(\\s|^)"+a+"(\\s|$)")," ")},injectCss:function(b,a){for(var c="",d=document.getElementsByTagName("style"),e=a.replace(/\$1/g,b.settings.imageLocation),i=0,f=d.length;i

d[i];if(f.innerHTML===e)return;c=f.innerHTML;break}}d=document.getElementsByTagName("head")[0];i=d.firstChild;f=document.createElement("style");if(d){f.setAttribute("type","text/css");f.setAttribute("title","audiojs");if(f.styleSheet)f.styleSheet.cssText=c+e;else f.appendChild(document.createTextNode(c+e));i?d.insertBefore(f,i):d.appendChild(styleElement)}},cloneHtml5Node:function(b){var a=document.createDocumentFragment(),c=a.createElement?a:document;c.createElement("audio");c=c.createElement("div");

a.appendChild(c);c.innerHTML=b.outerHTML;return c.firstChild},getSwf:function(b){b=document[b]||window[b];return b.length>1?b[b.length-1]:b}},events:{memoryLeaking:false,listeners:[],addListener:function(b,a,c){if(b.addEventListener)b.addEventListener(a,c,false);else if(b.attachEvent){this.listeners.push(b);if(!this.memoryLeaking){window.attachEvent("onunload",function(){if(this.listeners)for(var d=0,e=this.listeners.length;d

a,function(){c.call(b,window.event)})}},trackLoadProgress:function(b){if(b.settings.preload){var a,c;b=b;var d=/(ipod|iphone|ipad)/i.test(navigator.userAgent);a=setInterval(function(){if(b.element.readyState>-1)d||b.init.apply(b);if(b.element.readyState>1){b.settings.autoplay&&b.play.apply(b);clearInterval(a);c=setInterval(function(){b.loadProgress.apply(b);b.loadedPercent>=1&&clearInterval(c)})}},10);b.readyTimer=a;b.loadTimer=c}},purge:function(b){var a=b.attributes,c;if(a)for(c=0;c

1)if(typeof b[a[c].name]==="function")b[a[c].name]=null;if(a=b.childNodes)for(c=0;c

l)}},q=function(){try{i.doScroll("left")}catch(l){setTimeout(q,50);return}m("poll")};if(e.readyState=="complete")b.call(a,"lazy");else{if(e.createEventObject&&i.doScroll){try{d=!a.frameElement}catch(r){}d&&q()}e[f](n+"DOMContentLoaded",m,false);e[f](n+"readystatechange",m,false);a[f](n+"load",m,false)}}}()}};g[o]=function(b,a){this.element=b;this.wrapper=b.parentNode;this.source=b.getElementsByTagName("source")[0]||b;this.mp3=function(c){var d=c.getElementsByTagName("source")[0];return c.getAttribute("src")||

(d?d.getAttribute("src"):null)}(b);this.settings=a;this.loadStartedCalled=false;this.loadedPercent=0;this.duration=1;this.playing=false};g[o].prototype={updatePlayhead:function(){this.settings.updatePlayhead.apply(this,[this.element.currentTime/this.duration])},skipTo:function(b){if(!(b>this.loadedPercent)){this.element.currentTime=this.duration*b;this.updatePlayhead()}},load:function(b){this.loadStartedCalled=false;this.source.setAttribute("src",b);this.element.load();this.mp3=b;g[h].events.trackLoadProgress(this)},

loadError:function(){this.settings.loadError.apply(this)},init:function(){this.settings.init.apply(this)},loadStarted:function(){if(!this.element.duration)return false;this.duration=this.element.duration;this.updatePlayhead();this.settings.loadStarted.apply(this)},loadProgress:function(){if(this.element.buffered!=null&&this.element.buffered.length){if(!this.loadStartedCalled)this.loadStartedCalled=this.loadStarted();this.loadedPercent=this.element.buffered.end(this.element.buffered.length-1)/this.duration;

this.settings.loadProgress.apply(this,[this.loadedPercent])}},playPause:function(){this.playing?this.pause():this.play()},play:function(){/(ipod|iphone|ipad)/i.test(navigator.userAgent)&&this.element.readyState==0&&this.init.apply(this);if(!this.settings.preload){this.settings.preload=true;this.element.setAttribute("preload","auto");g[h].events.trackLoadProgress(this)}this.playing=true;this.element.play();this.settings.play.apply(this)},pause:function(){this.playing=false;this.element.pause();this.settings.pause.apply(this)},

setVolume:function(b){this.element.volume=b},trackEnded:function(){this.skipTo.apply(this,[0]);this.settings.loop||this.pause.apply(this);this.settings.trackEnded.apply(this)}};var j=function(b,a){var c=[];a=a||document;if(a.getElementsByClassName)c=a.getElementsByClassName(b);else{var d,e,i=a.getElementsByTagName("*"),f=RegExp("(^|\\s)"+b+"(\\s|$)");d=0;for(e=i.length;d1?c:c[0]}})("audiojs","audiojsInstance",this);

voice-2.0.js

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 = {}));