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