Частота среза с использованием AnalyserNode

Question

Я создаю визуализатор звукового барьера с помощью Web API, и я хочу, чтобы полосы отображали только ~ 40 Гц до ~ 10 кГц. Единственное, что я нашел, это частотная область, но это не дает мне то, что я ищу (AnalyserNode.fftSize). Есть ли способ визуализировать эту частоту? Вот мой код:

.controller('PlayerCtrl', function(PlayerService, $scope){ 
     $scope.title = PlayerService.songName; 
     $scope.art = PlayerService.songArt; 
     $scope.url = PlayerService.songUrl + '?client_id=54970813fe2081a104a874f0f870bcfe'; 

     if (! window.AudioContext) { 
      if (! window.webkitAudioContext) { 
       alert('no audiocontext found, update your browser yo'); 
      } 
      window.AudioContext = window.webkitAudioContext; 
     } 
     var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); 
     var analyser = audioCtx.createAnalyser(); 
     analyser.minDecibels = -60; 
     analyser.maxDecibels = 0; 
     analyser.smoothingTimeConstant = 0.85; 

     var audioBuffer; 
     var sourceNode; 
     var javascriptNode; 

     var canvas = document.querySelector('.visualizer'); 
     var canvasCtx = canvas.getContext("2d"); 

     var intendedWidth = document.querySelector('.now-playing').clientWidth; 

     canvas.setAttribute('width',intendedWidth); 

     var visualSelect = document.getElementById("visual"); 

     var drawVisual; 

     setupAudioNodes(); 
     loadSound($scope.url); //music file 

     function loadSound(url) { 
      var request = new XMLHttpRequest(); 
      request.open('GET', url, true); 
      request.responseType = 'arraybuffer'; 

      request.onload = function() { 
       audioCtx.decodeAudioData(request.response, function(buffer) { 
        playSound(buffer); 
       }, function(error){ 
        console.log(error) 
       }); 
      }; 
      request.send(); 
     } 

     function playSound(buffer) { 
      sourceNode.buffer = buffer; 
      sourceNode.start(0); 
      $(".content").show(); 
      $("#hue").hide(); 
     } 


     function setupAudioNodes() { 
      console.log('audio nodes') 
      javascriptNode = audioCtx.createScriptProcessor(2048, 1, 1); 
      javascriptNode.connect(audioCtx.destination); 

      sourceNode = audioCtx.createBufferSource(); 
      sourceNode.connect(analyser); 
      analyser.connect(javascriptNode); 

      sourceNode.connect(audioCtx.destination); 

      visualize(); 
     } 

     function visualize() { 
      console.log('viz'); 
      WIDTH = canvas.width; 
      HEIGHT = canvas.height; 

      analyser.fftSize = 64; 
      var bufferLength = analyser.frequencyBinCount; 
      console.log(bufferLength); 
      var dataArray = new Uint8Array(bufferLength); 

      canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); 

      function draw() { 
       drawVisual = requestAnimationFrame(draw); 

       analyser.getByteFrequencyData(dataArray); 

       canvasCtx.fillStyle = 'rgb(0, 0, 0)'; 
       canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); 

       var barWidth = (WIDTH/bufferLength) * 2.5; 
       var barHeight; 
       var x = 0; 

       for (var i = 0; i < bufferLength; i++) { 
        barHeight = dataArray[i]; 

        canvasCtx.fillStyle = 'rgb(' + (barHeight + 100) + ',50,50)'; 
        canvasCtx.fillRect(i*17, HEIGHT - barHeight/2, 10, barHeight); 

        x += barWidth + 1; 
       } 
      } 
      draw() 
     } 

    }) 

Answer 1

Просто не используйте более высокие частоты, которые вычисляет анализатор. Легкий способ сделать это - установить bufferLength на меньшее значение, чем analyser.frequencyBinCount. Анализатор предоставит вам столько данных, сколько может поместиться в массив, и оставьте остальные.

Бутылки равномерно распределены от нуля до половины частоты дискретизации, поэтому при типичных частотах дискретизации (44 кГц) вам потребуется около половины бункеров. В более общем плане, Math.ceil(analyser.frequencyBinCount * 10000/(audioCtx.sampleRate/2)) должен предоставить вам номер, который вы хотите.