Loading [MathJax]/jax/output/CommonHTML/config.js
社区首页 >问答首页 >wav :如何使用recorder.js将音频分成1秒的块并导出为JavaScript文件?

wav :如何使用recorder.js将音频分成1秒的块并导出为JavaScript文件?
EN

Stack Overflow用户
提问于 2019-03-18 15:14:53
回答 1查看 1.6K关注 0票数 0

我想录制语音,自动将录制的语音(或音频斑点)分成1秒的块,将每个块导出为wav文件并发送到后端。这应该在用户说话时异步发生。

我目前使用以下recorder.js库来完成上述任务https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js

我的问题是,随着时间的推移,blob/wave文件会变得更大。我认为这是因为数据积累并使区块变得更大。因此,随着时间的推移,我实际上发送的不是连续的1秒数据块,而是累积的数据块。

我不知道在我的代码中这个问题是在哪里引起的。这可能发生在recorder.js库内部。如果有人使用记录器js或任何其他JavaScript方法来执行类似的任务,如果您可以浏览一下这段代码,并让我知道它在哪里崩溃,那就很感谢了。

这是我的JS代码

代码语言:javascript
代码运行次数:0
复制
var gumStream; // Stream from getUserMedia()
var rec; // Recorder.js object
var input; // MediaStreamAudioSourceNode we'll be recording
var recordingNotStopped; // User pressed record button and keep talking, still not stop button pressed
const trackLengthInMS = 1000; // Length of audio chunk in miliseconds
const maxNumOfSecs = 1000; // Number of mili seconds we support per recording (1 second)


// Shim for AudioContext when it's not available. 
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioContext //audio context to help us record

var recordButton = document.getElementById("recordButton");
var stopButton = document.getElementById("stopButton");

//Event handlers for above 2 buttons
recordButton.addEventListener("click", startRecording);
stopButton.addEventListener("click", stopRecording);

//Asynchronous function to stop the recoding in each second and export blob to a wav file
const sleep = time => new Promise(resolve => setTimeout(resolve, time));

const asyncFn = async() => {
  for (let i = 0; i < maxNumOfSecs; i++) {
    if (recordingNotStopped) {
      rec.record();
      await sleep(trackLengthInMS);
      rec.stop();

      //stop microphone access
      gumStream.getAudioTracks()[0].stop();

      //Create the wav blob and pass it on to createWaveBlob
      rec.exportWAV(createWaveBlob);
    }
  }
}

function startRecording() {
  console.log("recordButton clicked");
  recordingNotStopped = true;
  var constraints = {
    audio: true,
    video: false
  }

  recordButton.disabled = true;
  stopButton.disabled = false;

  //Using the standard promise based getUserMedia() 
  navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {

    //Create an audio context after getUserMedia is called
    audioContext = new AudioContext();

    // Assign to gumStream for later use 
    gumStream = stream;

    //Use the stream 
    input = audioContext.createMediaStreamSource(stream);

    //Create the Recorder object and configure to record mono sound (1 channel)
    rec = new Recorder(input, {
      numChannels: 1
    });

    //Call the asynchronous function to split and export audio
    asyncFn();
    console.log("Recording started");

  }).catch(function(err) {
    //Enable the record button if getUserMedia() fails
    recordButton.disabled = false;
    stopButton.disabled = true;
  });
}

function stopRecording() {
  console.log("stopButton clicked");
  recordingNotStopped = false;

  //disable the stop button and enable the record button to  allow for new recordings
  stopButton.disabled = true;
  recordButton.disabled = false;

  //Set the recorder to stop the recording
  rec.stop();

  //stop microphone access
  gumStream.getAudioTracks()[0].stop();
}

function createWaveBlob(blob) {
  var url = URL.createObjectURL(blob);

  //Convert the blob to a wav file and call the sendBlob function to send the wav file to the server
  var convertedfile = new File([blob], 'filename.wav');
  sendBlob(convertedfile);
}

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-04-04 02:13:50

