标签: web-audio-api

你如何在网络音频api中使用waveshapernode？特别是曲线Float32Array属性？

嗨,我正在使用WebAudio API.我阅读HTML5 Web Audio API,从javax.sound移植并获得失真链接,但没有像java API那样获得良好的质量.我从服务器获取带有签名字节的PCM数据.然后我必须将其改为16位格式.改变我正在使用(firstbyte << 8 | secondbyte)但我无法获得良好的声音质量.转换或任何其他方式有什么问题,以获得良好的声音质量？

编辑:清除代码和播放器(在Github上),以便更容易设置频率

我正在尝试使用Karplus Strong字符串合成算法合成字符串,但我无法正确调整字符串.有谁有想法吗？

如上所述,代码在Github上:https://github.com/achalddave/Audio-API-Frequency-Generator(相关位在strings.js).

Wiki有以下图表:

基本上,我产生噪声,然后输出并同时发送到延迟滤波器.延迟滤波器连接到低通滤波器,然后与输出混合.根据维基百科,延迟应该是N个样本,其中N是采样频率除以基频(N = f_s/f_0).

摘自我的代码:

产生噪音(bufferSize是2048,但这不应该太重要)

var buffer = context.createBuffer(1, bufferSize, context.sampleRate);
var bufferSource = context.createBufferSource();
bufferSource.buffer = buffer;

var bufferData = buffer.getChannelData(0);
for (var i = 0; i < delaySamples+1; i++) {
    bufferData[i] = 2*(Math.random()-0.5); // random noise from -1 to 1
}

创建延迟节点

var delayNode = context.createDelayNode();

我们需要延迟f_s/f_0样品.但是,延迟节点以秒为单位进行延迟,因此我们需要将其除以每秒的采样数,我们得到(f_s/f_0) / f_s,这就是1/f_0.

var delaySeconds …

是否可以为实时音频上下文指定采样率(对象的sampleRate属性AudioContext)？

对于我所读的内容,可以指定sampleRate一个OfflineAudioContext对象(构造函数需要3个参数,最后一个是采样率),但实时AudioContext不带任何参数.

我想是不可能的,因为可能是由浏览器本身定义的,但也许有办法？

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

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

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

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

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

我以为我可以通过将回放发送到同一处理器节点然后找出它们实际开始的时间来找到两个事件之间的时间差,以补偿任何延迟.为此,我需要让ScriptProcessorNode接收通道1和2上的getUserMedia内容,并在通道3和4上播放,但我无法完成这项工作.我尝试将两个源路由到处理器节点,我也尝试使用Merger/Splitter,但似乎没有任何工作.它们都到达通道1和2上的处理器节点,而3和4则为空.

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

提前致谢!

我使用getUserMedia()做了录音机.并使用Recorder.js保存文件

但是输出文件比我想象的要重得多.

4分钟的录音记录有40mb.我无法将其发送到我的服务器.如果是这样,它会崩溃.

所以,我搜索了如何降低录制kbps.但我一无所获.只是一些Flash解决方案.但这些不适合我的项目.

所以,我的问题是,是否可以使用getUserMedia()降低音频记录的kbps？

我创建了audiocontext并将我的麦克风连接到分析仪:

context = new AudioContext();
microphone = context.createMediaStreamSource(stream);
analyser = context.createAnalyser();
analyser.fftSize = 2048;
microphone.connect(analyser);

然后我得到了一些频率数组:

fFrequencyData = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(fFrequencyData);

我想在麦克风前播放一些音符,然后显示它是什么音符.我如何获得音符的频率？例如,A1 = 440.00Hz,F#3 = 1480.00Hz.

谢谢!

我一直在寻找使用Web音频API创建音频均衡器的方法:http://webaudio.github.io/web-audio-api/

我发现了许多关于创建可视化工具的线索,但这当然不是我想要做的.我只是希望能够使用频率滑块改变声音.我发现biquadFilter应该做的工作,但我不能得到一个好的结果.当我改变任何频率值时,声音会一致地改变,但它只会降低声音的质量,同时它应该改变频率.

我先加载一个声音:

Audio.prototype.init = function(callback){
    var $this = this;
    this.gainScale = d3.scale.linear().domain([0,1]).range([-40,40]);
    this.context = new AudioContext();
    this.loadSounds(function(){
        $this.loadSound(0);
        $this.play();
        callback.call();
    });
};

一切运作良好,声音在准备好时播放.

我有10个频率滑块[32,64,125,250,500,1000,2000,4000,8000,16000].对于每个滑块,我创建一个过滤器并将其连接到源,如下所述:使用Web Audio API创建10波段均衡器:

Audio.prototype.createFilter = function(index,frequency){
    if(this.filters == undefined) this.filters = [];
    var filter = this.context.createBiquadFilter();
    filter = this.context.createBiquadFilter();
    filter.type = 2;
    filter.frequency.value = frequency;
    // Connect source to filter, filter to destination.
    this.source.connect(filter);
    filter.connect(this.context.destination);
    this.filters[index] = filter;
};

最后,当我更改滑块的值时,我更新了过滤器:

Audio.prototype.updateFilter = function(index,newVal){
    this.filters[index].frequency.gain = this.gainScale(newVal);
};

注意:我的this.gainScale函数将[0,1]中的值作为输入,并返回[-40,40]中的值,以便为每个频率设置-40到40之间的增益.

非常感谢任何帮助!

在使用音频元素（<audio>）或contexts（AudioContext）时，您可以检查它们的currentTime属性以确切了解缓冲区的播放时间。

在我一次创建多个源（或AudioBufferSourceNode）之前，所有这些都是不错的选择AudioContext。

音源可以在不同的时间播放，因此我需要知道它们对应currentTime的，以说明：

一些基础代码供您解决：

buffer1 = [0,1,0]; //not real buffers
buffer2 = [1,0,1];

ctx = new AudioContext();

source1 = ctx.createBufferSourceNode();
source1.buffer = buffer1;
source1.connect(ctx.destination);
source1.start(0);

source2 = ctx.createBufferSourceNode();
source2.buffer = buffer2;
source2.connect(ctx.destination);
setTimeout(1000/*some time later*/){
    source2.start(0);
}

setTimeout(1500/*some more time later*/){
    getCurrentTime();
}

function getCurrentTime(){
    /* magic */
    /* more magic */
    console.log("the sources currentTime values are obviously 1500 (source1) and 500 (source2).");
}

我问了一个类似于此前的问题,但它没有解决我的问题并且解释得很差.这次我做了插图,希望能更好地解释.

我的音频播放器有一个简单的频谱分析仪.频率存储在每个都更新的数组中requestAnimationFrame,数组如下所示:

fbc_array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(fbc_array);

在这里阅读更多关于getByteFrequencyData的信息.

所以这个工作正常,但我希望频率在整个频谱中均匀分布.现在它显示线性频率:

正如您所看到的,这里的主要频率范围是高音(高端),最主要的频率范围是低音范围(低端).我希望我的分析仪具有均匀分布的频率范围,如下所示:

在这里,您可以看到分析仪上均匀分布的频率.这可能吗？

我用于生成分析器的代码如下所示:

// These variables are dynamically changed, ignore them.
var canbars = 737
var canmultiplier = 8
var canspace = 1

// The analyser
var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x,
    bar_width, bar_height;

function audioAnalyserFrame() {
    'use strict';
    var i;
    canvas.width = $('analyser-').width();
    canvas.height = $('analyser-').height();
    ctx.imageSmoothingEnabled = false;
    fbc_array = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(fbc_array);
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
    ctx.fillStyle = "white"; …