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

最新推荐文章于 2021-07-22 14:46:13 发布

仓底储备粮

最新推荐文章于 2021-07-22 14:46:13 发布

阅读量7k

点赞数 1

分类专栏： H5 前端文章标签： H5 amr音频

本文链接：https://blog.csdn.net/qq_43466173/article/details/86540193

版权

前端同时被 2 个专栏收录

6 篇文章

订阅专栏

4 篇文章

订阅专栏

本文详细介绍如何在网页上播放AMR格式音频，包括通过base64编码转换AMR文件并在本地或在线环境中直接播放的方法。涉及使用JavaScript、audio.js和RongIMLib等工具。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

良心建议：
网页不支持播放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)
            }
        })
    }
    }