有没有办法使用网络音频 api 来跟踪音量

Question

I'd like to be able to track how loud the song gets in realtime, returning a number to represent the current volume of the song. The source is from a sample that plays when you click it. Ive seen tutorials on making a volume meter, but all I want is a number to measure this. here is my starting code.

const audioContext = new AudioContext();

const samplebutton = document.createElement('button')
samplebutton.innerText = 'sample'
samplebutton.addEventListener('click', async () => {
    let volume = 0
    const response = await fetch('testsong.wav')
    const soundBuffer = await response.arrayBuffer()
    const sampleBuffer = await audioContext.decodeAudioData(soundBuffer)
    const sampleSource = audioContext.createBufferSource()
    sampleSource.buffer = sampleBuffer

    sampleSource.connect(audioContext.destination)
    sampleSource.start() 
    
function TrackVolume(){
}

Answer 1

You can calculate the volume by passing the audio through an AnalyserNode . With it you can get the amplitudes of every frequency at a specific moment in time and calculate the volume of the audio file.

const audioContext = new AudioContext();

const samplebutton = document.createElement('button')
samplebutton.innerText = 'sample'
samplebutton.addEventListener('click', async () => {
  const response = await fetch('testsong.wav')
  const soundBuffer = await response.arrayBuffer()
  const sampleBuffer = await audioContext.decodeAudioData(soundBuffer)

  const analyser = audioContext.createAnalyser();
  const sampleSource = audioContext.createBufferSource()
  sampleSource.buffer = sampleBuffer

  const bufferLength = analyser.frequencyBinCount;
  const dataArray = new Uint8Array(bufferLength);

  sampleSource.connect(analyser);
  analyser.connect(audioContext.destination)
  sampleSource.start()

  function caclculateVolume() {
    analyser.getByteFrequencyData(dataArray)
  
    let sum = 0;
    for (const amplitude of dataArray) {
      sum += amplitude * amplitude
    }

    const volume = Math.sqrt(sum / dataArray.length)
    console.log(volume)
    requestAnimationFrame(caclculateVolume)
  }

  caclculateVolume()
});