Масив с привязкой к частоте звука

Question

Необходим масив который будет привязан к частоте звука и реагировать в реальном времени, на подобии визуализаторов музыки, в масив хочу привязать кадры анимации (png). То есть в крации анимация должна меняться в зависимости от звука (например микрофон)

Answer 1

Прежде всего количество полос должно являться целой степенью часла 2. В Вашем случа

<html>
<head>
    <title>Визуализатор</title>
    <meta charset="utf-8" />
<style>
img{
    position: absolute; border-style: solid; border-width: 1px;
    height: 128px;
    width: 6px;
    top: 50px;
}
</style>
</head
<body>
<button onclick="myanalyser()"> старт </button><button onclick="audio.pause()"> стоп </button>
</body>
<script>
var num = 128, // количество частотных полос
steep = 8, // шаг между полосами в пикселях
audio = new Audio("sound.mp3"); // ваш аудиофайл
for(i = 0; i < num; i ++){
    var kadr = document.createElement("img");
    kadr.id = "k" + i;
    kadr.src = "kadr" + i + ".png";
    kadr.style.left = i * steep + "px";
    document.body.appendChild(kadr);
}
function myanalyser(){
    var audioCtx = new AudioContext(),
    source = audioCtx.createMediaElementSource(audio),
    analyser = audioCtx.createAnalyser();
    analyser.fftSize = num * 2;
    source.connect(analyser); // Подключаем анализатор к элементу audio
    analyser.connect(audioCtx.destination); // Без этой строки нет звука, но анализатор работает.
    var frequencyData = new Uint8Array(analyser.frequencyBinCount);
    setInterval(function(){
        analyser.getByteFrequencyData(frequencyData); // Записываем в массив данные уровней частот
        for(i = 0; i < num; i ++) document.getElementById("k" + i).style.height = frequencyData[i] + "px";
    }, 20);
    audio.play();
}
// myanalyser(); // если нужно автовоспроизведение в хроме
</script>
</html>

е подойдёт 128.

БЛОГ НА HUSL

Масив с привязкой к частоте звука

Ответы (1 шт):