标签: web-audio-api

我对使用Web Audio API感兴趣.不幸的是,我的音频文件都是一种深奥的格式,Chrome无法解码.(它们是.wavs,但采用32位浮点编码以96 kHz采样.)

有没有办法让我查询我的浏览器(Chrome),以确切了解它支持哪些音频格式和编码？

UPDATE

我在此处找到了Chrome支持的文件格式列表:https://sites.google.com/a/chromium.org/dev/audio-video

我正在查看Web音频API规范,并且平移节点使用三个值来创建声音的3D频谱.我想知道为了创建一个基本的2D"等功率"平移器,程序员需要进行公式化编程来扩展这个......或者如果我过度思考它并且有一种更简单的方法可以做到这一点.

编辑

现在引入了stereoPanner节点.

我试图找出一种方法来阻止Web音频脚本处理器节点运行,而无需断开它.

我最初的想法是将"onaudioprocess"设置为"null"以阻止它,但是当我这样做时,我听到一个非常短的音频循环播放.我的猜测是音频缓冲区没有被清除或者什么东西而且它重复播放相同的缓冲区.

我尝试了一些额外的技术,比如首先将缓冲区通道数组的值设置为0,然后将"onaudioprocess"设置为"null",这仍然会产生一个循环切片的音频而不是静音.

我有一些代码如下(coffeescript)

context = new webkitAudioContext()
scriptProcessor = context.createScriptProcessor()

scriptProcessor.onaudioprocess = (e)->
  outBufferL = e.outputBuffer.getChannelData(0)
  outBufferR = e.outputBuffer.getChannelData(1)
  i = 0
  while i < bufferSize
    outBufferL[i] = randomNoiseFunc()
    outBufferR[i] = randomNoiseFunc()
    i++
  return null
return null

然后,当我想要阻止它

stopFunc1: ->
  scriptProcessor.onaudioprocess = null

我还尝试将缓冲区通道数组设置为0,然后将回调设置为null

stopFunc2: ->
  scriptProcessor.onaudioprocess = (e)->
    outBufferL = e.outputBuffer.getChannelData(0)
    outBufferR = e.outputBuffer.getChannelData(1)
    i = 0
    while i < bufferSize
      outBufferL[i] = 0
      outBufferR[i] = 0
      i++
    scriptProcessor.onaudioprocess = null
    return null
  return null

这两种技术都会产生一段非常快速循环的音频,而不是没有音频.

有没有办法正确地做到这一点,还是我只是想错了？

任何帮助非常感谢.

var ctx = new webkitAudioContext();
    pw = ctx.createWaveshaper();

每次我在Google Chrome中使用CreatePeriodicWave()时,我都会得到

SyntaxError: Failed to construct 'PeriodicWave': invalid real array

我应该在函数中放置什么来避免这个错误？

我知道如何设置或获得常识中的音量.就像你设置的总体积一样.因此,如果声音很大并且你降低了音量,整个剪辑的音量就会缩小,所以响亮的声音会变得更安静,而且已经发出的声音甚至更低了.

我正在尝试制作动画,其中,画布,圆圈的大小会根据视频,音频或麦克风的音量而变化,而不是基于总音量.我没有制作体积计.

所以基本上是视频元素的声音可视化器.

但是,我找不到视频元素的属性.这就像我找不到合适的词,当前的响度？!

有用的链接:

http://jcla1.com/blog/2012/03/11/web-audio-api-overview-part1/

https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#AnalyserNode-section

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays

http://www.html5rocks.com/en/tutorials/webaudio/intro/

http://chimera.labs.oreilly.com/books/1234000001552/index.html

http://webaudioapi.com/samples/

经过大量的尝试和帮助形成链接,我已经做了这个......但是大部分时间响度似乎都是不完整的,不确定这是不是真的.

http://jsfiddle.net/d4Xqm/10/

http://jsfiddle.net/techsin/d4Xqm/19/

http://jsfiddle.net/techsin/d4Xqm/18/

var v= document.getElementById('v'),
    ctx= new webkitAudioContext(),
    src= ctx.createMediaElementSource(v),
    alyz= ctx.createAnalyser(),
    arr= null, l=0, i=0,
    t=true, p=$('.l');


v.addEventListener('play',update);
v.addEventListener('ended',function(){t=false;});

src.connect(alyz);
alyz.connect(ctx.destination);
arr= new Uint8Array(alyz.frequencyBinCount);

function update(){
    if(t) requestAnimationFrame(update);
    alyz.getByteFrequencyData(arr);
    l=0;
    for(i=0; i<arr.length;i++) { l= (l<arr[i])?arr[i]:l; }
    p.text(l);
}

我目前正在尝试制作一个网页编辑器,允许用户轻松调整其音频文件的基本设置,作为插件我集成了wavesurfer.js,因为它有一个非常整洁和跨浏览器的波形解决方案.

索引功能的必备列表后,我决定剪切和粘贴对于使这个产品工作至关重要,但是花了几个小时试图弄清楚如何在现有库中实现它,甚至开始重建wavesurfer.js功能从头开始理解我尚未成功的逻辑.

我的问题是,如果有人能给我一些关于如何开始构建剪切和粘贴功能的指示,或者甚至是一个非常感谢的例子.

提前致谢!

wavesurfer插件:http://wavesurfer-js.org

采摘网页编辑器 http://plucked.de

