index.html

<audio src="song.mp3" id="myAudio"></audio>

index.js

var audioElement = document.getElementById('myAudio')

var audioCtx = new (window.AudioContext || window.webkitAudioContext)()
// ^ как контекст в канвасе, только для аудио дорожки.
// Он работает как посредник, между аудио инфой и ее выходом перед озвучиванием в колнках
// можем получать инфу, изменять, например усилить низкие частоты или высокие

var audioSrc = audioCtx.createMediaElementSource(audioElement)
// нужен чтоб потом прокинуть измененный аудио контекст обратно в исходный аудио элемент(<audio/>)

var analyser = audioCtx.createAnalyser()
// один из многих методов аудио контекста, служит только для получения текущих частот
// транформировать и вернуть обратно в аудио поток их нельзя, для этого есть другие методы


audioSrc.connect(analyser)
// чтоб все извениеня в аудио контексте применить, прокидываем его обратно в аудио поток

audioSrc.connect(audioCtx.destination)
// что это - не помню)

var frequencyData = new Uint8Array(200)
// заранее создадим массив куда будем получать частоты аудио в реальном времени

function getAudioData() {
  requestAnimationFrame(getAudioData)
  analyser.getByteFrequencyData(frequencyData) // записывает частоты в frequencyData
  /*
   * вот и все, теперь все что нам нужно находиться в массиве frequencyData
   * теперь можно это отрендерить любым удобным способом для вас
   * это удобно делать на d3 в svg
  */
}

Пример визуализации частот на D3
https://jsfiddle.net/sarg/xmzv98mu/