I have followed this tutorial and e 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.

I have followed this tutorial and e 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.

• javascript
• sequence
• audiocontext

Share Improve this question Follow asked Sep 12, 2017 at 12:03 SerginoSergino 10.9k3737 gold badges107107 silver badges181181 bronze badges 1

• 2 On your other question: while(true){for(i = 0; i < array.length; ++i){ doStuff(i); } for(i = array.length; i-- > 0; ){ doStuff(i); } }. Just keep it simple, don't overthink it. – Zeta Commented Sep 15, 2017 at 6:21

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7 +25

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.

This happens because the operations you are doing are non blocking in JavaScript. The most straightforward way to force a delay between these is to use setInterval and setTimeout. I found examples of using those in this article on using AudioContext.

setInterval on MDN setTimeout on MDN

The difference is that setTimeout executes once after a delay, whereas setInterval executes repeatedly until you tell it to stop.