编辑解决方案(实例是waveurfer对象.):

function cut(instance){
  var selection = instance.getSelection();
  if(selection){
    var original_buffer = instance.backend.buffer;
    var new_buffer      = instance.backend.ac.createBuffer(original_buffer.numberOfChannels, original_buffer.length, original_buffer.sampleRate);

    var first_list_index        = (selection.startPosition * original_buffer.sampleRate);
    var second_list_index       = (selection.endPosition * original_buffer.sampleRate);
    var second_list_mem_alloc   = (original_buffer.length - (selection.endPosition * original_buffer.sampleRate));

    var new_list        = new Float32Array( parseInt( first_list_index ));
    var second_list     = new Float32Array( parseInt( second_list_mem_alloc ));
    var combined        = new Float32Array( original_buffer.length );

    original_buffer.copyFromChannel(new_list, 0);
    original_buffer.copyFromChannel(second_list, 0, second_list_index)

    combined.set(new_list)
    combined.set(second_list, first_list_index)

    new_buffer.copyToChannel(combined, 0); …

我正在尝试使用分析器节点和getByteFrequencyData()来测量两个声音之间的差异.我认为通过总结每个频率箱的差异,我可以得出一个数字来表示两个声音的差异.然后,我将能够更改声音并再次测量数字,以查看新声音是否比之前更多或更少.

getByteFrequencyData()是否完全包含声音的表示,还是我需要包含其他数据来限定声音？

这是我正在使用的代码:

var Spectrogram = (function(){
    function Spectrogram(ctx) {
        this.analyser = ctx.createAnalyser();
        this.analyser.fftSize = 2048;
        this.sampleRate = 512;

        this.scriptNode = ctx.createScriptProcessor(this.sampleRate, 1, 1);
        this.scriptNode.onaudioprocess = this.process.bind(this);

        this.analyser.connect(this.scriptNode);

        this.startNode = this.analyser;
        this.endNode = this.scriptNode;

        this.data = [];
    }

    Spectrogram.prototype.process = function(e) {
        var d = new Uint8Array(this.analyser.frequencyBinCount);
        this.analyser.getByteFrequencyData(d);
        this.data.push(d);

        var inputBuffer = e.inputBuffer;
        var outputBuffer = e.outputBuffer;
        for(var channel = 0; channel < outputBuffer.numberOfChannels; channel++) {
            var inputData = inputBuffer.getChannelData(channel);
            var outputData = outputBuffer.getChannelData(channel);
            for(var sample = 0; sample < …

根据我的阅读,我希望以下JavaScript代码记录"All is well",但它会遇到错误情况:

var audio = document.createElement('audio');
var ctx = new window.AudioContext();
var source = ctx.createMediaElementSource(audio);
audio.src = 'http://www.mediacollege.com/audio/tone/files/440Hz_44100Hz_16bit_30sec.mp3';
// As @padenot mentioned, this is the number of channels in the source node, not the actual media file
var chans = source.channelCount;
if(chans == 1) {
  snippet.log("All is well");
} else {
  snippet.log("Expected to see 1 channel, instead saw: " + chans)
}

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

这是怎么回事？

这可能是一个CORS问题吗？有没有其他方法来确定这个mp3文件实际上是单声道？

编辑:正如@padenot所提到的,这是源节点中的通道数,而不是实际的媒体文件

澄清

我希望有一种解决方案可以避免在记忆中解码整个音频文件.decodeAudioData() …

我想将Float32转换为Int16.但到目前为止,效果不佳.因为输出音频会产生大量剪辑(因此,音频输出非常差).我正在使用这个功能:

function convertoFloat32ToInt16(buffer) {
  var l = buffer.length;  //Buffer
  var buf = new Int16Array(l/3);

  while (l--) {
    if (l==-1) break;

    if (buffer[l]*0xFFFF > 32767)
      buf[l] = 32767;
    elseif (buffer[l]*0xFFFF < -32768)
      buf[l] = -32768;
    else 
      buf[l] = buffer[l]*0xFFFF;
  }
  return buf.buffer;
}

如果我之前实现了gainNode(),则剪切效果不易察觉.但这不是一种理想的方式,因为目的是在每个麦克风中都有效.在这个Matlab图中可以看到剪切效果:

这里发生了一些奇怪的事情.我创建了一个音频缓冲区,将其存储在变量中并尝试重复使用它几次 - 但它似乎已损坏

我做了一些按钮

    <button onclick="play();">play(0)</button>
    <button onclick="playsection();">play section</button>
    <button onclick="stop();">stop()</button>

获取一些音频数据

context = new AudioContext();

var getWav = new XMLHttpRequest();
var wavbuf;

getWav.open("GET", "/wav/test.wav", true);
getWav.responseType = "arraybuffer";

getWav.onload = function() {
    context.decodeAudioData(getWav.response, function(buffer){
    wavbuf = buffer;
    });
}

getWav.send();

var p;

我可以多次评估play()而不会出错

function play(){
    p = context.createBufferSource();
    p.buffer = wavbuf;
    p.connect(context.destination);
    p.start(0);
}

如果我在 停止(10)评估之前按下停止,则playsection似乎只能工作一次 - 或偶尔不止一次

function playsection(){
    p = context.createBufferSource();
    p.buffer = wavbuf;
    p.connect(context.destination);
    p.start(0, 6); // start after 6 seconds …