Audio

In Beact, there are two ways generating sounds: keyboard and sequencer.

---

Keyboard

A-Z

We use keymaster to listen on keyboard event. When key event occurs, we play the matching audio sample from Multiplayer by Tone.js.

Space Bar

Start or stop the sequencer by the current boolean state playing.

Up & Down

Pass +10 or -10 to the Transport.bpm to change the sequencer playing speed.

Right & Left

Point to the next or previous element in the array named drumUrls, which contains different sample sets, and loadSamples() to change sequencer's sample set.

---

Sequencer

Basis Mode

By 2D array, we set 16 columns with audio samples to loop through. Each column contains 8 samples, marked as 1 or 0 for play or not to play.

When the sequencer starts, it plays from the first column's first element to the last. Then the second column. Once it plays through the last column, it starts from first column again.

Samples from the same column sound like playing at the same time due to short processing time, while fixed notation spaning between columns makes the sample playing a beat.

Pattern Mode

We Post the 2D array of current sequencer schema and the inputed pattern name to database. We get the API and setState to render the pattern list.

Whenever the list item is clicked, the schema of sequencer would be changed as the pattern in state.

Chain Mode

We could continually push the 2D array of sequencer schema into the array of state drumNoteChain. As the sequencer reaches an end of a schema, it plays the schema of the second array element, and so on. Once it plays through the last array element, it starts again from the first.

Recorder

Keyboard:

Push the keys which are played during recording with their invoking times (Transport.seconds) into the array named record, then save it in database.

Sequencer:

Store each column as sequencer plays through in 2D array recordMatrix. Once stored columns filled recordMatrix's 16 elements, it would be push into the array named recordFill, and recordMatrix would be cleared and continue to store played columns. They would be saved in database.

Render the record list by getting the API and setState.

Play:

When the record list item is clicked, the sequencer begins to play. The schema of sequencer is ever-changing based on record.content, and the keyRecords would be played just as they are recorded according to their invoking time.