- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我需要了解音频缓冲区的工作原理,为此我想按以下顺序执行:Microphone-> Auto-> Processor-> Manual-> Buffer-> Auto-> Speakers
。 Auto 表示自动数据传输和手动我通过 processor.onaudioprocess
中的代码自己完成。所以我有以下代码:
navigator.getUserMedia = navigator.getUserMedia ||navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
var audioContext;
var myAudioBuffer;
var microphone;
var speakers;
if (navigator.getUserMedia) {
navigator.getUserMedia(
{audio: true},
function(stream) {
audioContext = new AudioContext();
//STEP 1 - we create buffer and its node
speakers = audioContext.destination;
myAudioBuffer = audioContext.createBuffer(1, 22050, 44100);
var bufferNode = audioContext.createBufferSource();
bufferNode.buffer = myAudioBuffer;
bufferNode.connect(speakers);
bufferNode.start();
//STEP 2- we create microphone and processor
microphone = audioContext.createMediaStreamSource(stream);
var processor = (microphone.context.createScriptProcessor ||
microphone.context.createJavaScriptNode).call(microphone.context,4096, 1, 1);
processor.onaudioprocess = function(audioProcessingEvent) {
var inputBuffer = audioProcessingEvent.inputBuffer;
var inputData = inputBuffer.getChannelData(0); // we have only one channel
var nowBuffering = myAudioBuffer.getChannelData(0);
for (var sample = 0; sample < inputBuffer.length; sample++) {
nowBuffering[sample] = inputData[sample];
}
}
microphone.connect(processor);
},
function() {
console.log("Error 003.")
});
}
但是,此代码不起作用。没有错误,只有沉默。我的错误在哪里?
最佳答案
既然 OP 肯定想使用缓冲区。我写了一些代码,你可以 try out on JSFiddle .诀窍部分肯定是您必须以某种方式将来自麦克风的输入传递到某个“目的地”以使其得到处理。
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
// TODO: Figure out what else we need and give the user feedback if he doesn't
// support microphone input.
if (navigator.getUserMedia) {
captureMicrophone();
}
// First Step - Capture microphone and process the input
function captureMicrophone() {
// process input from microphone
const processAudio = ev =>
processBuffer(ev.inputBuffer.getChannelData(CHANNEL));
// setup media stream from microphone
const microphoneStream = stream => {
const microphone = audioContext.createMediaStreamSource(stream);
microphone.connect(processor);
// #1 If we don't pass through to speakers 'audioprocess' won't be triggerd
processor.connect(mute);
};
// TODO: Handle error properly (see todo above - but probably more specific)
const userMediaError = err => console.error(err);
// Second step - Process buffer and output to speakers
const processBuffer = buffer => {
audioBuffer.getChannelData(CHANNEL).set(buffer);
// We could move this out but that would affect audio quality
const source = audioContext.createBufferSource();
source.buffer = audioBuffer;
source.connect(speakers);
source.start();
}
const audioContext = new AudioContext();
const speakers = audioContext.destination;
// We currently only operate on this channel we might need to add a couple
// lines of code if this fact changes
const CHANNEL = 0;
const CHANNELS = 1;
const BUFFER_SIZE = 4096;
const audioBuffer = audioContext.createBuffer(CHANNELS, BUFFER_SIZE, audioContext.sampleRate);
const processor = audioContext.createScriptProcessor(BUFFER_SIZE, CHANNELS, CHANNELS);
// #2 Not needed we could directly pass through to speakers since there's no
// data anyway but just to be sure that we don't output anything
const mute = audioContext.createGain();
mute.gain.value = 0;
mute.connect(speakers);
processor.addEventListener('audioprocess', processAudio);
navigator.getUserMedia({audio: true}, microphoneStream, userMediaError);
}
// #2 Not needed we could directly pass through to speakers since there's no
// data anyway but just to be sure that we don't output anything
const mute = audioContext.createGain();
mute.gain.value = 0;
mute.connect(speakers);
processor.addEventListener('audioprocess', processAudio);
navigator.getUserMedia({audio: true}, microphoneStream, userMediaError);
}
我在那里写的代码看起来很脏。但由于您有一个大型项目,您绝对可以更清晰地构建它。
我不知道你想达到什么目的,但我绝对建议你看看 Recorder.js
您缺少的要点是,您将获得一个传递到 createScriptProcessor
的输出缓冲区,因此您所做的所有 createBuffer
操作都是不必要的。除此之外,您走在正确的轨道上。
这将是一个可行的解决方案。 Try it out on JSFiddle!
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
if (navigator.getUserMedia) {
captureMicrophone();
}
function captureMicrophone() {
const audioContext = new AudioContext();
const speaker = audioContext.destination;
const processor = audioContext.createScriptProcessor(4096, 1, 1);
const processAudio =
ev => {
const CHANNEL = 0;
const inputBuffer = ev.inputBuffer;
const outputBuffer = ev.outputBuffer;
const inputData = inputBuffer.getChannelData(CHANNEL);
const outputData = outputBuffer.getChannelData(CHANNEL);
// TODO: manually do something with the audio
for (let i = 0; i < inputBuffer.length; ++i) {
outputData[i] = inputData[i];
}
};
const microphoneStream =
stream => {
const microphone = audioContext.createMediaStreamSource(stream);
microphone.connect(processor);
processor.connect(speaker);
};
// TODO: handle error properly
const userMediaError = err => console.error(err);
processor.addEventListener('audioprocess', processAudio);
navigator.getUserMedia({audio: true}, microphoneStream, userMediaError);
}
关于javascript - HTML 5 : AudioContext AudioBuffer,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38282611/
我的代码在 Chrome 中运行良好,但现在我认为由于 Chrome 更新,它停止运行了。 var audioContext = new(window.audioContext || window.w
我想在我的游戏中使用麦克风(点击,游戏有音乐和音效,我使用 HTML5 音频元素),如果我添加(仅!)这一行: var audioCtx = new AudioContext (); 并在 Chrom
我正在开发一个 JavaScript 库 ( https://github.com/yvesgurcan/web-midi-player ) 以在 Web 应用程序中启用 MIDI 播放。该库依赖于
我正在开发一个 JavaScript 库 ( https://github.com/yvesgurcan/web-midi-player ) 以在 Web 应用程序中启用 MIDI 播放。该库依赖于
作为这篇文章的后续:How to rapidly play multiple copies of a soundfile in javascript我创建了一个小的演示页面来说明我的问题的核心。 我的
我以前使用过 javascript Audio(),但现在我需要在音频中添加一些混响效果,我正在使用使用 AudioContext api 的 reverb.js。我有可用的开始属性,但没有暂停属性?
我遵循一种模式使用 Webaudio 将声音附加到对象。它运行良好,但是,如果我在一个页面上生成多个项目并附加此脚本,我会收到一个 console.log,表明我已经超过了每页可用的 audioCon
使用 WebAudio API 播放直播流的正确方法是什么。 我正在尝试使用以下代码,但是我看到的只是正在下载 MP3,但没有播放;可能 MediaElementSource 需要一个文件,而不是连续
受此启发SO answer ,我有这段代码,它可以工作,但它会弹出并且听起来不太流畅。 $('.btn').each(initDraggable); function initDraggable()
我有两个一秒音频源,如下所示: var context = system.AudioContext(); var source = context.createBufferSource(); var
我知道你不能多次演奏振荡器,所以我编写了一个函数,每次都会创建一个新的振荡器: function playFrequency(f, t0, t1){ console.log(f, t0, t1
我试图在三星 Galaxy SII 4G 上的最新版本的 Chrome (34.0.1847.114) 中使用 AudioContext(),但由于某种原因 AudioContext() 不存在,we
我已经关注了这个 tutorial并提出该代码: context = new AudioContext(); play(frequency) { const o = this.context.
如果我现在需要在 HTML5 中使用音频 API,我应该使用哪一个?我看到两个可用的 API:Audio API 和 Web Audio API。 基于 this documentation from
我正在构建一个音乐播放器,我想根据当前播放的轨道添加脉动效果。 这里是我想要的一些例子: http://www.htmlfivewow.com/demos/hal/index.html http://
我正在分析一个音频文件,以便使用 channelData 来驱动我的 webapp 的另一部分(基本上是基于音频文件绘制图形)。播放的回调函数如下所示: successCallback(mediaSt
所以,我刚刚发现你可以 record sound using javascript 。太棒了! 我立即创建了一个新项目来自己做一些事情。然而,当我打开示例脚本的源代码时,我发现根本没有任何解释性注释。
我正在寻找一种使用浏览器中的 JavaScript 生成和播放 WAVE 表单的方法。该方法解释如下:http://js.do/blog/sound-waves-with-javascript/ ,非
我正在尝试使用 XMLHttpRequests 和 AudioContext 加载音频,我的代码如下所示: class AudioExample audioContext: null
var audioContext = new window.AudioContext chrome.runtime.onMessage.addListener( function(imageUrl
我是一名优秀的程序员,十分优秀!