如何在浏览器播放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)
            }
        })
    }
    }

你可能感兴趣的:(H5,前端,H5,amr音频)