Визуализация аудио потока

@soruta · Регистрация: 29.11.2019

Author24 — интернет-сервис помощи студентам

Возможно ли сделать частотную визуализацию потокового аудио?

@Опан · 30.11.2019, 03:19

PHP/HTML

<html><head>
    <title>Радиовизуализатор</title>
</head>
<body><center>
<audio id="player" controls src="https://audiostream.ru" crossorigin="anonymous"></audio><br /><br /> <!--Подключаем файл-->
<canvas id="myCanvas" width=1024 height=256 style="background:blue"></canvas>
<script>
var player = document.getElementById('player');
player.onplaying = 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);
}
</script>
</center></body>
</html>

@soruta · 30.11.2019, 14:14 **[ТС]**

Это работает только для https подключения? У всех стоят icecast без сертификатов, а с ними вроде как скрипт не работает(

@Опан · 30.11.2019, 23:34

Не только для https, http тоже.

Сообщение от soruta

У всех стоят icecast без сертификатов, а с ними вроде как скрипт не работает(

Что поделаешь

@soruta · 01.12.2019, 05:00 **[ТС]**

Что ж, ну и на том спасибо.

@soruta 0 / 0 / 0 Регистрация: 29.11.2019 Сообщений: 5
		1
	Визуализация аудио потока 29.11.2019, 11:47. Показов 3069. Ответов 4 Метки нет (Все метки) Возможно ли сделать частотную визуализацию потокового аудио? 0

@soruta 0 / 0 / 0 Регистрация: 29.11.2019 Сообщений: 5
	30.11.2019, 14:14 [ТС]	3
	Это работает только для https подключения? У всех стоят icecast без сертификатов, а с ними вроде как скрипт не работает( 0

@Опан Юзер с абсолютным слухом 709 / 489 / 195 Регистрация: 17.12.2010 Сообщений: 1,428
	30.11.2019, 23:34	4
	Не только для https, http тоже. Сообщение от soruta У всех стоят icecast без сертификатов, а с ними вроде как скрипт не работает( Что поделаешь 0

@soruta 0 / 0 / 0 Регистрация: 29.11.2019 Сообщений: 5
	01.12.2019, 05:00 [ТС]	5
	Что ж, ну и на том спасибо. 0