Recorder.js保留了它录制的音频的录制缓冲区。调用exportWAV时,记录缓冲区将被编码,但不会被清除。在再次调用record之前,您需要在录音机上调用clear,以便从记录缓冲区中清除前一段音频。

这就是如何在上面的代码中修复它。

代码语言:javascript
代码运行次数:0
复制
//Extend the Recorder Class and add clear() method
Recorder.prototype.step = function () {
    this.clear();
};

//After calling the exportWAV(), call the clear() method
rec.exportWAV(createWaveBlob);
rec.step();
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55224534

复制
相关文章
【Apache Ant】ANT解析以及ANT在myEclipse中的使用
Apache Ant,是一个将软件编译、测试、部署等步骤联系在一起加以自动化的一个工具,大多用于Java环境中的软件开发。
谙忆
2021/01/21
1.5K0
【Apache Ant】ANT解析以及ANT在myEclipse中的使用
为什么在静态方法中不能使用this
在JVM的运行时数据区中有个虚拟机栈(或Java栈),在它的里面是由栈帧'叠加'而成.栈帧由局部变量表,操作数栈,动态连接,方法返回地址等组成.
书唐瑞
2022/06/02
1.9K0
为什么在静态方法中不能使用this
在vue的v-for中,key为什么不能用index?
在前端中,主要涉及的基本上就是 DOM的相关操作 和 JS,我们都知道 DOM 操作是比较耗时的,那么在我们写前端相关代码的时候,如何减少不必要的 DOM 操作便成了前端优化的重要内容。
bb_xiaxia1998
2022/10/01
1.1K0
在vue的v-for中,key为什么不能用index?4
在前端中,主要涉及的基本上就是 DOM的相关操作 和 JS,我们都知道 DOM 操作是比较耗时的,那么在我们写前端相关代码的时候,如何减少不必要的 DOM 操作便成了前端优化的重要内容。
bb_xiaxia1998
2023/01/06
1.1K0
cmake:在Makefile中运行ant脚本
版权声明:本文为博主原创文章,转载请注明源地址。 https://blog.csdn.net/10km/article/details/51832822
10km
2019/05/25
1.7K0
为什么我退出了编程工作
从很小的时候就在印度出生和成长,在那里我们只有少数的职业选择。工程师和医生是很多人的头两个选择。现在,随着互联网的兴起,事情正在发生变化,但是父母期望孩子成为医生或工程师的情况并不少见。
程序那些事儿
2023/03/07
3150
为什么我退出了编程工作
在ReadWriteLock类中读锁为什么不能升级为写锁?
关于读写锁里面有一个锁升级和降级的问题,也就是写锁可以降级为读锁,但是读锁却不能升级为写锁。那么为什么是这样?
我是攻城师
2018/08/03
3K0
nextline函数_在JAVA中Scanner中的next()和nextLine()为什么不能一起使用?
Java 输入一直是一个坑,本来一直用 Scanner,但一直搞不懂换行符啥的,就用 BufferReader ,但前不久大疆笔试需要持续输入,早忘了 Scanner 怎么写,而那个场景用 Scanner 很好实现 ……
全栈程序员站长
2022/09/05
2.7K0
java中的ant详解
概念到处可查到,形象来说,你要把代码从某个地方拿来,编译,再拷贝到某个地方去等等操作,当然不仅与此,但是主要用来干这个
botkenni
2021/09/23
1.1K0
晶振为什么不能放置在PCB边缘?
某行车记录仪,测试的时候要加一个外接适配器,在机器上电运行测试时发现超标,具体频点是84MHz、144MHz、168MHz,需要分析其辐射超标产生的原因,并给出相应的对策,辐射测试数据如下:
AI 电堂
2022/12/08
3730
晶振为什么不能放置在PCB边缘?
我在 Z 厂的半年工作总结
Z厂前: 在一家K12教育公司(简称S厂),定位是测试开发岗位,主要负责效能工具研发、自动化、服务端压测、测试环境治理,带5人小团队.S厂的测试和测开分发的,测开不负责业务,所以到最后会感觉到脱离业务比较多,S厂离职后面试很吃亏,比如: 美团、阿里、便利峰,技术能力没啥问题,主要是简历中无法体现所负责的业务价值.
测试加
2022/04/27
6660
我在 Z 厂的半年工作总结
Ant中的SVN 使用
最近在调整SDK的打包脚本的时候重新树立了一下ant下面的SVN命令的用法。先简单列举下,以后有精力再慢慢整理细说吧。 svn copy 多用于生成当前版本的tag <arg line="copy SVN_URL1 SVN_URL2 --no-auth-cache --non-interactive --username USERNAME --password PASSWORD -m MSG" /> </exec> svn add 多用于提交在版本打包过程生成的重要文件,例如代码混淆生成的mapp
子勰
2018/05/22
8900
在java中String类为什么要设计成final?
final的出现就是为了为了不想改变,而不想改变的理由有两点:设计(安全)或者效率。
一觉睡到小时候
2019/07/02
9330
在java中String类为什么要设计成final?
在java中String类为什么要设计成final?
String很多实用的特性,比如说“不可变性”,是工程师精心设计的艺术品!艺术品易碎!用final就是拒绝继承,防止世界被熊孩子破坏,维护世界和平!
用户1205080
2018/09/12
1.1K0
在java中String类为什么要设计成final?
工作中我常用的分析算法
统计性描述更为侧重单变量的描述,即描述X、X与X之间的关系,在通过X去描述Y的时候,我更关心X与Y间存在何种关系,此时便需要借助散点图去印证X与Y相关的内在一致性,并通过方差、协方差过渡到统计相关的本质。
许卉
2019/09/24
6310
工作中我常用的分析算法
在IT开发中工作种类的分类
可能很多同学在学习python之前都听说过什么:前端程序员,后端程序员,安全工程师,运维,爬虫,全栈程序员等等各种各样的头衔名称,搞得大家都不知道该怎么选择了。我当初学编程之前也有过类似的经历,所以这里我尽可能给大家解释明白。
python自学网
2021/11/27
9510
在IT开发中工作种类的分类
我在 IBM 从事开源工作的十一年
编者说:  在国际知名公司从事开源工作是一种怎样的体验?  目前越来越多的来自中国的企业、组织或开发者,都纷纷投身到全球技术的开源生态建设大潮中,甚至将开源作为一份全职工作。那在如火如荼的开源热浪中,国内开源爱好者们在国际开源舞台上的参与度如何?作为开源新兵,又该如何步入或活跃于国际开源组织,在开源社区中建立自己的声誉和话语权呢?  带着这些问题,腾源会采访了在 IBM 公司从事 11 年开源工作的高级工程师侯胜博,和他聊聊在 IBM 参与开源背后的那些成长故事,以及在开源社区参与大规模协作过程中所收
腾源会
2021/11/11
5360
聊聊我在腾讯和字节工作感受
大家好,我是鱼皮,最近这段时间,应该是正值大三的小伙伴最忙碌的时候,不少同学都在准备秋季校园招聘。
程序员鱼皮
2021/08/12
3.3K0
谈谈在我在外包公司工作的经历
来源:zhihu.com/question/52994936/answer/958545980
JAVA葵花宝典
2020/11/04
2.5K0
谈谈在我在外包公司工作的经历
在应用开发中,我为什么选择 Flutter 而不是 React Native ?
作为一位开发人员,我想在本文中与大家聊聊跨平台开发领域的两大核心选项——Flutter 与 React Native 框架,并介绍我自己为什么更偏爱 Flutter。
逆锋起笔
2021/01/28
3.3K0

相似问题

输入的defaultValue在ant设计上不能正常工作

6606

为什么我的Ant主构建文件不能正常工作?

32

为什么`<Input>`在Ant设计中没有变化?

12

Ant设计卡不能正确对齐

239

为什么我的混合模型循环不能工作?(RStudio,交叉设计)

14
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档