Как визуализировать прямой поток аудио (интернет радио)?

162

15 ноября 2021, 06:10

В интернете много плееров с визуализацией, но все они основаны на статичном mp3 файле, который либо лежит на сервере, либо загружается пользователем. Я пробовал вместо ссылки на этот файл подставлять url потока интернет радио (к примеру https://listen6.myradio24.com/sazdan), и оно просто не работало. Насколько я выяснил, для этого нужен Web Audio API, но, по всей видимости, методы что используются для простых файлов не подходят для прямых потоков. Дайте, пожалуйста, элементарный пример визуализации звука прямой трансляции или что можно почитать на эту тему.

Answer 1

CORS ограничение можно обойти, если в тег аудио добавить атрибут

crossorigin="anonymous"

Но бывают и другие ограничения. На listen6.myradio24.com/sazda к счастью их нет. Поэтому этого атрибута достаточно, чтобы визуализировать эту радиостанцию.

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>