Υποενότητα 10.3: Ήχος στο p5

Φόρτωση - load και αναπαραγωγή - play 'ηχουε

Το p5.js διαθέτει ενσωματωμένη βιβλιοθήκη ήχου p5.js, η οποία μας επιτρέπει να χειριζόμαστε τον ήχο.

Για να φορτώσουμε τον ήχο, χρησιμοποιούμε τη συνάρτηση  loadSound() .  Παρόμοια με άλλα μέσα, βάζουμε αυτή τη λειτουργία μέσα σε preload().

Για να παίξουμε πραγματικά τον ήχο θα πρέπει να χρησιμοποιήσουμε τη συνάρτηση  play(). 

Επιπλέον, μπορούμε να ρυθμίσουμε το επίπεδο ήχου χρησιμοποιώντας τη συνάρτηση setVolume() . Αυτή η συνάρτηση λαμβάνει τιμές από 0,0 (ελάχιστο) έως 1,0 (μέγιστο).

Παράδειγμα

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

function preload() {
 mySound = loadSound('sounds/Sg.mp3');
}

function setup() {
  // define the sound level
  mySound.setVolume(0.1);
  // play the sound
  mySound.play();
}

Μπορείτε να δείτε το αποτέλεσμα του παραπάνω κώδικα 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 ex1031.js
3. Open the file ex812.html in your editor and save it as ex1031.html
4. In the ex1031.html file, update the link to ex1031.js  from exersice812.js
5. Go to the index.html file and create, under Module 10, a link to the ex1031.html  file with the title "load and play sound".

Modify the ex1031.jsfile and use as a base the above example to load a sound. The sound volume should increase as long as the mouse is pressed and when released, should return to the original volume. You can see here an example.

Answer:

function preload() {
 mySound = loadSound('sounds/Sg.mp3');
}

function setup() {
  // define the sound level
  mySound.setVolume(0.1);
  // play the sound
  mySound.play();
}
function mousePressed() {
  // increase sound level when mouse is pressed
  mySound.setVolume(0.5);
}
function mouseReleased() {
  // return to the original sound level
  mySound.setVolume(0.1);
}

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

• Δείτε περισσότερα για την loadSound() function
• Δείτε περισσότερα για την play() function
• Δείτε περισσότερα για την setVolume() function

Χειριστήρια play και pause

Για να ελέγξουμε αν ο ήχος μας θα παίξει ή θα σταματήσει μπορούμε να δημιουργήσουμε ένα κουμπί το οποίο θα παύσει τον ήχο αν παίζει ή θα τον κάνει να παίζει.

Έχουμε ήδη δει πώς μπορούμε να κάνουμε αναπαρέγουμε ένα ηχητικό ντοκουμέντο. Για να το θέσουμε σε παύση, χρησιμοποιούμε τη συνάρτηση  pause() .

Ωστόσο, πώς μπορούμε να εντοπίσουμε αν παίζει κάποιος ήχος;

Το p5.js έχει τη συνάρτηση  isPlaying() function. Αυτή η συνάρτηση επιστρέφει μια τιμή boolean που είναι αληθής εάν ο ήχος παίζει και είναι ψευδής αν δεν παίζει.

Ας δούμε πώς μπορούμε να το χρησιμοποιήσουμε για να παίξουμε / να παύσουμε το τραγούδι μας.

Παράδειγμα

Ακολουθεί ένα παράδειγμα κώδικα όπου χρησιμοποιούμε ένα κουμπί για αναπαραγωγή / παύση ενός ήχου:

// create a variable for the button
let myBtn;
function preload() {
 mySound = loadSound('sounds/Sg.mp3');
}

function setup() {
  createCanvas(200,200);
  // create the button to control sound
  myBtn = createButton('play');
  // call the function playPause when the user presses the mouse
  myBtn.mousePressed(playPause);
}
function playPause(){
  //use the isPlaying to determine whether the sound is playing or not
  // if the sound is not playing
  if (!mySound.isPlaying()){
    // make it play
    mySound.play();
    // define the sound level
    mySound.setVolume(0.5);
  }
  // else pause it
  else {
    mySound.pause();
  }
}

Μπορείτε να δείτε το αποτέλεσμα του παραπάνω κώδικα here. Αυτό το παράδειγμα λειτουργεί καλύτερα στο mozilla firefox.

Exercise

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

Modify the ex1032.jsfile and use as a base the above example and load a sound which will start from the beginning each time the user presses the button. To do this you should use the stop() function for which you can learn more here. You can see here an example.

Answer:

// create a variable for the button
let myBtn;
function preload() {
 mySound = loadSound('sounds/Sg.mp3');
}

function setup() {
  createCanvas(200,200);
  // create the button to control sound
  myBtn = createButton('play');
  // call the function playPause when the user presses the mouse
  myBtn.mousePressed(playPause);
}
function playPause(){
  //use the isPlaying to determine whether the sound is playing or not
  // if the sound is not playing
  if (!mySound.isPlaying()){
    // make it play
    mySound.play();
    // define the sound level
    mySound.setVolume(0.5);
  }
  // else stop it
  else {
    mySound.stop();
  }
}

Κάντε μια  Git commit με το μήνυμα "play and pause buttons".

• Δείτε περισσότερα για την isPlaying() function
• Δείτε περισσότερα για την pause() function

Καταγραφή - 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