Я реализую синтезатор, который использует узлы аудио-API для генерации звука, и моя цель - визуализировать его с помощью p5.
В настоящее время у меня есть скрипт, который анализирует аудио с помощью fft и визуализирует частотыс барами.Мой аудиовход в данный момент - это локально сохраненная песня, но мне нужно изменить ее, чтобы она использовала аудиоконтекст в качестве входных данных.В настоящее время я могу получить аудиоконтекст с помощью собственного метода p5 getAudioContext (), но тогда я понятия не имею, как установить его в качестве входного для визуализации.
Я знаю, что в API есть метод createBuffer () - но я не нашелспособ использовать его в качестве ввода для p5.
var fft;
var button;
var song;
var slider;
var audiocontext;
var out;
var prue;
var source;
function preload(){
song = loadSound("src/media/Chopin - Nocturne op.9 No.2.mp3");
button = createButton("Play");
button.mousePressed(togglePlaying);
slider = createSlider(0,1,0.5,0.01);
this.audiocontext = getAudioContext();
}
function setup() {
createCanvas(windowWidth,windowHeight);
fft = new p5.FFT(0.8);
source = context.createBufferSource();
widthBand = (width / 128);
source.connect(context.destination);
}
function draw() {
background(61);
var spectrum = fft.analyze();
noStroke();
for (var i = 0; i<spectrum.length; i++) {
var amp = spectrum[i];
var y = map(amp, 0, 256, height, 0);
fill(i, 255, 255);
rect(i*widthBand,y,widthBand-2, height - y );
}
//Set Volume according to slider
audiocontext.setVolume(slider.value());
}
//Play/Pause Button
function togglePlaying(){
if(!song.isPlaying()){
song.play();
button.html("Pause");
}else if(song.isPlaying()){
song.pause();
button.html("Play");
}
}
Любая помощь будет принята с благодарностью!