Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AudioContext how to play the notes in a sequence

I have followed this tutorial and come up with that code:

context = new AudioContext();
play(frequency) {
    const o = this.context.createOscillator();
    const g = this.context.createGain();
    o.connect(g);
    g.connect(this.context.destination);
    g.gain.exponentialRampToValueAtTime(
      0.00001, this.context.currentTime + 1
    );
    o.frequency.value = frequency;
    o.start(0);
  }

This way I can play any notes from tutorial table by passing the values 1175, 2794, etc

I decided to create an array of notes and just called my play function in the loop and it is just didn't work as all the notes just played at once with no delay.

How would you play the array of notes in a sequence?

I also was looking in to that article but still cant figure out how I can adapt my code above to that.

like image 410
sreginogemoh Avatar asked Sep 12 '17 12:09

sreginogemoh


1 Answers

You can play notes in sequence with an additional parameter time in your play function.This way you can control start time and end time for each note in the sequence.

  var context = new AudioContext();

  var notes = [1175, 2794];
  var duration = 1;
  var interval = 2;

  function play(frequency, time) {
    var o = context.createOscillator();
    var g = context.createGain();
    o.connect(g);
    g.connect(context.destination);
    g.gain.exponentialRampToValueAtTime(
      0.00001, context.currentTime + duration + time
    );
    o.frequency.value = frequency;
    o.start(time);
  }

  for (var i = 0; i < notes.length; i++) {
    play(notes[i], i * interval);
  }

However, if you need a more precise/robust scheduler, you can use a library like WAAClock.js or take inspiration from Chris Wilson metronome to build your own.

like image 139
TGrif Avatar answered Nov 15 '22 13:11

TGrif