decodeAudioData Example

decodeAudioData Example.js

var init = function (url) {
  var audioCtx, fail, request, source, success;
  audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  success = function (e) {
    console.log("success", e);
  };
  fail = function (e) {
    console.log("fail", e);
  };
  source = audioCtx.createBufferSource();
  request = new XMLHttpRequest();
  request.open("GET", url, true);
  request.responseType = "arraybuffer"; // 重点
  request.onload = function () {
    var audioData;
    audioData = request.response;
    // console.log(audioData); // ArrayBuffer
    audioCtx.decodeAudioData(audioData).then(function (decodedData) {
      console.log(decodedData); // object AudioBuffer
      // console.log(decodedData.length) // 42631
      // sample rate is 48000, so duration is less then a second
      
      // console.log(decodedData.numberOfChannels);
      var nowBuffering = decodedData.getChannelData(0); // return a Float32Array, array of 32-bit floating point numbers

      // for (var i = 0; i < decodedData.length; i++) {
      //   console.log(nowBuffering[i]);  // between -1 and +1
      // }
    });
  };
  return request.send();
};

var url =
  "https://assets.readingeggsassets.com/activities/break_it_up/audio/us/peck-fp-2476b044.mp3";

init(url);

Tips

for (var i = 0; i < decodedData.length; i++) {
  console.log(nowBuffering[i]);
}

is extremely slow and possiblly would freeze up your browser
because It need to output 42631 values

What is this?

It read an audio file, and output raw PCM data.

I need to draw waveform, so I am experiemnting with these.

Also, this blog post is very helpful:
https://matt.aimonetti.net/posts/2019-06-generating-waveform-data-audio-representation/

it help you understand the fundemental behind drawing waveform