html5 getusermedia api,html5 – 与getUserMedia / Web Audio API同步播放和录制音频

我目前正在为音乐家开发基于网络的协作录制平台,类似于移植到网络上的基本DAW(具有额外的社交/共享功能).无论如何,我的目标是让它100%无闪存,所以我一直在阅读很多关于

HTML5的内容,特别是Web Audio API(

this书帮了很多,顺便说一下).

为了使用getUserMedia()记录来自用户麦克风的音频,我制作了自定义版本RecorderJS.简而言之,我将getUserMedia()的输出路由到ScriptProcessorNode,每4096个样本写入inputBuffer的内容到一个稍后导出到PCM WAV文件的数组.到目前为止,它工作正常.

问题是录制过程的开始涉及两件事:播放所有先前录制的曲目,因此音乐家有一个参考播放,并开始实际录制(将缓冲区写入阵列,即).

虽然当用户正在录制时,麦克风的声音没有听得见的延迟或延迟,但是当录制结束并且播放了所有的轨道时,新录制的轨道稍有延迟.

是什么导致这个?有哪些可能的解决方案?

我以为我可以通过将回放发送到同一处理器节点然后找出它们实际开始的时间来找到两个事件之间的时间差,以补偿任何延迟.

为此,我需要让ScriptProcessorNode接收通道1和2上的getUserMedia内容,并在通道3和4上播放,但我无法完成这项工作.

我尝试将两个源路由到处理器节点,我也尝试使用Merger / Splitter,但似乎没有任何工作.它们都到达通道1和2上的处理器节点,而3和4则为空.

对不起,如果这是偏离主题或不包含实际代码(我很乐意在必要时提供),但是在这个领域没有太多的东西,所以任何想法都会非常受欢迎.

提前致谢!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
getUserMedia是一个Web API,用于在浏览器中访问用户的媒体设备,例如摄像头和麦克风。通过getUserMedia,您可以使用JavaScript代码从用户的设备中获取音频、视频或者音视频流。 要使用getUserMedia录制音频,您可以按照以下步骤进行操作: 1. 获取用户媒体设备的许可:首先,您需要请求用户的许可来访问其麦克风。您可以使用`navigator.mediaDevices.getUserMedia`方法来请求许可,并指定要获取的媒体类型为音频。示例代码如下: ```javascript navigator.mediaDevices.getUserMedia({ audio: true }) .then(function(stream) { // 许可已获得,可以开始录制音频 }) .catch(function(error) { // 发生错误,无法访问用户的麦克风 }); ``` 2. 录制音频:一旦用户授予了访问麦克风的许可,您将获得一个媒体流对象。您可以使用这个流对象来录制音频。示例代码如下: ```javascript navigator.mediaDevices.getUserMedia({ audio: true }) .then(function(stream) { const mediaRecorder = new MediaRecorder(stream); // 开始录制音频 mediaRecorder.start(); // 在录制过程中,可以监听dataavailable事件来获取录制音频数据 mediaRecorder.addEventListener('dataavailable', function(event) { const audioData = event.data; // 处理音频数据 }); // 在录制完成后,可以监听stop事件来停止录制 mediaRecorder.addEventListener('stop', function() { // 录制已停止 }); }) .catch(function(error) { // 发生错误,无法访问用户的麦克风 }); ``` 3. 停止录制:当您想要停止录制音频时,可以调用`mediaRecorder.stop()`方法。停止录制后,将触发`stop`事件。 这就是使用getUserMedia录制音频的基本步骤。您可以根据需要进行进一步的处理和操作,例如保存录制音频文件或进行实时处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值