94 |
--------------------------------------------------------------------------------
/docs/effects/flanger.md:
--------------------------------------------------------------------------------
1 | # Flanger
2 |
3 | [View source code](../../src/effects/flanger.js)
4 |
5 | [View example](http://stinkstudios.github.io/sono/examples/flanger.html)
6 |
7 | Creates a sweeping filter effect
8 |
9 | ```javascript
10 | import flanger from 'sono/effects/flanger';
11 |
12 | const sound = sono.create('boom.mp3');
13 |
14 | const flange = sound.effects.add(flanger({
15 | stereo: true,
16 | delay: 0.005,
17 | feedback: 0.5,
18 | frequency: 0.025,
19 | gain: 0.002
20 | }));
21 | ```
22 |
23 | ## Stereo flanger
24 |
25 | ```javascript
26 | import {stereoFlanger} from 'sono/effects/flanger';
27 |
28 | const sound = sono.create('boom.mp3');
29 |
30 | const flange = sound.effects.add(stereoFlanger({
31 | delay: 0.005,
32 | feedback: 0.5,
33 | frequency: 0.025,
34 | gain: 0.002
35 | }));
36 | ```
37 |
38 | ## Mono flanger
39 |
40 | ```javascript
41 | import {monoFlanger} from 'sono/effects/flanger';
42 |
43 | const sound = sono.create('boom.mp3');
44 |
45 | const flange = sound.effects.add(monoFlanger({
46 | delay: 0.005,
47 | feedback: 0.5,
48 | frequency: 0.025,
49 | gain: 0.002
50 | }));
51 | ```
52 |
--------------------------------------------------------------------------------
/docs/effects/panner.md:
--------------------------------------------------------------------------------
1 | # Panner
2 |
3 | [View source code](../../src/effects/panner.js)
4 |
5 | [View example](http://stinkstudios.github.io/sono/examples/three.html)
6 |
7 | ## Pan left/right
8 |
9 | ```javascript
10 | import panner from 'sono/effects/panner';
11 |
12 | const sound = sono.create('boom.mp3');
13 |
14 | const pan = sound.effects.add(panner());
15 |
16 | // pan fully right:
17 | pan.set(1);
18 |
19 | // pan fully left:
20 | pan.set(-1);
21 | ```
22 |
23 | ## 3d panning
24 |
25 | Pass vectors of the 'listener' (i.e. the camera) and the origin of the sound to play the sound in 3d audio.
26 |
27 | The listener is global and doesn't need to be updated for every panner object.
28 |
29 | ```javascript
30 | import panner from 'sono/effects/panner';
31 |
32 | const sound = sono.create('boom.mp3');
33 |
34 | const pan = sound.effects.add(panner());
35 |
36 | function update() {
37 | window.requestAnimationFrame(update);
38 |
39 | // update the 3d position and orientation (forward vector) of the sound
40 | pan.setPosition(x, y, z);
41 | pan.setOrientation(x, y, z);
42 |
43 | // update listener position and orientation to 3d camera Vectors
44 | pan.setListenerPosition(x, y, z);
45 | pan.setListenerOrientation(x, y, z);
46 | }
47 | ```
48 |
49 | ## Pass xyz or 3d vector objects
50 |
51 | ```javascript
52 | // accepts xyz or a 3d vector object
53 | pan.setPosition(source.position);
54 | pan.setOrientation(source.forward);
55 |
56 | pan.setListenerPosition(camera.position);
57 | pan.setListenerOrientation(camera.forward);
58 | ```
59 |
60 | ## Set global listener position and orientation using static methods
61 |
62 | ```javascript
63 | import panner from 'sono/effects/panner';
64 |
65 | function update() {
66 | window.requestAnimationFrame(update);
67 |
68 | panner.setListenerPosition(x, y, z);
69 | panner.setListenerOrientation(x, y, z);
70 | }
71 | ```
72 |
73 | ## Configure how distance and angle affect the sound
74 |
75 | ```javascript
76 | import panner from 'sono/effects/panner';
77 |
78 | const sound = sono.create('boom.mp3');
79 |
80 | const pan = sound.effects.add(panner({
81 | panningModel: 'HRTF',
82 | distanceModel: 'linear',
83 | refDistance: 1,
84 | maxDistance: 1000,
85 | rolloffFactor: 1,
86 | coneInnerAngle: 360,
87 | coneOuterAngle: 0,
88 | coneOuterGain: 0
89 | }));
90 | ```
91 |
92 | ## Set defaults for all panner nodes
93 |
94 | ```javascript
95 | import panner from 'sono/effects/panner';
96 |
97 | panner.defaults = {
98 | panningModel: 'HRTF',
99 | distanceModel: 'linear',
100 | refDistance: 1,
101 | maxDistance: 1000,
102 | rolloffFactor: 1,
103 | coneInnerAngle: 360,
104 | coneOuterAngle: 0,
105 | coneOuterGain: 0
106 | };
107 | ```
108 |
--------------------------------------------------------------------------------
/docs/effects/phaser.md:
--------------------------------------------------------------------------------
1 | # Phaser
2 |
3 | [View source code](../../src/effects/phaser.js)
4 |
5 | [View example](http://stinkstudios.github.io/sono/examples/phaser.html)
6 |
7 | Creates a sweeping filter effect
8 |
9 | ```javascript
10 | import phaser from 'sono/effects/phaser';
11 |
12 | const sound = sono.create('boom.mp3');
13 |
14 | const phaser = sound.effects.add(phaser({
15 | stages: 8,
16 | frequency: 0.5,
17 | gain: 300,
18 | feedback: 0.5
19 | }));
20 | ```
21 |
--------------------------------------------------------------------------------
/docs/effects/reverb.md:
--------------------------------------------------------------------------------
1 | # Reverb
2 |
3 | [View source code](../../src/effects/reverb.js)
4 |
5 | [View example](http://stinkstudios.github.io/sono/examples/reverb.html)
6 |
7 | ```javascript
8 | import reverb from 'sono/effects/reverb';
9 |
10 | const sound = sono.create('boom.mp3');
11 | const room = sound.effects.add(reverb({time: 1, decay: 5}));
12 | sound.play();
13 |
14 | // update multiple properties:
15 | room.update({
16 | time: 0.5,
17 | decay: 3,
18 | reverse: true
19 | });
20 | ```
21 |
--------------------------------------------------------------------------------
/docs/getting-started.md:
--------------------------------------------------------------------------------
1 | # Getting Started
2 |
3 | ## Install
4 |
5 | ```javascript
6 | npm i -S sono
7 | ```
8 |
9 | ## Import
10 |
11 | ```javascript
12 | import sono from 'sono';
13 | ```
14 |
15 | ## Create a sound object
16 |
17 | Use the returned reference:
18 | ```javascript
19 | const sound = sono.create('boom.mp3');
20 | sound.play();
21 | ```
22 |
23 | Or use an Id:
24 | ```javascript
25 | sono.create({
26 | id: 'boom',
27 | url: 'boom.mp3'
28 | });
29 | sono.play('boom');
30 | ```
31 |
32 | ## Add some effects
33 |
34 | Set an array of effects:
35 | ```javascript
36 | import echo from 'sono/effects/echo';
37 | import reverb from 'sono/effects/reverb';
38 |
39 | const sound = sono.create('boom.mp3');
40 | sound.effects = [echo(), reverb()];
41 | sound.play();
42 | ```
43 |
44 | Or use the `add` function to return the reference:
45 | ```javascript
46 | import echo from 'sono/effects/echo';
47 | import reverb from 'sono/effects/reverb';
48 |
49 | const sound = sono.create('boom.mp3');
50 | const echo = sound.effects.add(echo());
51 | const reverb = sound.effects.add(reverb());
52 | sound.play();
53 | ```
54 |
55 | ## Log info on browser support
56 |
57 | ```javascript
58 | import sono from 'sono';
59 | sono.log(); // sono 0.2.0 Supported:true WebAudioAPI:true TouchLocked:false Extensions:ogg,mp3,opus,wav,m4a
60 | ```
61 |
62 | ## Further documentation
63 |
64 | [Sounds](./sounds.md)
65 |
66 | [Effects](./effects.md)
67 |
68 | [Controls](./controls.md)
69 |
70 | [Utils](./utils.md)
71 |
--------------------------------------------------------------------------------
/docs/loading.md:
--------------------------------------------------------------------------------
1 | # Loading
2 |
3 | ## Load multiple with config and callbacks
4 |
5 | ```javascript
6 | sono.load({
7 | url: [{
8 | id: 'foo',
9 | url: 'foo.mp3'
10 | }, {
11 | id: 'bar',
12 | url: ['bar.ogg', 'bar.mp3'],
13 | loop: true,
14 | volume: 0.5
15 | }],
16 | onComplete: sounds => console.log(sounds),
17 | onProgress: progress => console.log(progress)
18 | });
19 |
20 | const foo = sono.get('foo');
21 | sono.play('bar');
22 | ```
23 |
24 | ## Load single with config options and callbacks
25 |
26 | ```javascript
27 | const sound = sono.load({
28 | id: 'foo',
29 | src: ['foo.ogg', 'foo.mp3'],
30 | loop: true,
31 | volume: 0.2,
32 | onComplete: sound => console.log(sound),
33 | onProgress: progress => console.log(progress)
34 | });
35 | ```
36 |
37 | ## Load single
38 |
39 | ```javascript
40 | sono.load({
41 | url: 'foo.mp3',
42 | onComplete: sound => console.log(sound),
43 | onProgress: progress => console.log(progress)
44 | });
45 | ```
46 |
47 | ## Load multiple
48 |
49 | ```javascript
50 | sono.load({
51 | url: [
52 | {url: 'foo.mp3'},
53 | {url: 'bar.mp3'}
54 | ],
55 | onComplete: sounds => console.log(sounds),
56 | onProgress: progress => console.log(progress)
57 | });
58 | ```
59 |
60 | ## Check support
61 |
62 | ```javascript
63 | sono.isSupported;
64 | sono.hasWebAudio;
65 |
66 | sono.canPlay.ogg;
67 | sono.canPlay.mp3;
68 | sono.canPlay.opus
69 | sono.canPlay.wav;
70 | sono.canPlay.m4a;
71 | ```
72 |
--------------------------------------------------------------------------------
/docs/sounds.md:
--------------------------------------------------------------------------------
1 | # Sound
2 |
3 | [View source code](../src/core/sound.js)
4 |
5 | ## Create
6 |
7 | ```javascript
8 | const sound = sono.create('boom.mp3');
9 | ```
10 |
11 | ## Create and configure
12 |
13 | ```javascript
14 | const sound = sono.create({
15 | id: 'boom',
16 | url: ['boom.ogg', 'boom.mp3'],
17 | loop: true,
18 | volume: 0.5,
19 | effects: [
20 | sono.echo()
21 | ]
22 | });
23 | ```
24 |
25 | ## Create an oscillator
26 |
27 | ```javascript
28 | const squareWave = sono.create('square');
29 | squareWave.frequency = 200;
30 | ```
31 |
32 | ## Create from HTMLMediaElement
33 |
34 | ```javascript
35 | const video = document.querySelector('video');
36 | const videoSound = sono.create(videoEl);
37 | ```
38 |
39 | ## Control and update
40 |
41 | ```javascript
42 | const sound = sono.create('boom.mp3');
43 | // playback
44 | sound.play();
45 | sound.pause();
46 | sound.stop();
47 | // play with 200ms delay
48 | sound.play(0.2);
49 | // set volume
50 | sound.volume = 0.5;
51 | // fade out volume to 0 over 2 seconds
52 | sound.fade(0, 2);
53 | // seek to 0.5 seconds
54 | sound.seek(0.5);
55 | // play sound at double speed
56 | sound.playbackRate = 2;
57 | // play sound at half speed
58 | sound.playbackRate = 0.5;
59 | // loop
60 | sound.loop = true;
61 | // play at 3s
62 | sound.currentTime = 3;
63 | ```
64 |
65 | ## Get properties
66 |
67 | ```javascript
68 | const sound = sono.create('boom.mp3');
69 | console.log(sound.context);
70 | console.log(sound.currentTime);
71 | console.log(sound.duration);
72 | console.log(sound.effects);
73 | console.log(sound.ended);
74 | console.log(sound.loop);
75 | console.log(sound.paused);
76 | console.log(sound.playing);
77 | console.log(sound.progress);
78 | console.log(sound.volume);
79 | console.log(sound.playbackRate);
80 | ```
81 |
82 | ## Special properties
83 |
84 | ```javascript
85 | // raw sound data (AudioBuffer, MediaElement, MediaStream, Oscillator type)
86 | console.log(sound.data);
87 | // frequency for Oscillator source type
88 | console.log(sound.frequency);
89 | // output node (GainNode)
90 | console.log(sound.gain);
91 | ```
92 |
93 | ## Methods can be chained
94 |
95 | ```javascript
96 | const sound = sono.create({
97 | id: 'boom',
98 | url: 'boom.ogg',
99 | volume: 0
100 | })
101 | .on('ended', sound => dispatch('ended', sound.id))
102 | .play()
103 | .fade(1, 2)
104 | ```
105 |
106 | ## Add and remove event listeners
107 |
108 | ```javascript
109 | sono.create('boom.ogg')
110 | .on('pause', sound => dispatch('pause', sound))
111 | .on('play', sound => dispatch('play', sound))
112 | .once('ended', sound => {
113 | sound.off('pause');
114 | sound.off('play');
115 | dispatch('ended', sound);
116 | })
117 | .play();
118 | ```
119 |
120 | ## Methods
121 |
122 | ```javascript
123 | sound.play(delay, offset)
124 | sound.pause()
125 | sound.stop()
126 | sound.seek(time)
127 | sound.fade(volume, duration)
128 | sound.unload()
129 | sound.reload()
130 | sound.destroy()
131 | sound.waveform(length)
132 | ```
133 |
134 | ## Properties
135 |
136 | ```javascript
137 | sound.context
138 | sound.currentTime
139 | sound.data
140 | sound.duration
141 | sound.effects
142 | sound.ended
143 | sound.frequency
144 | sound.gain
145 | sound.loop
146 | sound.paused
147 | sound.playbackRate
148 | sound.playing
149 | sound.progress
150 | sound.volume
151 | ```
152 |
153 | ## Events
154 |
155 | ```javascript
156 | sound
157 | .on('loaded', (sound) => console.log('loaded'))
158 | .on('ready', (sound) => console.log('ready'))
159 | .on('play', (sound) => console.log('play'))
160 | .on('pause', (sound) => console.log('pause'))
161 | .on('stop', (sound) => console.log('stop'))
162 | .on('fade', (sound, volume) => console.log('fade'))
163 | .on('ended', (sound) => console.log('ended'))
164 | .on('unload', (sound) => console.log('unload'))
165 | .on('error', (sound, err) => console.error('error'))
166 | .on('destroy', (sound) => console.log('destroy'));
167 | ```
168 |
--------------------------------------------------------------------------------
/docs/utils.md:
--------------------------------------------------------------------------------
1 | # Utils
2 |
3 | ## Clone an AudioBuffer
4 |
5 | ```javascript
6 | const cloned = sono.utils.cloneBuffer(sound.data);
7 | ```
8 |
9 | ## Reverse an AudioBuffer
10 |
11 | ```javascript
12 | const reversed = sono.utils.reverseBuffer(sound.data);
13 | ```
14 |
15 | ## Convert currentTime seconds into time code string
16 |
17 | ```javascript
18 | const timeCode = sono.utils.timeCode(217.8); // '03:37'
19 | ```
20 |
21 | ## Extra utils
22 |
23 | ```javascript
24 | import 'sono/utils';
25 | ```
26 |
27 | [microphone](./utils/microphone.md)
28 |
29 | [recorder](./utils/recorder.md)
30 |
31 | [waveform](./utils/waveform.md)
32 |
33 | [waveformer](./utils/waveformer.md)
34 |
--------------------------------------------------------------------------------
/docs/utils/microphone.md:
--------------------------------------------------------------------------------
1 | # Microphone
2 |
3 | [View source code](../../src/utils/microphone.js)
4 |
5 | ```javascript
6 | import microphone from 'sono/utils';
7 | import analyser from 'sono/effects';
8 |
9 | const mic = microphone(stream => {
10 | // user allowed mic
11 | const sound = sono.create(stream);
12 | const analyse = sound.effects.add(analyser());
13 | }, err => {
14 | // user denied mic
15 | }, err => {
16 | // error
17 | });
18 | mic.connect();
19 | ```
20 |
--------------------------------------------------------------------------------
/docs/utils/recorder.md:
--------------------------------------------------------------------------------
1 | # Recorder
2 |
3 | [View source code](../../src/utils/recorder.js)
4 |
5 | ## Record audio from the mix or microphone to a new audio buffer
6 |
7 | ```javascript
8 | import recorder from 'sono/utils/recorder';
9 |
10 | const record = recorder()
11 |
12 | record.start(sound)
13 |
14 | record.getDuration();
15 |
16 | const buffer = record.stop();
17 | ```
18 |
19 | ## Record a microphone stream
20 |
21 | ```javascript
22 | import 'sono/utils/recorder';
23 | import 'sono/utils/microphone';
24 |
25 | let micSound;
26 | let recorder;
27 |
28 | function onMicConnected(stream) {
29 | micSound = sono.create(stream);
30 | // add recorder, setting passThrough to false
31 | // to avoid feedback loop between mic and speakers
32 | recorder = sono.utils.recorder(false);
33 | recorder.start(micSound);
34 | };
35 |
36 | stopButton.addEventListener('click', function() {
37 | const buffer = recorder.stop();
38 | const recordedSound = sono.create(buffer);
39 | recordedSound.play();
40 | });
41 |
42 | const mic = sono.utils.microphone(onMicConnected);
43 | mic.connect();
44 | ```
45 |
--------------------------------------------------------------------------------
/docs/utils/waveform.md:
--------------------------------------------------------------------------------
1 | # Waveform
2 |
3 | [View source code](../../src/utils/waveform.js)
4 |
5 | ```javascript
6 | import sono from 'sono';
7 | import 'sono/utils/waveform';
8 |
9 | const sound = sono.create('boom.mp3');
10 | sound.on('ready', () => {
11 | // request sound waveform
12 | const waveform = sound.waveform(640);
13 |
14 | // draw waveform
15 | for (let i = 0; i < waveform.length; i++) {
16 | const value = waveform[i];
17 | }
18 | });
19 | ```
20 |
--------------------------------------------------------------------------------
/docs/utils/waveformer.md:
--------------------------------------------------------------------------------
1 | # Waveformer
2 |
3 | [View source code](../../src/utils/waveformer.js)
4 |
5 | ## Get a sound's waveform and draw it to a canvas element:
6 |
7 | ```javascript
8 | const wave = sono.utils.waveformer({
9 | sound: sound,
10 | width: 200,
11 | height: 100,
12 | color: '#333333',
13 | bgColor: '#DDDDDD'
14 | });
15 | document.body.appendChild(wave.canvas);
16 | ```
17 |
18 | ## Supply your own canvas el
19 |
20 | ```javascript
21 | const canvasEl = document.querySelector('canvas');
22 | const wave = sono.utils.waveformer({
23 | waveform: sound.waveform(canvasEl.width),
24 | canvas: canvasEl,
25 | color: 'green'
26 | });
27 | ```
28 |
29 | ## Color can be a function
30 |
31 | ```javascript
32 | const waveformer = sono.utils.waveformer({
33 | waveform: sound.waveform(canvasEl.width),
34 | canvas: canvasEl,
35 | color: (position, length) => {
36 | return position / length < sound.progress ? 'red' : 'yellow';
37 | }
38 | });
39 | ```
40 |
41 | ## Shape can be circular
42 |
43 | ```javascript
44 | const waveformer = sono.utils.waveformer({
45 | shape: 'circular',
46 | sound: sound,
47 | canvas: canvasEl,
48 | color: 'black'
49 | });
50 | ```
51 |
52 | ## Draw the output of an AnalyserNode to a canvas
53 |
54 | ```javascript
55 | const sound = sono.create('foo.ogg');
56 | const analyser = sound.effects.add(sono.analyser({
57 | fftSize: 512,
58 | smoothing: 0.7
59 | }));
60 |
61 | const waveformer = sono.utils.waveformer({
62 | waveform: analyser.getFrequencies(),
63 | canvas: document.querySelector('canvas'),
64 | color: (position, length) => {
65 | const hue = (position / length) * 360;
66 | return `hsl(${hue}, 100%, 40%)`;
67 | },
68 | // normalise the value from the analyser
69 | transform: value => value / 256
70 | });
71 |
72 | // update the waveform
73 | function update() {
74 | window.requestAnimationFrame(update);
75 | // request frequencies from the analyser
76 | analyser.getFrequencies();
77 | // update the waveformer display
78 | waveformer();
79 | }
80 | update();
81 | ```
82 |
--------------------------------------------------------------------------------
/examples/analyser.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | sono - examples - 3d
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
22 |
23 |
24 | import sono from 'sono';
25 | import 'sono/effects';
26 |
27 | const sound = sono.create({
28 | url: ['beats.ogg', 'beats.mp3'],
29 | loop: true
30 | })
31 | .play();
32 |
33 | const analyser = sound.effects.add(sono.analyser({
34 | fftSize: 128
35 | }));
36 |
37 | function averageAmplitude(wave) {
38 | let sum = 0;
39 | for (let i = 0; i < wave.length; i++) {
40 | sum += wave[i];
41 | }
42 | return sum / wave.length / 256;
43 | }
44 |
45 | function update() {
46 | window.requestAnimationFrame(update);
47 |
48 | const value = averageAmplitude(analyser.getWaveform());
49 |
50 | if (value < min) {
51 | min = value;
52 | }
53 |
54 | if (value > max) {
55 | max = value;
56 | }
57 |
58 | const range = (max - min) || 1;
59 | const norm = (value - min) / range;
60 |
61 | if (norm > threshold) {
62 | // got a peak so animate, speed up, glow etc
63 | }
64 | }
65 | update();
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
--------------------------------------------------------------------------------
/examples/audio/.gitinclude:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Stinkstudios/sono/50fbea6b51d7015496539b27b3e568d08faef0e8/examples/audio/.gitinclude
--------------------------------------------------------------------------------
/examples/audio/.htaccess:
--------------------------------------------------------------------------------
1 |
2 | Header add Access-Control-Allow-Origin "*"
3 | Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
4 | Header add Access-Control-Allow-Headers: "Content-Type"
5 |
6 | RewriteEngine on
7 | RewriteBase /
8 |
--------------------------------------------------------------------------------
/examples/audio/bullet.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Stinkstudios/sono/50fbea6b51d7015496539b27b3e568d08faef0e8/examples/audio/bullet.mp3
--------------------------------------------------------------------------------
/examples/audio/bullet.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Stinkstudios/sono/50fbea6b51d7015496539b27b3e568d08faef0e8/examples/audio/bullet.ogg
--------------------------------------------------------------------------------
/examples/audio/collect.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Stinkstudios/sono/50fbea6b51d7015496539b27b3e568d08faef0e8/examples/audio/collect.mp3
--------------------------------------------------------------------------------
/examples/audio/collect.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Stinkstudios/sono/50fbea6b51d7015496539b27b3e568d08faef0e8/examples/audio/collect.ogg
--------------------------------------------------------------------------------
/examples/audio/dnb-loop.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Stinkstudios/sono/50fbea6b51d7015496539b27b3e568d08faef0e8/examples/audio/dnb-loop.mp3
--------------------------------------------------------------------------------
/examples/audio/dnb-loop.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Stinkstudios/sono/50fbea6b51d7015496539b27b3e568d08faef0e8/examples/audio/dnb-loop.ogg
--------------------------------------------------------------------------------
/examples/audio/hit.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Stinkstudios/sono/50fbea6b51d7015496539b27b3e568d08faef0e8/examples/audio/hit.mp3
--------------------------------------------------------------------------------
/examples/audio/hit.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Stinkstudios/sono/50fbea6b51d7015496539b27b3e568d08faef0e8/examples/audio/hit.ogg
--------------------------------------------------------------------------------
/examples/audio/select.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Stinkstudios/sono/50fbea6b51d7015496539b27b3e568d08faef0e8/examples/audio/select.mp3
--------------------------------------------------------------------------------
/examples/audio/select.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Stinkstudios/sono/50fbea6b51d7015496539b27b3e568d08faef0e8/examples/audio/select.ogg
--------------------------------------------------------------------------------
/examples/background.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | sono - examples - play in background
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | play in background
17 |
18 |
19 |
23 |
24 |
25 | import sono from 'sono';
26 |
27 | sono.playInBackground = true;
28 |
29 | sono.create({url: 'dnb-loop.ogg', loop: true}).play();
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
69 |
70 |
71 |
--------------------------------------------------------------------------------
/examples/css/index.css:
--------------------------------------------------------------------------------
1 | @import "normalize.css";
2 | @import "sections.css";
3 | @import "player.css";
4 | @import "control.css";
5 |
--------------------------------------------------------------------------------
/examples/css/normalize.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
2 |
3 | html {
4 | -ms-text-size-adjust: 100%;
5 | -webkit-text-size-adjust: 100%;
6 | }
7 |
8 | article,
9 | aside,
10 | details,
11 | figcaption,
12 | figure,
13 | footer,
14 | header,
15 | hgroup,
16 | main,
17 | menu,
18 | nav,
19 | section,
20 | summary {
21 | display: block;
22 | }
23 |
24 | audio,
25 | canvas,
26 | progress,
27 | video {
28 | display: inline-block;
29 | vertical-align: baseline;
30 | }
31 |
32 | audio:not([controls]) {
33 | display: none;
34 | height: 0;
35 | }
36 |
37 | [hidden],
38 | template {
39 | display: none;
40 | }
41 |
42 | a {
43 | background-color: transparent;
44 | }
45 |
46 | a:active,
47 | a:hover {
48 | outline: 0;
49 | }
50 |
51 | abbr[title] {
52 | border-bottom: 1px dotted;
53 | }
54 |
55 | b,
56 | strong {
57 | font-weight: 700;
58 | }
59 |
60 | dfn {
61 | font-style: italic;
62 | }
63 |
64 | h1 {
65 | font-size: 2em;
66 | }
67 |
68 | mark {
69 | background: #ff0;
70 | color: #000;
71 | }
72 |
73 | small {
74 | font-size: 80%;
75 | }
76 |
77 | sub,
78 | sup {
79 | font-size: 75%;
80 | line-height: 0;
81 | position: relative;
82 | vertical-align: baseline;
83 | }
84 |
85 | sup {
86 | top: -.5em;
87 | }
88 |
89 | sub {
90 | bottom: -.25em;
91 | }
92 |
93 | img {
94 | border: 0;
95 | }
96 |
97 | svg:not(:root) {
98 | overflow: hidden;
99 | }
100 |
101 | hr {
102 | -moz-box-sizing: content-box;
103 | box-sizing: content-box;
104 | height: 0;
105 | }
106 |
107 | pre {
108 | overflow: auto;
109 | }
110 |
111 | code,
112 | kbd,
113 | pre,
114 | samp {
115 | font-family: monospace,monospace;
116 | font-size: 1em;
117 | }
118 |
119 | button,
120 | input,
121 | optgroup,
122 | select,
123 | textarea {
124 | color: inherit;
125 | font: inherit;
126 | margin: 0;
127 | }
128 |
129 | button {
130 | overflow: visible;
131 | }
132 |
133 | button,
134 | select {
135 | text-transform: none;
136 | }
137 |
138 | button,
139 | html input[type=button],
140 | input[type=reset],
141 | input[type=submit] {
142 | -webkit-appearance: button;
143 | cursor: pointer;
144 | }
145 |
146 | button[disabled],
147 | html input[disabled] {
148 | cursor: default;
149 | }
150 |
151 | button::-moz-focus-inner,
152 | input::-moz-focus-inner {
153 | border: 0;
154 | padding: 0;
155 | }
156 |
157 | input {
158 | line-height: normal;
159 | }
160 |
161 | input[type=checkbox],
162 | input[type=radio] {
163 | -moz-box-sizing: border-box;
164 | box-sizing: border-box;
165 | padding: 0;
166 | }
167 |
168 | input[type=number]::-webkit-inner-spin-button,
169 | input[type=number]::-webkit-outer-spin-button {
170 | height: auto;
171 | }
172 |
173 | input[type=search] {
174 | -webkit-appearance: textfield;
175 | -moz-box-sizing: content-box;
176 | box-sizing: content-box;
177 | }
178 |
179 | input[type=search]::-webkit-search-cancel-button,
180 | input[type=search]::-webkit-search-decoration {
181 | -webkit-appearance: none;
182 | }
183 |
184 | legend {
185 | border: 0;
186 | padding: 0;
187 | }
188 |
189 | textarea {
190 | overflow: auto;
191 | }
192 |
193 | optgroup {
194 | font-weight: 700;
195 | }
196 |
197 | table {
198 | border-collapse: collapse;
199 | border-spacing: 0;
200 | }
201 |
202 | td,
203 | th {
204 | padding: 0;
205 | }
206 |
207 |
208 |
209 | html {
210 | background: inherit;
211 | color: inherit;
212 | }
213 |
214 | a {
215 | color: #069;
216 | text-decoration: none;
217 | }
218 |
219 | a:active,
220 | a:focus,
221 | a:hover {
222 | color: #069;
223 | text-decoration: underline;
224 | }
225 |
226 | blockquote,
227 | dd,
228 | dl,
229 | figure,
230 | h1,
231 | h2,
232 | h3,
233 | h4,
234 | h5,
235 | h6,
236 | p,
237 | pre {
238 | margin: 0;
239 | }
240 |
241 | button {
242 | background: 0 0;
243 | border: 0;
244 | padding: 0;
245 | }
246 |
247 | button:focus {
248 | outline: dotted 1px;
249 | outline: -webkit-focus-ring-color auto 5px;
250 | }
251 |
252 | fieldset {
253 | border: 0;
254 | margin: 0;
255 | padding: 0;
256 | }
257 |
258 | iframe {
259 | border: 0;
260 | }
261 |
262 | ol,
263 | ul {
264 | list-style: none;
265 | margin: 0;
266 | padding: 0;
267 | }
268 |
269 | [tabindex="-1"]:focus {
270 | outline: 0!important;
271 | }
272 |
--------------------------------------------------------------------------------
/examples/css/player.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Player
3 | */
4 |
5 | :root {
6 | --player-height: 760px;
7 | --player-width: 760px;
8 | --radius: 180px;
9 | --diameter: calc(var(--radius) * 2);
10 | --margin: calc((var(--player-width) - var(--diameter)) / 2);
11 | }
12 |
13 | .Player {
14 | height: var(--player-height);
15 | width: var(--player-width);
16 | position: relative;
17 | margin: 0 auto;
18 | z-index: 1;
19 | }
20 |
21 | @media (--narrow) {
22 | .Player {
23 | height: calc(var(--player-height) * 0.6);
24 | width: calc(var(--player-width) * 0.6);
25 | transform: scale(0.6) translate(-40%, -40%);
26 | }
27 | }
28 |
29 | @media (--mobile) {
30 | .Player {
31 | height: calc(var(--player-height) * 0.4);
32 | width: calc(var(--player-width) * 0.4);
33 | transform: scale(0.4) translate(-80%, -80%);
34 | }
35 | }
36 |
37 | .Player-inner {
38 | border-radius: 50%;
39 | box-shadow: inset 1px 1px 8px #aaa;
40 | height: var(--diameter);
41 | position: relative;
42 | width: var(--diameter);
43 | top: var(--margin);
44 | left: var(--margin);
45 | }
46 |
47 | .Player-canvas {
48 | left: 0;
49 | position: absolute;
50 | top: 0;
51 | z-index: 0;
52 | }
53 |
54 | .Player-control {
55 | background: #fff;
56 | border-radius: 50%;
57 | height: calc(100% - 10px);
58 | left: 5px;
59 | position: absolute;
60 | top: 5px;
61 | width: calc(100% - 10px);
62 | z-index: 1;
63 | }
64 |
65 | .Player-play {
66 | width: 0;
67 | height: 0;
68 | border-top: 60px solid transparent;
69 | border-bottom: 60px solid transparent;
70 | border-left: 80px solid var(--color-main);
71 | position: absolute;
72 | left: 50%;
73 | top: 50%;
74 | transform: translate(-40%, -50%);
75 | }
76 |
77 | .Player-pause {
78 | border-left: 36px solid var(--color-main);
79 | border-right: 36px solid var(--color-main);
80 | display: none;
81 | height: 100px;
82 | left: 50%;
83 | position: absolute;
84 | top: 50%;
85 | transform: translate(-50%, -50%);
86 | width: 90px;
87 | }
88 |
89 | .Player.is-playing .Player-play {
90 | display: none;
91 | }
92 |
93 | .Player.is-playing .Player-pause {
94 | display: block;
95 | }
96 |
97 | .Player-mask {
98 | height: 100%;
99 | position: absolute;
100 | width: 50%;
101 | overflow: hidden;
102 | }
103 |
104 | .Player-maskA {
105 | left: 50%;
106 | }
107 |
108 | .Player-half {
109 | background-color: var(--color-dark);
110 | height: 100%;
111 | position: absolute;
112 | width: 100%;
113 | }
114 |
115 | .Player-halfA {
116 | border-radius: 100% / 50%;
117 | border-top-right-radius: 0;
118 | border-bottom-right-radius: 0;
119 | left: -100%;
120 | transform-origin: right center;
121 | transform: rotate(0deg);
122 | }
123 |
124 | .Player-halfB {
125 | border-radius: 100% / 50%;
126 | border-top-left-radius: 0;
127 | border-bottom-left-radius: 0;
128 | left: 100%;
129 | transform-origin: left center;
130 | transform: rotate(0deg);
131 | }
132 |
133 |
134 | /*
135 | * player top
136 | */
137 |
138 | .PlayerTop {
139 | background-color: #e7e9db;
140 | border-bottom: 1px solid white;
141 | display: flex;
142 | height: 60px;
143 | left: 0;
144 | position: fixed;
145 | top: 0;
146 | transform: translateY(-100%);
147 | transition: transform 0.3s ease-out;
148 | width: 100%;
149 | z-index: 2;
150 | }
151 |
152 | .PlayerTop.is-active {
153 | transform: translateY(0);
154 | }
155 |
156 | .PlayerTop-control {
157 | flex: none;
158 | height: 100%;
159 | position: relative;
160 | width: 80px;
161 | }
162 |
163 | .PlayerTop-canvas {
164 | width: 100%;
165 | height: 100%;
166 | }
167 |
168 | .PlayerTop-play {
169 | width: 0;
170 | height: 0;
171 | border-top: 20px solid transparent;
172 | border-bottom: 20px solid transparent;
173 | border-left: 30px solid var(--color-main);
174 | position: absolute;
175 | left: 50%;
176 | top: 50%;
177 | transform: translate(-40%, -50%);
178 | }
179 |
180 | .PlayerTop-pause {
181 | display: none;
182 | border-left: 12px solid var(--color-main);
183 | border-right: 12px solid var(--color-main);
184 | height: 36px;
185 | left: 50%;
186 | position: absolute;
187 | top: 50%;
188 | transform: translate(-50%, -50%);
189 | width: 30px;
190 | }
191 |
192 | .PlayerTop.is-playing .PlayerTop-play {
193 | display: none;
194 | }
195 |
196 | .PlayerTop.is-playing .PlayerTop-pause {
197 | display: block;
198 | }
199 |
--------------------------------------------------------------------------------
/examples/css/sections.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --color-main: #bbcccc;
3 | --color-dark: #aabbbb;
4 | }
5 |
6 | @custom-media --narrow (max-width: 760px);
7 | @custom-media --mobile (max-width: 400px);
8 |
9 | html {
10 | height: 100%;
11 | }
12 |
13 | body {
14 | background-color: #FFF;
15 | color: #000;
16 | font-family: Helvetica, sans-serif;
17 | font-size: 16px;
18 | height: 100%;
19 | letter-spacing: 0.05em;
20 | line-height: 1.5;
21 | margin: 0;
22 | width: 100%;
23 | }
24 |
25 | main {
26 | overflow-x: hidden;
27 | width: 100%;
28 | }
29 |
30 | h1,
31 | h2,
32 | h3 {
33 | color: #303030;
34 | font-weight: 400;
35 | margin: 0.5em 0;
36 | }
37 |
38 | h1 {
39 | font-size: 48px;
40 | line-height: 1;
41 | margin: 0.4em 0 0.2em;
42 | }
43 |
44 | h2 {
45 | font-size: 32px;
46 | }
47 |
48 | h3 {
49 |
50 | }
51 |
52 | header {
53 | text-align: center;
54 | width: 100%;
55 | margin: 40px 0 20px;
56 | }
57 |
58 | section {
59 |
60 | }
61 |
62 | pre {
63 | margin: 50px 0;
64 | width: 100%;
65 | }
66 |
67 | @media (--mobile) {
68 | pre {
69 | margin: 20px 0;
70 | }
71 | }
72 |
73 | code {
74 | border-radius: 8px;
75 | margin: 0 auto;
76 | max-width: 800px;
77 | min-width: 320px;
78 | width: 80%;
79 | }
80 |
81 | code ul {
82 | margin-left: 3.5em;
83 | }
84 |
85 | @media (--mobile) {
86 | code {
87 | font-size: 60%;
88 | }
89 | }
90 |
91 | nav {
92 | padding: 0 0 50px;
93 | text-align: center;
94 | }
95 |
96 | nav a {
97 | text-decoration: underline;
98 | font-size: 32px;
99 | }
100 |
101 | * {
102 | box-sizing: border-box;
103 | }
104 |
105 | .dg select {
106 | color: black;
107 | }
108 |
109 | header nav {
110 | padding: 5px;
111 | position: absolute;
112 | right: 0;
113 | top: 0;
114 | }
115 |
116 | header nav ul {
117 | display: flex;
118 | }
119 |
120 | header nav a {
121 | font-size: 20px;
122 | margin: 0 10px;
123 | }
124 |
125 | @media (--mobile) {
126 | header nav {
127 | width: 100%;
128 | }
129 |
130 | header nav ul {
131 | justify-content: center;
132 | }
133 | }
134 |
--------------------------------------------------------------------------------
/examples/distortion.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | sono - examples - distortion
9 |
10 |
11 |
12 |
13 |
14 |
15 |
18 |
19 |
25 |
26 |
27 | import sono from 'sono';
28 | import 'sono/effects';
29 |
30 | const sound = sono.create({
31 | url: 'hit.mp3',
32 | loop: true,
33 | effects: [sono.distortion({
34 | level: 0.5,
35 | dry: 1,
36 | wet: 1
37 | })]
38 | });
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
170 |
171 |
172 |
--------------------------------------------------------------------------------
/examples/echo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | sono - examples - echo
9 |
10 |
11 |
12 |
13 |
14 |
15 |
18 |
19 |
25 |
26 |
27 | import sono from 'sono';
28 | import 'sono/effects';
29 |
30 | const sound = sono.create({
31 | url: 'hit.mp3',
32 | loop: true,
33 | effects: [sono.echo({
34 | delay: 0.4,
35 | feedback: 0.6,
36 | dry: 1,
37 | wet: 1
38 | })]
39 | });
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
191 |
192 |
193 |
--------------------------------------------------------------------------------
/examples/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Stinkstudios/sono/50fbea6b51d7015496539b27b3e568d08faef0e8/examples/favicon.ico
--------------------------------------------------------------------------------
/examples/img/.gitinclude:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Stinkstudios/sono/50fbea6b51d7015496539b27b3e568d08faef0e8/examples/img/.gitinclude
--------------------------------------------------------------------------------
/examples/img/back.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Stinkstudios/sono/50fbea6b51d7015496539b27b3e568d08faef0e8/examples/img/back.png
--------------------------------------------------------------------------------
/examples/img/bottom.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Stinkstudios/sono/50fbea6b51d7015496539b27b3e568d08faef0e8/examples/img/bottom.png
--------------------------------------------------------------------------------
/examples/img/front.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Stinkstudios/sono/50fbea6b51d7015496539b27b3e568d08faef0e8/examples/img/front.png
--------------------------------------------------------------------------------
/examples/img/left.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Stinkstudios/sono/50fbea6b51d7015496539b27b3e568d08faef0e8/examples/img/left.png
--------------------------------------------------------------------------------
/examples/img/right.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Stinkstudios/sono/50fbea6b51d7015496539b27b3e568d08faef0e8/examples/img/right.png
--------------------------------------------------------------------------------
/examples/img/top.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Stinkstudios/sono/50fbea6b51d7015496539b27b3e568d08faef0e8/examples/img/top.png
--------------------------------------------------------------------------------
/examples/js/base-url.js:
--------------------------------------------------------------------------------
1 | window.isLocalHost = /^(?:https?:\/\/)?(?:localhost|192\.168)/.test(window.location.href);
2 | window.baseURL = window.isLocalHost ? '/examples/audio/' : 'https://ianmcgregor.co/prototypes/audio/';
3 |
--------------------------------------------------------------------------------
/examples/js/disable.js:
--------------------------------------------------------------------------------
1 | if (window.location.search.slice(1) === 'nowebaudio') {
2 | window.AudioContext = window.webkitAudioContext = undefined;
3 | }
4 |
--------------------------------------------------------------------------------
/examples/js/recorder.js:
--------------------------------------------------------------------------------
1 | /* eslint no-var: 0 */
2 | /* eslint strict: 0 */
3 |
4 | (function() {
5 |
6 | var sono = window.sono;
7 | var ui = window.ui;
8 |
9 | sono.log();
10 |
11 | var player,
12 | sound,
13 | recorder,
14 | analyser,
15 | canvas = document.querySelector('[data-waveform]'),
16 | context = canvas.getContext('2d');
17 |
18 | function onConnect(stream) {
19 | sound = sono.create(stream);
20 | recorder = sono.utils.recorder(false);
21 | analyser = sound.effects.add(sono.analyser({fftSize: 1024}));
22 | analyser.maxDecibels = -60;
23 | recorder.start(sound);
24 | update();
25 | }
26 |
27 | var mic = sono.utils.microphone(onConnect);
28 |
29 | if (!mic.isSupported) {
30 | document.querySelector('[data-warning]')
31 | .classList.add('is-visible');
32 | }
33 |
34 | function toggle() {
35 | if (recorder && recorder.isRecording) {
36 | var recording = recorder.stop();
37 | console.log(recording);
38 | createPlayer(recording);
39 | mic.disconnect();
40 | } else {
41 | if (mic.stream) {
42 | // recorder.start(sound);
43 | } else {
44 | mic.connect();
45 | }
46 | if (player) {
47 | player.destroy();
48 | player.el.classList.remove('is-active');
49 | }
50 | }
51 | }
52 |
53 | var control = ui.createToggle({
54 | el: document.querySelector('[data-mic-toggle]'),
55 | name: 'Record',
56 | value: false
57 | }, function() {
58 | toggle();
59 | });
60 |
61 | function createPlayer(buffer) {
62 | console.log('createPlayer');
63 | player = ui.createPlayer({
64 | el: document.querySelector('[data-player-top]'),
65 | sound: sono.create(buffer)
66 | .play()
67 | });
68 | player.el.classList.add('is-active');
69 | }
70 |
71 | function update() {
72 | window.requestAnimationFrame(update);
73 |
74 | if (player) {
75 | player();
76 | }
77 |
78 | control.setLabel(recorder.getDuration()
79 | .toFixed(1));
80 |
81 | var width = canvas.width,
82 | height = canvas.height,
83 | frequencyBinCount = analyser.frequencyBinCount,
84 | barWidth = Math.max(1, Math.round(width / frequencyBinCount)),
85 | magnitude,
86 | percent,
87 | hue;
88 |
89 | context.fillStyle = '#ffffff';
90 | context.fillRect(0, 0, width, height);
91 |
92 | var waveData = analyser.getFrequencies();
93 | var freqData = analyser.getWaveform();
94 |
95 | for (var i = 0; i < frequencyBinCount; i++) {
96 | magnitude = freqData[i];
97 | percent = magnitude / 256;
98 | hue = i / frequencyBinCount * 360;
99 | context.fillStyle = 'hsl(' + hue + ', 100%, 30%)';
100 | context.fillRect(barWidth * i, height, barWidth, 0 - height * percent);
101 |
102 | magnitude = waveData[i];
103 | percent = magnitude / 512;
104 | hue = i / frequencyBinCount * 360;
105 | context.fillStyle = 'hsl(' + hue + ', 100%, 50%)';
106 | context.fillRect(barWidth * i, height - height * percent - 1, 2, 2);
107 | }
108 | }
109 |
110 | }());
111 |
--------------------------------------------------------------------------------
/examples/multi-play.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | sono - examples - multiPlay
9 |
10 |
11 |
12 |
13 |
14 |
15 |
18 |
19 |
23 |
24 |
25 |
26 |
27 |
28 | sono.create({
29 | id: 'sound',
30 | url: 'hit.ogg',
31 | multiPlay: true
32 | });
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
91 |
92 |
93 |
94 |
95 |
96 |
--------------------------------------------------------------------------------
/examples/oscillator.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | sono - examples - oscillator
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | const sineWave = sono.create('sine');
28 | sineWave.frequency = 100;
29 | sineWave.volume = 0.1;
30 | sineWave.play();
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
141 |
142 |
143 |
144 |
145 |
146 |
--------------------------------------------------------------------------------
/examples/pixi.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | sono - examples - PixiJS / Multi play
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
20 |
21 |
22 |
Arrow keys to move around, space to shoot.
23 |
29 |
30 | import sono from 'sono';
31 | import {loaders} from 'pixi.js';
32 |
33 | const ext = sono.canPlay.ogg ? 'ogg' : 'mp3';
34 |
35 | if (sono.hasWebAudio) {
36 | const {Resource} = loaders;
37 | Resource.setExtensionLoadType(ext, Resource.LOAD_TYPE.XHR);
38 | Resource.setExtensionXhrType(ext, Resource.XHR_RESPONSE_TYPE.BUFFER);
39 | }
40 |
41 | const sounds = [{
42 | name: 'music',
43 | url: `audio/space-shooter.${ext}`,
44 | loop: true,
45 | volume: 0.8
46 | }, {
47 | name: 'shoot',
48 | url: `audio/shoot3.${ext}`,
49 | volume: 0.4
50 | }, {
51 | name: 'explode',
52 | url: `audio/explode2.${ext}`,
53 | volume: 0.9
54 | }];
55 |
56 | const loader = new loaders.Loader();
57 |
58 | loader.add(sounds);
59 |
60 | loader.onComplete.once(() => {
61 | sounds.forEach(sound => {
62 | const src = loader.resources[sound.name].data;
63 | const config = Object.assign({}, sound, {src});
64 | sono.create(config);
65 | });
66 |
67 | sono.get('shoot').effects.add(reverb();
68 | sono.play('music');
69 | });
70 |
71 | loader.load();
72 |
73 |
74 |
75 |
76 |
Microphone access is not supported in this browser
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
37 |
38 |
39 | var passThrough = true,
40 | sound,
41 | recorder;
42 | var onConnect = function(stream) {
43 | // the sound coming through the micophone
44 | sound = sono.create(stream);
45 | // start recorder
46 | recorder = sono.utils.recorder(passThrough);
47 | recorder.start(sound);
48 |
49 | setTimeout(function() {
50 | // recorder returns recorded sound when stopped
51 | var recording = recorder.stop();
52 | // create a new sound object from the recording
53 | sono.create(recording).play();
54 | }, 2000);
55 | };
56 | // propmt user to connect their mic
57 | sono.utils.microphone(onConnect);
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
--------------------------------------------------------------------------------
/examples/three.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | sono - examples - 3d
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
21 |
22 |
23 |
24 |
Use the arrow keys to move around.
25 |
26 |
31 | import sono from 'sono';
32 | import 'sono/effects';
33 |
34 | const sound = sono.create({
35 | url: 'pulsar.mp3',
36 | loop: true,
37 | effects: [
38 | sono.panner({
39 | maxDistance: 1000
40 | })
41 | ]
42 | });
43 | const mesh = new THREE.Mesh(geometry, material);
44 | // set source position to the position vector of sound source
45 | sound.effects[0].setPosition(mesh.position);
46 |
47 | function update() {
48 | window.requestAnimationFrame(update);
49 | // set listener position to the position vector of the camera
50 | sono.panner.setListenerPosition(camera.position);
51 | // set listener orientation to the forward vector of the camera
52 | const forward = new THREE.Vector3(0, 0, -1);
53 | forward.applyQuaternion(camera.quaternion);
54 | sono.panner.setListenerOrientation(forward.normalize());
55 | }
56 | update();
57 |
58 |
59 |
60 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
22 |
23 |
24 |
25 |
26 |
27 |