@JokerGTS

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

Нужно сделать эквалайзер (визуальный) для существующего аудиопотока. На сколько я понимаю, чтобы это сделать нужно найти переменную аудиоконтекста. Но т.к. код, где аудиоконтекст, не мой (берется с страницы сайта) я не могу найти эту переменную. Возможно ли как-то автоматически или вручную найти аудиоконтекст или захватить существующий аудиопоток для его визуализации? Повторюсь: используется Web Audio API, поэтому искать медиа элемент бессмысленно.
  • Вопрос задан
  • 31 просмотр
Пригласить эксперта
Ответы на вопрос 1
Okujava-script
@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>


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
SummerWeb Ярославль
от 120 000 до 180 000 ₽
КРАФТТЕК Санкт-Петербург
от 60 000 до 80 000 ₽
Brightdata Тель-Авив
от 5 500 до 6 500 $
13 июн. 2024, в 13:58
5000 руб./за проект
13 июн. 2024, в 13:55
30000 руб./в час
13 июн. 2024, в 13:50
5000 руб./за проект