Как отловить аудиоконтекст (Web Audio API)?

Question

[JokerGTS]

Нужно сделать эквалайзер (визуальный) для существующего аудиопотока. На сколько я понимаю, чтобы это сделать нужно найти переменную аудиоконтекста. Но т.к. код, где аудиоконтекст, не мой (берется с страницы сайта) я не могу найти эту переменную. Возможно ли как-то автоматически или вручную найти аудиоконтекст или захватить существующий аудиопоток для его визуализации? Повторюсь: используется Web Audio API, поэтому искать медиа элемент бессмысленно.

Answer 1

[Okujava-script]

var player = document.getElementById('player');
player.onplay = function() {
  var audioCtx = new AudioContext();
  var source = audioCtx.createMediaElementSource(player);
  var analyser = audioCtx.createAnalyser();
  source.connect(analyser); // Подключаем анализатор к элементу audio
  analyser.connect(audioCtx.destination); // Без этой строки нет звука, но анализатор работает.
  var frequencyData = new Uint8Array(analyser.frequencyBinCount);
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  setInterval(function() {
    analyser.getByteFrequencyData(frequencyData); // Записываем в массив данные уровней частот
    ctx.fillStyle = "blue"; // Задаём цвет фона
    ctx.globalAlpha = 0.05; // Это для получения эффекта плавного погасания полос
    ctx.fillRect(0, 0, canvas.width, canvas.height); // Полупрозрачно чистим экран
    ctx.fillStyle = "gold"; // Задаём цвет полос
    ctx.globalAlpha = 1;
    for (i = 0; i < 1024; i++) {
      ctx.fillRect(i, 255 - frequencyData[i], 1, frequencyData[i]); // рисуем полосу
    }
  }, 20);
}

<audio id="player" controls src="https://listen6.myradio24.com/sazdan" crossorigin="anonymous"></audio>
<br/>
<br/>
<!--Подключаем файл-->
<canvas id="myCanvas" width=1024 height=256 style="background:blue"></canvas>

Там только в теге аудио поменяйте ссылку на радиопоток на актуальную, т у она устарела.