Previous

Καταγραφή - capture ήχου

Το p5.js μας δίνει τη δυνατότητα να καταγράψουμε τον ήχο μικροφώνου από τους υπολογιστές μας.

Για να το κάνουμε αυτό, χρησιμοποιούμε τη συνάρτηση δόμησης - constructor  new p5.AudioIn() . 

Για να ενεργοποιήσουμε το μικρόφωνο χρησιμοποιούμε τη συνάρτηση start() και για να την απενεργοποιήσουμε, χρησιμοποιούμε τη  stop() .

Επιπλέον, μπορούμε να πάρουμε τα επίπεδα έντασης του μικροφώνου χρησιμοποιώντας τη συνάρτηση  getLevel() . Αυτή η συνάρτηση  επιστρέφει τιμές από 0.0 έως 1.0.

Παράδειγμα

Ακολουθεί ένα παράδειγμα κώδικα όπου συλλαμβάνουμε τον ήχο μικροφώνου και σχεδιάζουμε μια έλλειψη η οποία θα αλλάζει το μέγεθος ανάλογα με το ηχητικό επίπεδο:

// create variable to hold microphone inpute
let myMic;
function setup() {
  createCanvas(windowWidth, windowHeight);
  // capture microphone sound
  myMic = new p5.AudioIn();
  // turn on microphone
  myMic.start();
}
function draw() {
  background(123,23,45);
  // get the audio level
  let myMicLevel = myMic.getLevel();
  // create a sketch which will be changing according to audio level
  // we multiply the level by 1000 since the values it returns are very small
  ellipse(width / 2, height / 2, myMicLevel * 1000, myMicLevel * 1000);
}

Μπορείτε να δείτε το αποτέλεσμα του παραπάνω κώδικα here

Exercise

  1. Open your Visual Studio editor and the p5yourName folder.
  2. Open the file ex812.js in your editor and save it as ex1033.js
  3. Open the file ex812.html in your editor and save it as ex1033.html
  4. In the ex1033.html file, update the link to ex1033.js  from exersice812.js
  5. Go to the index.html file and create, under Module 10, a link to the ex1033.html  file with the title "capture sound".

Modify the ex1033.jsfile and create an ellipse which will change color according to microphone volume. Moreover, if the volume is greater or equal to 100, keep its y position constant and change its x position according to volume. Else, change its y position. You can see here an example.

Answer:

/// create variable to hold microphone inpute
let myMic;
// create variables for RGB
let r,g,b;
function setup() {
  createCanvas(windowWidth, windowHeight);
  background(123,23,45);
  // capture microphone sound
  myMic = new p5.AudioIn();
  // turn on microphone
  myMic.start();

}
function draw() {

  // get the audio level
  let myMicLevel = myMic.getLevel();
  // change ellipse fill according to microphone volume
  r = myMicLevel * 2000;
  g = myMicLevel * 1000;
  b = myMicLevel * 800;
  fill (r,g,b,50);
  // create a sketch which will be changing according to audio level
  // if the volume is greater or equal to 100
  if (myMicLevel * 8000>=100){
    // change its x position
    ellipse((200+(myMicLevel * 8000)), 200, 200);
  }
  else {
    // else change its y position
    ellipse(200, (200+(myMicLevel * 8000)), 200); 
  }
}

Κάντε μια  Git commit με το μήνυμα "capture sound".

  • Δείτε περισσότερα για την new p5.AudioIn() function
  • Δείτε περισσότερα για την getLevel() function
Previous