Используйте аудиоконтекст в качестве аудиовхода в p5.js - PullRequest
Новая
       6

Используйте аудиоконтекст в качестве аудиовхода в p5.js

0 голосов
/ 27 января 2019

Я реализую синтезатор, который использует узлы аудио-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");
   }
 }

Любая помощь будет принята с благодарностью!

1 Ответ

0 голосов
/ 31 января 2019

Аудиоконтекст не является самим входом, но содержит один или несколько входных узлов (и выход, и соединения, и ...).P5 создает собственный Audiocontext и работает внутри него.

Итак, вариант первый: создавайте свое приложение, используя только функции p5.Это мощная библиотека, все необходимые инструменты (например, AudioIn (), MonoSynth () и т. Д.) Должны быть доступны.

Второй вариант: сначала инициализировать p5, а затем использовать аудиоконтекст, созданный p5, чтобы добавить дополнительные узлы, которые впоследствии могут быть использованы p5. 

var cnv, fft, audiocontext, osc;
//p5 setup.
function setup() {
    cnv = createCanvas();
    fft = new p5.FFT(0.8);
    audiocontext = getAudioContext(); //if p5.Audiocontext doesn't exist
                                      // then new is created. Let's make
                                      // it global.

    myCustomSetup();  //now we can create our own input nodes, filters...

    fft.setInput(osc); //after which we can connect fft to those created
                       //nodes
}

function myCustomSetup() {
    //p5 audiocontext is usable here, allowing to use full WebAudioApi
    //and connect all nodes, created here or by some p5 function. 
    osc = audiocontext.createOscillator();

}
...