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

版权声明：本博客为博主原创,未经允许不能转载 https://blog.csdn.net/qq_43466173/article/details/86540193

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

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

<input type="file" name="" id="upload" value="" onchange="selectFile(this)"/>

js代码

    <script src="voice-2.0.js"></script>
    <script src="audio.min.js"></script>

// 初始化两个插件
    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）

 <script src="voice-2.0.js"></script>
    <script src="audio.min.js"></script>

// 初始化两个插件
    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)
            }
        })
    }
    }