├── .gitignore
├── README.md
├── example
├── example.js
├── index.html
└── media
│ ├── ambient-loop.wav
│ ├── techno.wav
│ └── the-birds.wav
├── index.js
├── lib
└── AudioManager.js
├── package-lock.json
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # choo-audio [![stability][0]][1]
2 | [![npm version][2]][3] [![build status][4]][5]
3 | [![downloads][8]][9] [![js-standard-style][10]][11]
4 |
5 | Opinionated abstraction around web audio api for choo framework
6 |
7 | ## Usage
8 |
9 | ```js
10 | var choo = require('choo')
11 | var html = require('choo/html')
12 |
13 | var app = choo()
14 | app.use(require('choo-audio')())
15 | app.route('/', mainView)
16 | app.mount('body')
17 |
18 | function mainView (state, emit) {
19 | return html`
20 |
21 |
22 | `
23 | }
24 | function sounds (state, emitter, app) {
25 | emitter.emit('audio:load', 'some/sound.wav')
26 | emitter.on('audio:load-complete', function () {
27 | emitter.emit('audio:play')
28 | })
29 | }
30 | ```
31 |
32 | ## How it works?
33 |
34 | The whole plugin is based on the [web-audio-graph][web-audio-graph] module.
35 | It basically dynamically build a graph representing different sources to be
36 | played by the user. To start, a track is defined as a simple graph with two
37 | nodes.
38 |
39 | ```text
40 | bufferSource > filter > gain > contextDestination
41 | ```
42 |
43 | there are some ways to manipulate this graph, more on that later.
44 | This basic, opinionated graph is built when you call the `load` event. If you add
45 | other source it is another branch of the graph connected to the same destination.
46 | So, for instance, if you call load again you will have something like
47 |
48 | ```text
49 | bufferSource > filter > gain >---+
50 | |
51 | contextDestination
52 | |
53 | bufferSource > filter > gain >---+
54 | ```
55 |
56 | Keep in mind that buffer sources are internally stored into an array, and there
57 | is always a _current track_. If you add nodes, they will be added to the current
58 | track. If you add a user input source, it will not be stored in the same playlist,
59 | so it will never be the current track, and will be always playing, unless you
60 | manually disconnect it.
61 |
62 | ## Events
63 | ### `audio:load`
64 | Emit this to load an audio source. You can pass an url (string) or directly pass
65 | the [AudioBuffer][AudioBuffer] instance.
66 |
67 | ### `audio:load-complete`
68 | This event will be fired after a load event, when your buffer is complete loaded.
69 |
70 | ### `audio:get-user-input`
71 | Emit this to ask for user input. When granted, a `user-input` event will be fired.
72 |
73 | ### `audio:user-input`
74 | Fired when the user accepted to grant audio input. When this happened, the audio
75 | input will be connected to the context destination, and the mediaStream node from
76 | the audio graph, will be availaible in the app state through `state.audio.userInput`
77 |
78 | ### `audio:play`
79 | Emit this to play the current audio track. If already playing it will not do anything.
80 | Also notice that if the current track were paused, it will restart from the minute
81 | it were paused. Can optionally get an integer `index` param, used to play a different
82 | track from the current one.
83 |
84 | ### `audio:play-all`
85 | Emit this to play all the tracks loaded.
86 |
87 | ### `audio:remove`
88 | Emit this to remove a track from the playlist.
89 |
90 | ### `audio:remove-all`
91 | Clear the whole playlist.
92 |
93 | ### `audio:start-recording`
94 | Start recording with a MediaRecorder object.
95 |
96 | ### `audio:record-complete`
97 | Fired after a `stop-recording` event. Get a blob with the stream
98 | recorded as the only param.
99 |
100 | ### `audio:stop-recording`
101 | Stop a recording started with `start-recording` event. Also will
102 | trigger a `record-complete` event.
103 |
104 | ### `audio:pause`
105 | Pause the current track, if the `play` event is trggered after, it will start
106 | playing from where it got paused.
107 |
108 | ### `audio:next`
109 | Set the curretnTrack as the next availaible one. If it was the last, set it to
110 | the first track on list. If the current track was playing, it will stop it, set
111 | the next one as the current track, and play it.
112 |
113 | ### `audio:prev`
114 | Set the curretnTrack as the previous availaible one. If it was the first, set it to
115 | the last track on list. If the current track was playing, it will stop it, set
116 | the previous one as the current track, and play it.
117 |
118 | ### `audio:stop`
119 | Stop the current track being played and reset the list to the first track.
120 |
121 | ### `audio:set`
122 | Set properties for the current track, take a single object parameter with the
123 | properties to set. Posible options to set are:
124 |
125 | - volume: Float. Set the value fo the [GainNode][GainNode].
126 | - repeat: Boolean. Repeat the source whene finished playing.
127 | - loop: Same as repeat.
128 | - frequency: Float. Set the frequency value in the [BiquadFilter][BiquadFilter].
129 | - detune: Float. Set the detune value in the [BiquadFilter][BiquadFilter].
130 | - Q: Float. Set the frequency value in the [BiquadFilter][BiquadFilter].
131 |
132 | ### `audio:add-node`
133 | Add an audio node to the graph. This will be added directly to the buffer
134 | source of the current track, and then connected to the audio context destination.
135 | You must pass the type (string) and optionally the config for that node. For
136 | more info about types and configurations, see [web-audio-graph][web-audio-graph]
137 | documentation.
138 |
139 | ### `audio:add-signal`
140 | Add an [oscillator source node][OscillatorNode] and connect it to the context destination. You should
141 | pass three arguments `id` an unique identifier, `frequency` the frequency of the signal
142 | defaults to 440, and `type` the type of the oscillator, defaults to 'sine' for a sine
143 | wave. This oscillators are stored in a Map and availaible through `state.audio.signals`
144 |
145 | ### `audio:play-signal`
146 | Play an audio signal by its id.
147 |
148 | ### `audio:stop-signal`
149 | Stop an audio signal by its id.
150 |
151 | ## API
152 | ### var store = audio()
153 | When included in your app, your state will be populated with an `audio` object
154 | with the following properties:
155 |
156 | - `graph`: The [`web-audio-graph`][web-audio-graph] object that manage all the nodes.
157 | - `tracklist`: An array with all the buffer source nodes of every track loaded.
158 | - `index`: The index of the curren track in the tracklist.
159 | - `userInput`: The streamSource input node populated after a `get-user-input` event.
160 | - `signals`: A Map with the signals defined with `add-signal` event.
161 |
162 | ## License
163 | [MIT](/LICENSE)
164 |
165 | [0]: https://img.shields.io/badge/stability-experimental-orange.svg?style=flat-square
166 | [1]: https://nodejs.org/api/documentation.html#documentation_stability_index
167 | [2]: https://img.shields.io/npm/v/choo-audio.svg?style=flat-square
168 | [3]: https://npmjs.org/package/choo-audio
169 | [4]: https://img.shields.io/travis/YerkoPalma/choo-audio/master.svg?style=flat-square
170 | [5]: https://travis-ci.org/YerkoPalma/choo-audio
171 | [6]: https://img.shields.io/codecov/c/github/YerkoPalma/choo-audio/master.svg?style=flat-square
172 | [7]: https://codecov.io/github/YerkoPalma/choo-audio
173 | [8]: http://img.shields.io/npm/dm/choo-audio.svg?style=flat-square
174 | [9]: https://npmjs.org/package/choo-audio
175 | [10]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square
176 | [11]: https://github.com/feross/standard
177 | [web-audio-graph]: https://github.com/YerkoPalma/web-audio-graph
178 | [GainNode]: https://developer.mozilla.org/en-US/docs/Web/API/GainNode
179 | [BiquadFilterNode]: https://developer.mozilla.org/es/docs/Web/API/BiquadFilterNode
180 | [OscillatorNode]: https://developer.mozilla.org/en-US/docs/Web/API/OscillatorNode
--------------------------------------------------------------------------------
/example/example.js:
--------------------------------------------------------------------------------
1 | /* global URL */
2 | var choo = require('choo')
3 | var html = require('choo/html')
4 | var css = require('sheetify')
5 |
6 | var app = choo()
7 | if (process.env.NODE_ENV !== 'production') {
8 | app.use(require('choo-devtools')())
9 | }
10 | app.use(require('..')())
11 | app.use(loadSounds)
12 | app.route('/', mainView)
13 | app.mount('body')
14 |
15 | var text = css`
16 | :host {
17 | color: #fff;
18 | text-align: center;
19 | }
20 | `
21 | function mainView (state, emit) {
22 | return html`
23 |
24 |