5

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

5
  • Как вы себе представляете визуализацию потока? Откуда брать будущие значения? Т.е., вы сейчас слушаете песню на 15 секунде, откуда взять данные, что бы отобразить 20 секунду?) 18 ноя 2019 в 12:41
  • myradio24.com/sazdan На этом сайте реализована визуализация потока. Я пробовал взять тот скрипт и просто изменить под себя, но он почему-то не работает если его скопировать в отдельный файл (даже если все точь в точь, без изменений).
    – sazdan
    18 ноя 2019 в 12:45
  • 2
    Вы в вопросе опишите, как вы этот момент видите. Завтра на сайте поменяется способ визуализации или сайт закроется и вопрос станет невалидным. 18 ноя 2019 в 12:48
  • Дело не в сайте, просто я предполагаю что если у них получилось, то это возможно, но я не знаю как. Кроме того, есть визуализаторы звука с микрофона, и они нормально работают, не смотря на то, что не известно какие частоты и амплитуды будут следующими. Фактически происходит визуализация потока, только с микрофона, а мне надо с url.
    – sazdan
    18 ноя 2019 в 12:51
  • Приведите пример потокового вещания, которое доступно к использованию через js, т.е. у которого нет ограничения CORS. У listen6.myradio24.com/sazdan есть CORS ограничение. Может, вам также поможет wavesurfer-js.org/examples или codepen.io/nfj525/pen/rVBaab 19 ноя 2019 в 7:45

1 ответ 1

12

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>

2
  • большое спасибо) //казалось бы, при чем тут Украина...
    – sazdan
    19 ноя 2019 в 18:28
  • Даже на cyberforum.ru на все вопросы по webaudio отвечают с Украины.
    – Опан
    19 ноя 2019 в 21:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.