@by_steris

Как можно анимировать звуковую волну?

Перерыл много информации, но так и не нашел как можно анимировать такую "3D" волну633682a2827c2355749054.png
  • Вопрос задан
  • 187 просмотров
Пригласить эксперта
Ответы на вопрос 3
Viamos
@Viamos
Человек, который любит пиццу
Я сам таким не занимался, но вот создавал музыку. Вообще можно взять за параметр громкость вывода звука через OS, ну и вообще можно было бы песню поделить на частоты которые выводятся, на основе их генерить волну. Ну еще я знаю что можно песню поделить на каналы и тем самым в каждом канале будет частота вывода, от туда тоже в принципе можно сделать
Ответ написан
Комментировать
@mayton2019
Bigdata Engineer
Звуковые волны - это области высокого-низкого давления в 3д пространстве. Кроме того они слишком быстро меняют форму и полярность чтобы их отображать. Вы можете изобразить их только в виде остановки времени.

Для рисования чего-либо в объеме используют объемные пикселы (voxels) но при этом нужно сделать кубическую сетку данных для каждого кубика. Тут объем информации достаточно велик. Посмотрите как работает софт для томографов. Он примерно решает ту-же задачу. Отображает объем через информацию о десатке срезов исследуемого объекта. У вас срезом - будет воздух и звуковая колонка или источник звука.
Ответ написан
Комментировать
Okujava-script
@Okujava-script
Веб-программист с абсолютным слухом и композитор
Это не "3D" волна, а только наложение состояний меняющейся кривой в 2Д-пространстве. Анимировать можно с помощью WebAudio Api:
<html>
<head>
<title>визуализатор</title>
<meta charset="utf-8" />
<style>
body{
	background: #003;
	font-family: arial;
}
#myCanvas{
	border-width: 3px;
	border-color: white;
	border-radius: 15px;
	border-style: solid;
	box-shadow: 0 0 15px 15px #7e7;
	animation: spin-counter 5s linear infinite;
}
@keyframes spin-counter {
	from{
		box-shadow: 0 0 5px 5px #7e7;
		border-color: white;
	}
	to{
		box-shadow: 0 0 15px 15px pink;
		border-color: gold;
	}
}
</style>
</head>
<body><center>
<canvas id="myCanvas" width=1024 height=256 style="background:blue"></canvas><br /><br />
<audio src=sound.mp3' controls></audio>
</center></body>
<script>
var audio = document.querySelector('audio');
audio.onplay = function(){
	var audioCtx = new AudioContext();
	var source   = audioCtx.createMediaElementSource(audio);
	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');
	var counter = 0;
	setInterval(function(){
		analyser.getByteFrequencyData(frequencyData); // Записываем в массив данные уровней частот
		ctx.fillStyle = "black"; // Задаём цвет фона
		ctx.globalAlpha = 0.05; // Это для получения эффекта плавного погасания полос
		ctx.fillRect (0, 0, canvas.width, canvas.height); // Полупрозрачно чистим экран
		ctx.globalAlpha = 1;
		ctx.strokeStyle = '#3f9';
		ctx.beginPath();
		ctx.moveTo(Math.floor(150 * Math.sin(counter / 1)), 255 - frequencyData[0]);
		for(i = 1; i < 1024; i ++) ctx.lineTo(i + Math.floor(350 * Math.sin(i / 15)), 255 - frequencyData[i]);
		ctx.stroke();
		counter ++;
	}, 20);
}
</script>
</html>

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

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

Войти через центр авторизации
Похожие вопросы