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



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

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

我是Web-Audio API的新手。我找到了一篇文章,可以通过将其保存到缓冲区来记录现场音频。https://docs.sumerian.amazonaws.com/articles/webaudio-1/

我想要的是: -

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

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

,但我希望使用Live Mic音频代替录制的声音。

这是我在小提琴上的尝试

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 使用Web音频API添加效果为实时麦克风输入 - 以下是MDN文档中的一个示例,该示例将过滤器添加到输入中:https://developer。mozilla.org/en-us/docs/web/api/audiocontext/createmediastreamsource

如果您想减慢实时音频的速度,则可能会引起一些警告。允许您更改播放率的Web音频节点是一个BufferSourCenode,它依赖于您之前已加载缓冲区。但是,您可能可以通过使用自定义AudioWorklet将数据放入缓冲区中并使用BufferSourCenode播放它来解决此问题。要考虑的一件事是,您要花多长时间 - 随着时间的流逝,缓冲区将不断越来越大,而您的计算机迟早会耗尽内存!

这是非常参与的,并且可能不是第一次涉足Web音频的理想选择,但是了解音频工作点的最佳起点点在这里:https://develovelers.google.com/web/updates/2017/12/Audio-worklet

使用音频工作点,您还可以研究一些更复杂的算法,这些算法可以使您在不更改其长度的情况下更改声音的音调。https://en.wikipedia.org/wiki/audio_time_stretching_and_pitch_scaling

如果您只是开始使用Web音频,我的建议是您写一些让您录制声音的内容,然后更改其播放率。

最新更新