如何更改麦克风实时音频的播放速度(使用缓冲区)?

2023-12-30

我听说通过改变播放速度我们可以修改音频的频率。我在这里测试过:https://teropa.info/blog/2016/08/10/Frequency-and-pitch.html https://teropa.info/blog/2016/08/10/frequency-and-pitch.html

但问题是我需要一个录制的音频文件才能做到这一点。据我发现,网络音频无法改变现场音频的播放速度。我一直在想,如果我们将音频保存在缓冲区中,我们就可以改变它的播放速度,从而改变频率。

我是网络音频 API 的新手。我发现一篇文章通过将实时音频保存到缓冲区来记录它。https://docs.sumerian.amazonaws.com/articles/webaudio-1/ https://docs.sumerian.amazonaws.com/articles/webaudio-1/

我想要的是:-

  1. 从麦克风获取音频。
  2. 将其保存到缓冲区中。
  3. 更改播放速度。
  4. 在扬声器上播放。

演示如何更改 buffernode 的播放速度https://mdn.github.io/webaudio-examples/decode-audio-data/ https://mdn.github.io/webaudio-examples/decode-audio-data/

但我希望使用现场麦克风音频来代替录制的声音。

这是我对小提琴的尝试

https://jsfiddle.net/5dza62b8/13/ https://jsfiddle.net/5dza62b8/13/

var audioContext = new(window.AudioContext || window.webkitAudioContext)();
var streamSource, scriptNode, bufferSource, audioBuffer;
var playbackControl = document.querySelector('#playback-rate-control');
var playbackValue = document.querySelector('#playback-rate-value');

// define variables

window.start_audio = function() {
  navigator.mediaDevices.getUserMedia({
    audio: true
  }).then((stream) => {

    alert("Got audio stream from microphone!");
    audioContext = new AudioContext();
    // Create an AudioNode from the stream.
    streamSource = audioContext.createMediaStreamSource(stream);
    scriptNode = audioContext.createScriptProcessor(2048, 1, 1);
    bufferSource = audioContext.createBufferSource();


    // Whenever onaudioprocess event is dispatched it creates a buffer array with the length bufferLength
    scriptNode.onaudioprocess = (audioProcessingEvent) => {
      realtimeBuffer = audioProcessingEvent.inputBuffer.getChannelData(0);
      // Create an array of buffer array
      audioBuffer.push(realtimeBuffer);
    }

    bufferSource.buffer = audioBuffer;
    bufferSource.playbackRate.value = 0.8;

    streamSource.connect(scriptNode);
    bufferSource.connect(audioContext.destination);
    bufferSource.start();

  }).catch((e) => {

    alert(e.name + ". " + e.message);

  });
}


// wire up buttons to stop and play audio, and range slider control
playbackControl.addEventListener('input', function() {
  bufferSource.playbackRate.value = playbackControl.value;
  playbackValue.innerHTML = playbackControl.value;
});


这可能是一个比您想象的更难的问题 - 如果播放速度大于 1,您将尝试播放尚未发生的声音!

不过一般来说,你can使用网络音频 API 为实时麦克风输入添加效果 - 以下是 MDN 文档中的示例,该示例向输入添加过滤器:https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createMediaStreamSource https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createMediaStreamSource

如果您想减慢现场音频的速度,可以is可能的——但有一些注意事项。允许您更改播放速率的 Web Audio 节点是 BufferSourceNode,它依赖于您之前加载的缓冲区。但是,您可以通过使用自定义 AudioWorklet 将数据增量放入缓冲区并使用 BufferSourceNode 进行播放来解决此问题。需要考虑的一件事是你会让这种情况持续多久——随着时间的推移,缓冲区会变得越来越大,迟早你的计算机会耗尽内存!

这非常复杂,对于第一次涉足网络音频来说可能并不理想,但了解音频工作的最佳起点是这里:https://developers.google.com/web/updates/2017/12/audio-worklet https://developers.google.com/web/updates/2017/12/audio-worklet

使用音频工作集,您还可以研究一些更复杂的算法,这些算法允许您更改声音的音高而不改变其长度。https://en.wikipedia.org/wiki/Audio_time_stretching_and_pitch_scaling https://en.wikipedia.org/wiki/Audio_time_stretching_and_pitch_scaling

