Question

我有这个实时音频分析仪，我正在绘制光谱仪。我想将值存储在数组中，并显示其中的最大值。link to spectrogram.js

window.AudioContext = window.AudioContext || window.webkitAudioContext;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

var audioContext;
var spectro;
var microphoneButton;
var songButton;
var songSelect;
var selectedMedia;

var media = [
  {
    file: 'media/aphex_twins_equation.mp3',
    slice: {start: 320000, end: 340000}
  },
  {
    file: 'media/ethos_final_hope.mp3',
    slice: {start: 50000, end: 170000}
  }
];

function init() {
  spectro = Spectrogram(document.getElementById('canvas'), {
    canvas: {
      width: function() {
        return window.innerWidth;
      },
      height: 500
    },
    audio: {
      enable: true
    },
    colors: function(steps) {
      var baseColors = [[0,0,255,1], [0,255,255,1], [0,255,0,1], [255,255,0,1], [ 255,0,0,1]];
      var positions = [0, 0.15, 0.30, 0.50, 0.75];

      var scale = new chroma.scale(baseColors, positions)
      .domain([0, steps]);

      var colors = [];

      for (var i = 0; i < steps; ++i) {
        var color = scale(i);
        colors.push(color.hex());
      }

      return colors;
    }
  });

  try {
    audioContext = new AudioContext();
  } catch (e) {
    alert('No web audio support in this browser!');
  }

  microphoneButton = document.getElementById('btn-microphone');
  songButton = document.getElementById('btn-song');
  songSelect = document.getElementById('select-song');

  microphoneButton.disabled = false;

  microphoneButton.addEventListener('click', requestMic, false);
  songButton.addEventListener('click', playSong, false);
  songSelect.addEventListener('change', selectMedia, false);

  selectMedia();
}

function loadMedia(selectedMedia, callback) {
  songButton.disabled = false;

  var request = new XMLHttpRequest();
  request.open('GET', selectedMedia.file, true);
  request.responseType = 'arraybuffer';

  request.onload = function() {
    audioContext.decodeAudioData(request.response, function(buffer) {
      var slice = selectedMedia.slice;
      AudioBufferSlice(buffer, slice.start, slice.end, function(error, buf) {
        callback(buf);
      });
    });
  };

  request.send();
}

function selectMedia() {
  songButton.disabled = false;
  selectedMedia = media[songSelect.value];
}

function playSong() {
  loadMedia(selectedMedia, function(songBuffer) {
    spectro.connectSource(songBuffer, audioContext);
    spectro.start();
  });

  removeControls();
}

function requestMic() {
  navigator.getUserMedia({
    video: false,
    audio: true
  },
  function(stream) {
    handleMicStream(stream);
    removeControls();
  }, handleMicError);
  
 
}

function handleMicStream(stream) {
  var input = audioContext.createMediaStreamSource(stream);
  var analyser = audioContext.createAnalyser();

  analyser.smoothingTimeConstant = 0;
  analyser.fftSize = 2048;

  input.connect(analyser);

  spectro.connectSource(analyser, audioContext);
  spectro.start();
   var maxFrequency = this.options.maxFrequency || this.getBinFrequency(this.analyser.frequencyBinCount / 2);
  var minFrequency = this.options.minFrequency || this.getBinFrequency(0);
}

function handleMicError(error) {
  alert(error);
  console.log(error);
}

function removeControls() {
  songSelect.parentNode.removeChild(songSelect);
  songButton.parentNode.removeChild(songButton);
  microphoneButton.parentNode.removeChild(microphoneButton);
}

window.addEventListener('load', init, false);

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Spectrogram</title>
  <link rel="stylesheet" href="styles/style.css">
</head>
<body>
  <h1>Spectrogram</h1>

  <canvas id="canvas"></canvas>
  <div>
    <button id="btn-microphone" disabled="disabled">Live audio</button>
    <select id="select-song">
      <option value="1">Ethos - Final Hope</option>
      <option value="0">Apple</option>
	  
    </select>
    <button id="btn-song" disabled="disabled">Play song</button>
	 <button id="btn-stop">stop</button>
	<div id="peak">Frequency:</div>
	<div id="frec"></div>
  </div>
  

  <script src="scripts/audiobuffer-slice.js"></script>
  <script src="scripts/vendor/chroma.js"></script>
  <script src="scripts/spectrogram.js"></script>
  <script src="scripts/main.js"></script>
</body>
</html>

我知道我必须从spectrograph.js中提取一些细节，然后在main.js文件中编写一个函数并通过index.js显示它。

在句柄功能中，我试图获得最大频率值。但它没有返回任何东西

如何在am数组中存储graph的所有值并获得最大值？

0 个答案: