實時處理web音頻api

Question

我正在使用web音頻api和requestAnimationFrame來顯示來自麥克風的音頻輸入。我可以成功地將時域頻率數據可視化，但問題是，由於網絡音頻API會以秒爲單位計算時間，因此每隔一秒，我的界面就會根據輸入的內容而變化。

所以我的問題是，我如何可視化聲音並使圖形保持在屏幕上，因此我可以在一定的時間內看到我的所有頻率數據（假設我說話，同時在畫布上可視化爲5秒）。

我使用下面的代碼（從花例子here）：

MicrophoneSample.prototype.visualize = function() { 
    this.canvas.width = this.WIDTH; 
    this.canvas.height = this.HEIGHT; 
    var drawContext = this.canvas.getContext('2d'); 

    var times = new Uint8Array(this.analyser.frequencyBinCount); 
    this.analyser.getByteTimeDomainData(times); 
    for (var i = 0; i < times.length; i++) { 
    var value = times[i]; 
    var percent = value/256; 
    var height = this.HEIGHT * percent; 
    var offset = this.HEIGHT - height - 1; 
    var barWidth = this.WIDTH/times.length; 
    drawContext.fillStyle = 'purple'; 
    drawContext.fillRect(i * barWidth, offset, 1, 1); 

    } 
    requestAnimFrame(this.visualize.bind(this)); 

} 

Answer 1

getByteTimeDomainData不給你的頻率信息。這些是實時的時域波形值，也稱爲幅度值。如果你想隨着時間的推移想象它們，將它們的值附加到數組中並繪製。如果你想要真正的頻率值使用getByteFrequencyData。

Answer 2

OP，這是一些僞代碼。僅供參考，這真的不是一個網絡音頻問題，更像是一個動畫問題。

在您的可視化器原型函數中存儲一個變量/字段，用於跟蹤您想要延遲畫布重繪的秒數，保留一個單獨的計數器，每次requestAnimFrame（...）繪製時都會遞增。一旦你的計數器達到你的延遲金額，然後重畫畫布。

編輯 現在我想到了......解決方案應該非常簡單。糾正我，如果我錯了，但這個粗略的解決方案是假設你從動畫循環中調用MicrophoneSample.visualize（）...因此，其中的代碼每秒執行一次。如果你發佈了MicrophoneSample對象代碼，或者至少是你的動畫循環，我可以提供更多的幫助。

/* NOTE! 
* 
*/ 
// Find a way to put these into your PARENT MicrophoneSample object 
var delay = 5; 
// Note that I am setting delayCount initially to zero - during the loop 
// the delayCount will actually get reset to 1 from thereafter (not 0)... 
// this gives us a way to initially draw your visualization on the first frame. 
var delayCount = 0; 

// Pull var times out so it doesn't get calculated each time. 
var times = new Uint8Array(MicrophoneSample.analyser.frequencyBinCount); 

// Same goes for the canvas... 
// I would set these values inside of the PARENT MicrophoneSample object 
MicrophoneSample.canvas.width = this.WIDTH; 
MicrophoneSample.canvas.height = this.HEIGHT; 

// you only need to establish the drawing context once. Do it in the PARENT 
// MicrophoneSample object 
var drawContext = this.canvas.getContext('2d'); 

MicrophoneSample.prototype.visualize = function() { 

     /* 
     * NOTE! 
     */ 
     // Here's the juicy meat & potatoes: 
     // only if the delayCount reaches the delay amount, should you UPDATE THE 
     // TIME DOMAIN DATA ARRAY (times) 
     // if your loop runs every second, then delayCount increments each second 
     // and after 5 seconds will reach your designated delay amount and update your 
     // times array. 

     if(delayCount == 0 || delayCount == delay) { 
      this.analyser.getByteTimeDomainData(times); 

      // Now, it would be redundant (and totally noob-programmer of you) to 
      // redraw the same visualization onto the canvas 5 times in a row, so 
      // only draw the visualization after the first pass through the loop and then 
      // every 5th pass after that :] 
      for (var i = 0; i < times.length; i++) { 
       var value = times[i]; 
       var percent = value/256; 
       var height = this.HEIGHT * percent; 
       var offset = this.HEIGHT - height - 1; 
       var barWidth = this.WIDTH/times.length; 
       drawContext.fillStyle = 'purple'; 
       drawContext.fillRect(i * barWidth, offset, 1, 1); 
      } 

      // Note: 1, not 0! 
      delayCount = 1; 
     } 
     else { 
      delayCount++; 
     } 


     requestAnimFrame(this.visualize.bind(this)); 
} 

只是要記住，我沒有真正測試過這些。但它至少應該指向正確的方向。