如果您刚刚开始使用网络音频,我的建议是您编写一些可以录制声音的东西,then更改其播放速率。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何更改麦克风实时音频的播放速度(使用缓冲区)? 的相关文章

  • 使用 Charts.js 禁用动画

    我在使用 Charts js 关闭动画时遇到一些问题 这是我的代码 var pieData value 30 color F38630 value 50 color E0E4CC value 100 color 69D2E7 var myP
  • 获取 pdf 第 1 页(共 2 页)的图像

    我正在使用 html2canvas 和 jsPDF 以及 Angular4 创建图像 我想将此图像放置在 2 页生成的 pdf 的第 1 页上 但似乎这条线 doc save test pdf 需要在函数内部htm2canvas 因为如果我
  • 尝试使用 CasperJS 跟踪 iframe 中的链接

    我正在尝试使用CasperJS http casperjs org index html跟踪 iframe 中的链接 但我似乎无法获取 iframe 的文档 这是使用我找到的 iframe 示例页面进行的测试 第三个 iframe 有一个名
  • Facebook 登录无法在移动浏览器中使用

    我使用 react facebook login 在我的网站中实现了 facebook 登录module https github com keppelen react facebook login 我在 ComponentDidMount
  • React JS“this”没有按预期工作

    我有下面的代码 save function var this this console log this refs itemText this setState isEditing false function console log In
  • 标记内的值发生变化时调用函数

    JavaScript 有没有什么方法可以在段落标记的值更改时调用函数 概述 HTML p 00 00 p
  • 上传前如何检查图片的宽度和高度

    对于图片上传 我编写了以下 html 代码
  • 元素在主体内找不到足够的空间 - JavaScript 样式

    相关信息 该页面包含两个元素 An
  • 根据数据更改图例颜色高图表

    我可以根据数据动态设置列的颜色 但无法弄清楚如何更改图例中的颜色 请注意 jsfiddle 最新的条形图是绿色的 但图例是蓝色的 有没有办法改变列颜色也会改变图例颜色 这是我用于列颜色的代码 jsfiddle http jsfiddle n
  • 单击时突出显示文本(javascript jquery html)

    当您在所有浏览器中双击某个单词时 它们会自动突出显示单击下的单词 但是否有可能找到一种方法exact单击一下就会发生同样的事情吗 我想这涉及到的事情可能是 TextRange 的东西 对所有段落 或整个正文或 div 的 onclick 做
  • javascript 中一次仅选中一个复选框

    I have 3复选框 我只想1一次选中的复选框 下面是我的 html 小提琴 JS小提琴 https jsfiddle net n03jLhqa 我想要这个工作在IE8还请建议如何做 这个怎么样 fiddle http jsfiddle
  • 按钮导致页面重新加载

    我在我的页面上使用 html 和 jquery 在我的 html 中 我有一个按钮 单击该按钮将触发一个功能 当页面加载时 我调用文档准备中的主函数 这是我的代码 div div
  • 使用 htaccess 重写规则重定向后 CSS 未加载

    我有以下用户个人资料网址的简写 RewriteRule w profile php name of user 1 当我这样做时 该网站使用适当的 css 文件进行样式设置site com name of user 但当我这样做的时候却不是s
  • onClick 事件适用于触摸屏设备上的触摸吗?

    我用过onclick我的网站上的活动 但是 当我在谷歌浏览器的开发人员模式移动视图中打开它时 触摸使用鼠标单击的元素没有任何反应 所以我的问题是 我还必须添加吗ontouch事件连同onclick事件或 onClick 事件适用于所有触摸屏
  • Firefox 和 Chrome 为 offsetTop 提供了不同的值

    我试图相对于输入字段定位一个跨度元素 让我们称之为 工具提示跨度 为此 我将工具提示跨度和输入字段包装在另一个跨度元素中 我们称之为 包装器跨度 该元素具有position relative 然后我设置position absolute在工
  • Modernizr 未将类应用于 html 标签

    我目前正在构建一个网站 我需要使用 Modernizr 但由于某种原因 它没有将类应用到 html 标签 因为它应该 我的代码如下所示
  • python 函数返回 javascript date.getTime()

    我正在尝试创建一个简单的 python 函数 它将返回与 javascript 相同的值new Date getTime 方法 如所写here http www w3schools com js js dates asp javascrip
  • 具有相等宽度和高度 TD 的响应式表格

    如何创建每个单元格 TD 具有相同宽度和高度的响应式 HTML 表格 因此 当我调整浏览器窗口的大小或调整表格容器的大小时 表格将调整大小 但每个单元格将具有相同的高度和宽度 基金会不关心这个 当我用固定宽度和高度 以像素为单位 初始化 T
  • 使用 BASH 和 AWK 创建 HTML 表

    我在创建 html 表来显示文本文件中的统计信息时遇到问题 我确信有 100 种方法可以做得更好 但这里是 以下脚本中的注释显示了输出 bin bash function getapistats curl s http api exampl
  • Chrome 中的 addEventListener

    我正在关注 Lynda com 上有关新 DOM 事件模型的教程 这是我正在使用的代码 function addEventHandler oNode sEvt fFunc bCapture if typeof window event un

随机推荐