DEV Community

A simple audio sequencer using Web Audio Api & Angular

Stefanos Kouroupis on July 07, 2019

I decided to move my posts from medium to here, for various personal reasons. As I move them I also going to delete them from there, no reason keep...
Read full post
Collapse
 
jomopipi profile image
JomoPipi • • Edited

Nice article :D
Instead of hard-coding each note's frequency, it might be less work to start with some frequency and just keep multiplying it by the 12th root of two to get the next one.

const TR2 = 2 ** (1.0 / 12.0)
const frequencies = [...Array(12 * nOctaves + 1)].reduce(notes => 
    (notes.push(notes[notes.length-1] * TR2), notes),[110])
Enter fullscreen mode Exit fullscreen mode
Collapse
 
panfluterman profile image
panfluterman •

Please you have a demo online?

Collapse
 
elasticrash profile image
Stefanos Kouroupis • • Edited

No, but I could push the current branch into GitHub pages at some point. I'll let you know

Collapse
 
elasticrash profile image
Stefanos Kouroupis •

I uploaded a demo
elasticrash.github.io/angular-sounds/

Collapse
 
mahen23 profile image
EDGE Neural Networks •

Can you please post the whole project to git or something because its quite difficult to follow.

Collapse
 
elasticrash profile image
Stefanos Kouroupis • • Edited

mind you it's not exactly the same, but nearly 90% similar

github.com/elasticrash/angular-sounds

as bonus I updated it to angular 8 (from 6)

Collapse
 
mahen23 profile image
EDGE Neural Networks •

I've never seen this line before:

new (window['AudioContext'] || window['webkitAudioContext'])();

Can you please expand more on how to access HTML5 apis via Angular ? We've been trying to use filesystem api via NodeJS and its quite painful, especially through electron. Thanks.

Thread Thread
 
elasticrash profile image
Stefanos Kouroupis • • Edited

That line is nothing more, than basic backward compatibility with the older implementation of the AudioContext. The web Audio standard was first implemented in webkit under the official specifications. New implementations follow specifications to the letter.

Basically whichever of those two evaluates to true, gets used.

I've never done any electron work, but as far as I know its a combination of nodejs and the Chromium engine.

how can you access the window object though through electron is beyond me. A quick search came back with the following

let myWindow = new BrowserWindow(params);
myWindow.webContents.executeJavaScript('window.anyWantedProperty')
    .then(result => console.log(result));