<commit_before># JavaScriptとWeb Audio事始め

----

# アジェンダ


- ウェブで音を扱う方法
- HTML Audio要素
	- Audio要素の制限
- Web Audio API


-----


# HTML Audio要素

- `<audio src="music.mp3" autoplay />` 
- Audio要素で音声ファイルを指定再生できる
- Img要素、Video要素の音声版
- 指定するだけなので簡単

-----

# Audio要素のいいところ

- 大体のブラウザがサポートしてる

[![Audio Element](http://monosnap.com/image/j9MzKXxcRl7QUVbSdW2kI7PIPKgJJE.png)](http://caniuse.com/#feat=audio)

------


# Audio要素の問題

- iOSやAndroidで制限がある
- ユーザーインタラクションで開始しないと再生できない
- 同時に再生できる音声が1つとなる制限

----

# Audio要素の問題 - ユーザインタラクション

```js
var audio = new Audio('sound.mp3');
// クリックしたら、再生
document.body.addEventListner('click', function (event) {
    event.preventDefault();
    // 再生開始
    audio.play();
});
```

-----

# Audio要素の問題 - 同時再生数が1つ

- 複数の音を同時に扱えない
- オーディオスプライトという回避策がある
	- 複数の音源を一つにまとめて、再生位置をずらして扱う
	- [JavaScript - スマホで音声再生をスムーズに行うためにオーディオスプライトを作成/使用する - Qiita](http://qiita.com/nakajmg/items/7be91626113bfc10846a "JavaScript - スマホで音声再生をスムーズに行うためにオーディオスプライトを作成/使用する - Qiita")
- Web Audio APIならこの制限はない

-----

# Web Audio API

-----

# Web Audio API

- Audioを扱うAPI
- AudioNodeやAudioParamを組み合わせて音を加工できる
- 複数の音を同時に鳴らせる
- [正確なスケジューリング](http://www.html5rocks.com/ja/tutorials/audio/scheduling/ "正確なスケジューリング")が可能(どのタイミングで音を鳴らすか)

-----

# Web Audio API - サポートブラウザ

[![audio-api](http://monosnap.com/image/zjS9ZVTmqTyfmYWoRJ26jKxp1x7veL.png)](http://caniuse.com/#feat=audio-api)

-----

# Web Audio API - サポートブラウザ

- IEやAndroidなどでサポートされてない
- Flashを使ってシミュレート、フェールバックとしてAudio要素を使うものが存在する
- [g200kg/WAAPISim](https://github.com/g200kg/WAAPISim "g200kg/WAAPISim")
- [CreateJS/SoundJS](https://github.com/CreateJS/SoundJS "CreateJS/SoundJS")
- [sebpiq/node-web-audio-api](https://github.com/sebpiq/node-web-audio-api "sebpiq/node-web-audio-api")

-----

# Web Audio API - コード

```js
// Nodeなどを管理する`context`
var context = new AudioContext();
// Nodeを作ってconnectしていく
var sourceNode = context.createBufferSource();
sourceNode.buffer = audioBuffer;// 音源データはBuffer
var gainNode = context.createGain();
sourceNode.connect(gainNode);
gainNode.connect(context.destination);
source.start(0, 0);// 0秒後にoffset0で再生開始
```

-----


# [AudioNode](https://developer.mozilla.org/ja/docs/Web/API/AudioNode "AudioNode")をつなぐ

![audio node](img/audio-node.png)<commit_msg>add link modern.ie<commit_after># JavaScriptとWeb Audio事始め

----

# アジェンダ


- ウェブで音を扱う方法
- HTML Audio要素
	- Audio要素の制限
- Web Audio API


-----


# HTML Audio要素

- `<audio src="music.mp3" autoplay />` 
- Audio要素で音声ファイルを指定再生できる
- Img要素、Video要素の音声版
- 指定するだけなので簡単

-----

# Audio要素のいいところ

- 大体のブラウザがサポートしてる

[![Audio Element](http://monosnap.com/image/j9MzKXxcRl7QUVbSdW2kI7PIPKgJJE.png)](http://caniuse.com/#feat=audio)

------


# Audio要素の問題

- iOSやAndroidで制限がある
- ユーザーインタラクションで開始しないと再生できない
- 同時に再生できる音声が1つとなる制限

----

# Audio要素の問題 - ユーザインタラクション

```js
var audio = new Audio('sound.mp3');
// クリックしたら、再生
document.body.addEventListner('click', function (event) {
    event.preventDefault();
    // 再生開始
    audio.play();
});
```

-----

# Audio要素の問題 - 同時再生数が1つ

- 複数の音を同時に扱えない
- オーディオスプライトという回避策がある
	- 複数の音源を一つにまとめて、再生位置をずらして扱う
	- [JavaScript - スマホで音声再生をスムーズに行うためにオーディオスプライトを作成/使用する - Qiita](http://qiita.com/nakajmg/items/7be91626113bfc10846a "JavaScript - スマホで音声再生をスムーズに行うためにオーディオスプライトを作成/使用する - Qiita")
- Web Audio APIならこの制限はない

-----

# Web Audio API

-----

# Web Audio API

- Audioを扱うAPI
- AudioNodeやAudioParamを組み合わせて音を加工できる
- 複数の音を同時に鳴らせる
- [正確なスケジューリング](http://www.html5rocks.com/ja/tutorials/audio/scheduling/ "正確なスケジューリング")が可能(どのタイミングで音を鳴らすか)

-----

# Web Audio API - サポートブラウザ

[![audio-api](http://monosnap.com/image/zjS9ZVTmqTyfmYWoRJ26jKxp1x7veL.png)](http://caniuse.com/#feat=audio-api)

-----

# Web Audio API - サポートブラウザ

- IEやAndroidなどでサポートされてない([次期IEには載る](https://status.modern.ie/webaudioapi?term=audio%20api))
- Flashを使ってシミュレート、フェールバックとしてAudio要素を使うものが存在する
- [g200kg/WAAPISim](https://github.com/g200kg/WAAPISim "g200kg/WAAPISim")
- [CreateJS/SoundJS](https://github.com/CreateJS/SoundJS "CreateJS/SoundJS")
- [sebpiq/node-web-audio-api](https://github.com/sebpiq/node-web-audio-api "sebpiq/node-web-audio-api")

-----

# Web Audio API - コード

```js
// Nodeなどを管理する`context`
var context = new AudioContext();
// Nodeを作ってconnectしていく
var sourceNode = context.createBufferSource();
sourceNode.buffer = audioBuffer;// 音源データはBuffer
var gainNode = context.createGain();
sourceNode.connect(gainNode);
gainNode.connect(context.destination);
source.start(0, 0);// 0秒後にoffset0で再生開始
```

-----


# [AudioNode](https://developer.mozilla.org/ja/docs/Web/API/AudioNode "AudioNode")をつなぐ

![audio node](img/audio-node.png)
{'fraction_non_alphanumeric': 0.16264796142042964, 'fraction_numerical': 0.01841297676457694, 'mean_word_length': 4.109742441209407, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 9, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6311302', 'n_tokens_mistral': 2542, 'n_tokens_neox': 2439, 'n_words': 225}