纯js实现web端录音与播放功能

Snailclimb 发布于2019-08-05 16:45 / 1310人阅读

摘要：纯实现端录音功能，功能并不是特别多，逐步增加中，详细地址。使用转码到并播放小文件，大文件使用。其他资源基于阿里云实现简单的语音识别功能学习与音频播放实现音频数据收集实现数据编码转化到格式与播放

纯js实现web端录音功能，功能并不是特别多，逐步增加中，详细地址：github。

getUserMedia在非localhost和127的情况下，需要开启https，由于腾讯云的没备案，demo就不放了，可以自行获取代码并启动测试。

实现方式

实现原理的话，主要是以下三点，

利用webrtc的getUserMedia方法获取设备音频输入，使用audioprocess得到音频流(pcm流，范围-1到1)。

转码，利用前端中的ArrayBuffer等二进制操作按采样位数处理流信息。

使用decodeAudioData转码arraybuffer到audioBuffer并播放（小文件，大文件使用audio）。

使用方式 script方式

直接引入dist下的recorder.js即可

let recorder = new Recorder();

npm方式

安装：

npm i js-audio-recorder

调用：

import Recorder from "js-audio-recorder";

let recorder = new Recorder();

API 基本方法

// 开始录音
recorder.start();
// 暂停录音
recorder.pause();
// 继续录音
recorder.resume()
// 结束录音
recorder.stop();
// 录音播放
recorder.play();
// 销毁录音实例，释放资源，fn为回调函数，
recorder.destroy(fn);
recorder = null;

下载功能

// 下载pcm文件
recorder.downloadPCM();
// 下载wav文件
recorder.downloadWAV();
// 重命名pcm文件，wav也支持
recorder.downloadPCM("重命名");

获取录音时长

// 回调持续输出时长
recorder.onprocess = function(duration) {
    console.log(duration);
}
// 手动获取录音时长
console.log(recorder.duration);

默认配置

sampleBits，采样位数，默认是16
sampleRate，采样频率，浏览器默认的，我的chrome是48000
numChannels，声道数，默认是1

传入参数

new Recorder时支持传入参数，

{
    sampleBits: 16,         // 采样位数，范围8或16
    sampleRate: 16000,      // 采样率，范围11025、16000、22050、24000、44100、48000
    numChannels: 1,         // 声道，范围1或2
}

注意

使用127.0.0.1或localhost尝试，因为getUserMedia在高版本的chrome下需要使用https。

兼容性

主要是以下几个方面：

Web Audio Api

https://caniuse.com/#search=w...

getUserMedia

https://caniuse.com/#search=g...

Typed Arrays

https://caniuse.com/#search=t...

欢迎访问和查看：recorder。

其他资源

基于阿里云实现简单的语音识别功能
web Audio学习与音频播放
web Audio实现pcm音频数据收集
js实现pcm数据编码
js转化pcm到wav格式与播放

服务器托管超融合服务器 web端基于webrtc实现直播手机端播放js插件 js实现视频播放 JS留言功能实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/59173.html

纯js实现web端录音与播放功能

摘要：纯实现端录音功能，功能并不是特别多，逐步增加中，详细地址。使用转码到并播放小文件，大文件使用。其他资源基于阿里云实现简单的语音识别功能学习与音频播放实现音频数据收集实现数据编码转化到格式与播放纯js实现web端录音功能，功能并不是特别多，逐步增加中，详细地址：github。 getUserMedia在非localhost和127的情况下，需要开启https，由于腾讯云的没备案，dem...

lanffy 2019-08-23 16:58 评论0 收藏0
微信开发之微信jssdk录音功能开发

项目需求简单描述用户长按录音，松手后直接结束录音，结束录音后，用户可以选择重新录音、播放刚才的录音，上传录音（这里的上传录音指上传到自己服务器，上传步骤是，前端调用wx.uploadVoice，后台再到微信服务器下载音频文件，上传到自己的服务器）。注意，音频文件自上传时间算起在微信服务器的有效期为3天。由于后台从微信服务器下载的音频文件是amr格式的，需要后台先把amr文件转换成MP3，前端用a...

bingchen 2019-08-23 12:28 评论0 收藏0
微信开发之录音上传、下载、转码

摘要：具体请看我在提问里的回答下载七牛云文件间歇性失败总结至此，在微信开发中关于录音这一块儿的功能，就已经介绍完毕。 showImg(https://segmentfault.com/img/remote/1460000013595733?w=454&h=339); 原文是在我自己博客中，小伙伴也可以点阅读原文进行跳转查看，还有好听的背景音乐噢~ 一年的时间里，前前后后都在搞微信开发...

余学文 2019-06-28 18:30 评论0 收藏0
HTML用javascrip在浏览器上实现语音输入和语义理解功能（speex压缩）

摘要：返回的字串如下我要听三国演义这本书正在努力搜索中，请稍等我要听三国演义这本书三国演义通过解析这段，可以得到类型，用于查询书名，是表示行为是播放。基于javascript用olamisdk实现web端语音识别语义理解（speex压缩）转载请注明原文地址：传送 olami 开放平台 sdk 除了支持语音识别功能外，更强大的在于支持语义理解功能，在 Android 平台和 iOS 平台都...

darkbug 2019-08-01 17:20 评论0 收藏0
HTML用javascrip在浏览器上实现语音输入和语义理解功能（speex压缩）

摘要：返回的字串如下我要听三国演义这本书正在努力搜索中，请稍等我要听三国演义这本书三国演义通过解析这段，可以得到类型，用于查询书名，是表示行为是播放。基于javascript用olamisdk实现web端语音识别语义理解（speex压缩）转载请注明原文地址：传送 olami 开放平台 sdk 除了支持语音识别功能外，更强大的在于支持语义理解功能，在 Android 平台和 iOS 平台都...

沈建明 2019-08-20 18:31 评论0 收藏0