amr 如何在网页上直接播放

amr 在线播放

alex374/amr-player 库

github: https://github.com/alex374/am...

<!DOCTYPE html>
<html>
<head>
    <title>    arm play</title>
    <script src="./amr-player-master/amrnb.js"></script>
    <script src="./amr-player-master/amrplayer.js"></script>
    <script type="text/javascript">
        //var player = new AmrPlayer('./amr-player-master/1562307681788.amr');
        var player = new AmrPlayer('./amr-player-master/13703524514_20190628184029.amr');

        // chrome 禁止自动播放 改用手动播放
        //player.play();        
    </script>
</head>
<body>
<h1>amr play</h1>

<button id="unmuteButton">start play</button>
<script>
  unmuteButton.addEventListener('click', function() {
    player.play();
  });
</script>
</body>
</html>

融云IM音频库

使用融云的库 https://www.rongcloud.cn/docs...

示例代码:https://blog.csdn.net/hanglov...

amr-wb 在线播放

https://github.com/sblandford...

demo.html 代码只是基础的播放功能,多次点击会出现多个音频,也没有暂停功能。
示例代码优化:

// 全局变量
var gBufferSource;

// 播放 PCM
function playPcm(samples) {
    var ctx = getAudioContext(); 
    
    if (gBufferSource !== undefined) {
        // 正在播放,先停止
        gBufferSource.stop();
    }

    gBufferSource = ctx.createBufferSource();
    var buffer = ctx.createBuffer(1, samples.length, 16000);
    if (buffer.copyToChannel) {
        buffer.copyToChannel(samples, 0, 0)
    } else {
        var channelBuffer = buffer.getChannelData(0);
        channelBuffer.set(samples);
    }
    gBufferSource.buffer = buffer;
    gBufferSource.connect(ctx.destination);
    gBufferSource.start();
}

// 停止播放
function stopAmrBlob()
{
    if (gBufferSource !== undefined) {
        //停止
        gBufferSource.stop();
    }
}

格式

amr 有三种文件格式

  • amr-nb
  • amr-wb
  • amr-wb+

arm-nb

AMR
也就是 arm 文件格式。
语音带宽范围:300-3400Hz,8KHz采样,早期版本。

arm-wb

AMR WideBand
语音带宽范围: 50-7000Hz,16KHz采样,占用内存更大,话音更加自然、舒适和易于分辨。

arm-wb+

采样速率是在16~48 kHz之间。这使得它的语音带宽更宽(24 kHz)

如何查看

通过文件内容

clipboard.png

clipboard.png

文件头格式:

AMR 文件支持单声道和多声道。单声道和多声道的文件头是不同的。

单声道:

AMR-NB文件头: "#!AMRn" (or 0x2321414d520a in hexadecimal)(引号内的部分)

AMR-WB 文件头:"#!AMR-WBn" (or 0x2321414d522d57420a in hexadecimal).(引号内)

多声道:

多声道的文件头包含一个magic number和32bit channle description域。

AMR-NB 的magic number:"#!AMR_MC1.0n"

(or 0x2321414d525F4D43312E300a in hexadecimal).

AMR-WB的magic number:"#!AMR-WB_MC1.0n"

(or 0x2321414d522d57425F4D43312E300a in hexadecimal).

32bit的channel description域的定义如下:

其中 reserved bits必须为0, CHAN:表示当前文件中含有几个声道。

通过 ffprobe 查看

root@51e7052bc967:/var/www/# ffprobe ./1562327664267_1.amr

ffprobe version 4.0.2 Copyright (c) 2007-2018 the FFmpeg developers
  built with gcc 5.4.0 (Ubuntu 5.4.0-6ubuntu1~16.04.9) 20160609
  configuration: --enable-shared --enable-libmp3lame --disable-x86asm
  libavutil      56. 14.100 / 56. 14.100
  libavcodec     58. 18.100 / 58. 18.100
  libavformat    58. 12.100 / 58. 12.100
  libavdevice    58.  3.100 / 58.  3.100
  libavfilter     7. 16.100 /  7. 16.100
  libswscale      5.  1.100 /  5.  1.100
  libswresample   3.  1.100 /  3.  1.100
[amr @ 0xb19ac0] Estimating duration from bitrate, this may be inaccurate
Input #0, amr, from './1562327664267_1.amr':
  Duration: 00:00:05.06, bitrate: 12 kb/s
    Stream #0:0: Audio: amr_nb (samr / 0x726D6173), 8000 Hz, mono, flt
    
    
root@51e7052bc967:/var/www/# ffprobe ./18772355686_20190701164242.amr

ffprobe version 4.0.2 Copyright (c) 2007-2018 the FFmpeg developers
  built with gcc 5.4.0 (Ubuntu 5.4.0-6ubuntu1~16.04.9) 20160609
  configuration: --enable-shared --enable-libmp3lame --disable-x86asm
  libavutil      56. 14.100 / 56. 14.100
  libavcodec     58. 18.100 / 58. 18.100
  libavformat    58. 12.100 / 58. 12.100
  libavdevice    58.  3.100 / 58.  3.100
  libavfilter     7. 16.100 /  7. 16.100
  libswscale      5.  1.100 /  5.  1.100
  libswresample   3.  1.100 /  3.  1.100
[amr @ 0x17f9ac0] Estimating duration from bitrate, this may be inaccurate
Input #0, amr, from './18772355686_20190701164242.amr':
  Duration: 00:04:44.34, bitrate: 13 kb/s
    Stream #0:0: Audio: amr_wb (sawb / 0x62776173), 16000 Hz, mono, flt
76 声望
2 粉丝
0 条评论
推荐阅读
f.lux 针对不同显示器进行调节不生效的原因
f.lux 是一款知名的护眼软件。在它的配置项“Disable”中可以设置不同场景下禁用护眼效果。当主机连有多个显示器时,就会多出如图下面的显示器列表。护眼效果不会在勾选的显示器上生效。如果你的显示器列表展示的多...

liyiyang阅读 2.2k

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy49阅读 7.3k评论 12

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 7k评论 12

封面图
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs32阅读 3.5k评论 5

封面图
CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...

XboxYan30阅读 4k评论 2

封面图
安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城29阅读 6.4k评论 5

封面图
2022大前端总结和2023就业分析
我在年前给掘金平台分享了《2022年热点技术盘点》的前端热点,算是系统性的梳理了一下我自己对前端一整年的总结。年后,在知乎上看到《前端的就业行情怎么样?》,下面都是各种唱衰前端的论调,什么裁员,外包化...

i5ting27阅读 2.3k评论 4

封面图
76 声望
2 粉丝
宣传栏