600字范文 > 实现base64格式的amr音频文件在IOS android微信内置浏览器的播放

实现base64格式的amr音频文件在IOS android微信内置浏览器的播放

时间：2020-09-17 20:23:18

参考文档：

1./yxl/opencore-amr-js （将amr文件转为wav格式的编解码项目）

因为项目需要，要将amr的base46格式的音频文件在IOS，android微信内置浏览器播放。项目中使用的第三方IM为融云，经过调研发现，使用融云js播放语音的方式，可以在IOS上播放，但是在Android上无法播放，而且h5的audio组件，不支持amr格式的音频文件。

最后得出的结论，IOS上的audio支持amr格式播放，android上audio组件不支持amr格式播放，包括使用融云js播放语音的方式，使用的也是audio组件。

想到的方案是，将amr的base64文件进行格式转换，转换为mp3，wav等audio支持的格式，然后进行播放，没有找到很好的资源。

经过领导的一句话，尝试性的找融云客服咨询了一下，看看有没有相关的项目，客服给了opencore-amr-js项目，是将amr格式的文件转换为wav格式的音频文件，进行播放。

将项目发布到测试环境，在微信内置浏览器跑了一下，得到的答案是，android可以正常播放，但是IOS无法播放；其中有一个对象，在IOS环境中，好像是找不到，运行就报错。

于是，综合了一下，得到了最终的解决方案，

IOS使用融云js进行语音播放，Android使用opencore-amr-js进行语音播放；播放语音时，判断机器为Android还是IOS，来选择播放方式。

在将opencore-amr-js项目往自己项目迁移的过程中，发现，融云js中使用的Libamr-2.2.5.min.js文件，就是opencore-amr-js项目中的amrnb.js文件，也就是说，融云js也是在opencore-amr-js项目的基础上开发的，而且改动也非常小，Android中需要使用的方法，都没有发生变动，感觉还是挺开心的，因为amrnb.js文件有474kb，太大了，如果在加上融云js的Libamr-2.2.5.min.js文件，整个聊天室，得有1兆多了，加载时间太长了。

下面，将Android播放语音的代码放在下面：

demo下载地址，demo在项目的js目录下面。

<!DOCTYPE html>

<html>

<head>

<title>AMR decode/encode tests</title>

<script src="amrnb.js" defer></script>

</head>

<body>

<h2>Test decoder</h2>

<p id="test">

Convert <a href="yuan.amr">yuan.amr</a> to wav file and compare with <a href="yuan.wav">yuan.wav</a>:

<button>Test</button>

</p>

<h2>Decode amr file and play</h2>

<p id="sample-amr">

<button>Play</button>

<a href="yuan.amr">yuan.amr</a>

</p>

<p>

Select a local file and play: <input type="file" id="amr-file" accept=".amr">

</p>

<h2>Encode audio to amr file and play</h2>

<p id="sample-audio">

<button>Encode & Play</button>

<a href="hello.ogg">hello.ogg</a>

</p>

<p>

Select a local file to encode and play: <input type="file" id="audio-file" accept="audio/*">

</p>

<h2>base64测试</h2>

<input id="base64-input" type="text" style="width:800px;height: 200px;">

<p id="base64-audio">