# Use the audiocontext as audio input in p5.js

**URL:** <https://discourse.processing.org/t/use-the-audiocontext-as-audio-input-in-p5-js/7879>\
**Category:** Libraries\
**Created:** [January 27, 2019, 2:20pm UTC](https://discourse.processing.org/t/use-the-audiocontext-as-audio-input-in-p5-js/7879 "2019-01-27T14:20:22Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![rob1](https://avatars.discourse-cdn.com/v4/letter/r/e495f1/32.png) [@rob1](https://discourse.processing.org/u/rob1)\
**Post date:** [January 27, 2019, 2:20pm UTC](https://discourse.processing.org/t/use-the-audiocontext-as-audio-input-in-p5-js/7879/1 "2019-01-27T14:20:23Z")

</div>

I am implementing a syntheziser wich uses the nodes of the audio-api to generate sound and my goal is to visualize it using p5.

I currently have a script that analyzes audio with fft and visualizes the frequencies with bars. My audio input at the moment is a locally saved song but I need to change it, so it uses the audiocontext as input.  
Currently I can get the audiocontext with p5’s own method getAudioContext() but then I have no clue how to set it as input for the visualization.

I know the API has a createBuffer()-Method but I havent found a way to use it as input for p5.

```auto

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);
  //Berechnet Amplitudenwerte im Frequenzbereich -> Zu Array
  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");
   }
 }

```

Any help would be good!