Classification με την ml5.js: Προσθήκη ήχου

Θα ήταν πολύ ενδιαφέρον εάν δίναμε τη δυνατότητα στην εφαρμογή μας να μας αναπαράγει τις νότες και ακουστικά, εκτός από οπτικά. Με λίγες γραμμές κώδικα θα το πραγματοποιήσουμε.

Όπως ξέρουμε, με την p5 είναι πολύ εύκολο να αναπαράγουμε ήχο. Αρκεί να δηλώσουμε έναν ταλαντωτή (oscillator) και ένα envelope.

let nn;
let currentNote = 'C';
let appState = 'collect';
let envelope, oscillator;

function setup() {
  createCanvas(400, 400);
  background(200);

  let nnOptions = {
    inputs: ['x', 'y'],
    outputs: ['note'],
    task: 'classification',
    debug: 'true',
  };

  nn = ml5.neuralNetwork(nnOptions);

  envelope = new p5.Envelope();
  envelope.setADSR(0.05, 0.1, 0.5, 1);
  envelope.setRange(1.2, 0);

  oscillator = new p5.Oscillator();
  oscillator.setType('sine');
  oscillator.freq(440);
  oscillator.amp(envelope);
  oscillator.start();

}

Έπειτα θα κατασκευάσουμε μια helper μέθοδο που θα αναπαράγει οποιαδήποτε συχνότητα της δώσουμε εμείς ως παράμετρο.

//helpers
...
function playNote (noteFrequency) {

    oscillator.freq(noteFrequency);
    envelope.play();

}

Σε αυτό το στάδιο θα πρέπει να ορίσουμε κάπως την συχνότητα με την οποία αντιστοιχεί η κάθε νότα (μια πληροφορία που τη βρίσκουμε πολύ εύκολα στο google). Θα την ορίσουμε στις global μεταβλητές, σε ένα αντικείμενο με ζευγάρια νότα: συχνότητα, οπου το key είναι η νότα και το value η συχνότητα.

...
let notesToFrequencies = {
  C: 261.6,
  D: 293.6,
  E: 329.6,
  F: 349.2,
  G: 391.9,
  A: 440.0,
  B: 493.8
}

Τώρα θα καλέσουμε την μέθοδο playNote() που μόλις φτιάξαμε στα σημεία που θέλουμε.

function mousePressed() {

  let inputValues = {
    x: mouseX,
    y: mouseY
  }

  if (appState == 'collect') {

    let outputValue = {
      note: currentNote
    }

    nn.addData(inputValues, outputValue);

    drawNote(currentNote, mouseX, mouseY);
    playNote(notesToFrequencies[currentNote]);
    ...

function onGotResults(error, results) {

  if (error) {
    console.error(error);
    return;
  }

  console.log(results);

  let note = results[0].label
  drawNotePrediction(note, mouseX, mouseY);
  playNote (notesToFrequencies[note]);

}

Κάπου εδώ τελειώσαμε με το πρόγραμμα μας, έχοντας καλύψει όλες τις ανάγκες μας για αυτό το tutorial. Κάντε κλικ παρακάτω για να δείτε το αποτέλεσμα και να πειραματιστείτε.