Speaker Deck
Speaker Deck Pro
Sign in
Sign up
for free
WebAudioと音の話
kalibora
July 28, 2015
Programming
0
370
WebAudioと音の話
WebAudioの初歩の初歩
kalibora
July 28, 2015
Tweet
Share
More Decks by kalibora
See All by kalibora
kalibora
0
1.4k
Other Decks in Programming
See All in Programming
yaamaa
0
400
akatsukinewgrad
0
130
sullis
0
110
mizdra
7
4.8k
kubode
0
170
yshrsmz
1
440
aratayokoyama
0
190
hanakla
2
3k
itosho525
0
130
makicamel
1
160
thatjeffsmith
0
310
siketyan
1
110
Featured
See All Featured
thoeni
4
550
lauravandoore
437
28k
smashingmag
283
47k
gr2m
83
11k
jasonvnalue
82
8k
jonyablonski
14
1.1k
productmarketing
5
640
deanohume
295
27k
shlominoach
176
7.4k
kneath
294
39k
brianwarren
83
4.7k
edds
56
9.3k
Transcript
8FC"VEJPͱԻͷ
8FC"VEJPͬͯ ͬͯ·͔͢ʁ
8FC"VEJPͱʁ w 8FC"VEJP"1*8$ʹΑͬͯ։ൃ͞Ε͍ͯ ΔɺΣϒΞϓϦέʔγϣϯ༻ͷԻॲཧͱԻ ߹ͷͨΊͷߴϨϕϧ+BWB4DSJQU"1* w ओཁͳઃܭύϥμΠϜɺ"VEJP/PEFΦϒδΣ ΫτΛͭͳ͗ɺԻϧʔτάϥϑΛ࡞Δܗɻ࣮ ࡍͷॲཧɺओʹΣϒϒϥβͷ࣮Ͱߦ ΘΕΔ͕ɺ+BWB4DSJQUͰॲཧͯ͠߹͢Δ
͜ͱՄೳ
None
+BWB4DSJQUͰʂ ϒϥβ্Ͱʂ Ի͕ग़ͤΔʂ
Ͱ୯७ʹ XBWͱ͔NQͱ͔Λ ࠶ੜ͢ΔΘ͚͡Όͳ͍Α
ԻΛ߹ͨ͠Γͯ͠ ͲΜͳԻͰग़ͤΔΑ ʢཧ্ʣ
·ͣԻΛग़ͯ͠ΈΑ͏ var ctx = new AudioContext(); var osc =
ctx.createOscillator(); osc.connect(ctx.destination); osc.start(0); osc.stop(ctx.currentTime + 0.5); IUUQTHJTUHJUIVCDPNLBMJCPSBDGCEBFCB
Ͳ͏Ͱ͔͢ʁʂ Ի͕Ͱ·͔ͨ͠ʁ
DUY"VEJP$POUFYU ίʔυΛղઆ PTD var ctx = new AudioContext(); var
osc = ctx.createOscillator(); osc.connect(ctx.destination); osc.start(0); osc.stop(ctx.currentTime + 0.5); EFTUJOBUJPO DPOOFDU TUBSU TUPQ ԻΛग़͢ ஔ εϐʔΧʔ ͷΑ͏ͳ ͷ
ͱ͜ΖͰɺԻۭͬͯؾ தΛΘΔͰ͢ΑͶʁ
͖ͬ͞ग़ͨ͠Իͬͯ ͲΜͳͷܗʢܗʣ Λ͍ͯ͠Δͱࢥ͍·͔͢ʁ
͜ΜͳܗΛ͍ͯ͠·͢
͜ͷܗΛ ਖ਼ݭʢTJOFʣ ͱݴ͍·͢
දతͳܗҰཡ TRVBSFʢۣܗʣ TJOFʢਖ਼ݭʣ USJBOHMFʢࡾ֯ʣ TBXUPPUIʢڒࣃঢ়ʣ
ͲΕ໊લ௨ΓͷܗΛ ͍ͯ͠·͢
࣮ࡍʹͦΕͧΕͷ ܗΛ໐Βͯ͠ΈΑ͏
var ctx = new AudioContext(); var osc = ctx.createOscillator();
var types = ['sine', 'square', 'triangle', 'sawtooth']; var typeIdx = 0; var timerId = setInterval(function () { if (typeIdx >= types.length) { clearInterval(timerId); return; } console.log(types[typeIdx]); osc.type = types[typeIdx]; // set waveform here if (typeIdx === 0) { osc.start(0); osc.stop(ctx.currentTime + types.length * 1); } typeIdx++; }, 1000); osc.connect(ctx.destination); IUUQTHJTUHJUIVCDPNLBMJCPSBCGCDBBEGBBG
ؙ͍ܗؙ͍Ի ΪβΪβͷܗΪβΪβͨ͠Ի ʹฉ͑͜·ͤΜ͔ʁ
ͱ͍͏Θ͚Ͱɺ
Ի৭ͷܗʢܗʣ Ͱܾ·Γ·͢
ͱ͜ΖͰɺ
Իͱ͍͏ͷͷཁૉ Ի৭͚ͩͰ͋Γ·ͤΜ
Իͷཁૉ w Ի৭ʢUJNCSF UPOFʣ w େ͖͞ʢMPVEOFTTʣ w ߴ͞ʢQJUDIʣ
Ͱେ͖͞ͱߴ͞Կ Ͱܾ·ΔͷͰ͠ΐ͏͔ʁ
ج४ͱͳΔԻ
େ͖͍Ի ৼ෯
ߴ͍Ի प
Ͱɺ पΛมߋͯ͠ Իͷߴ͞Λมߋͯ͠Έ·͢
var ctx = new AudioContext(); var osc = ctx.createOscillator();
var freqs = [261.63, 293.67, 329.63, 349.23, 392.00, 440.00, 493.88, 523.23]; var freqIdx = 0; var timerId = setInterval(function () { if (freqIdx >= freqs.length) { clearInterval(timerId); return; } console.log(freqs[freqIdx]); osc.frequency.value = freqs[freqIdx]; // set frequency if (freqIdx === 0) { osc.start(0); osc.stop(ctx.currentTime + freqs.length * 1); } freqIdx++; }, 1000); osc.connect(ctx.destination); IUUQTHJTUHJUIVCDPNLBMJCPSBDEGC
࣍ʹɺ ৼ෯Λίϯτϩʔϧͯ͠ɺ Իͷେ͖͞Λมߋͯ͠Έ·͢
var ctx = new AudioContext(); var osc = ctx.createOscillator();
var gain = ctx.createGain(); var levels = [1.0, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1]; var levelIdx = 0; var timerId = setInterval(function () { if (levelIdx >= levels.length) { clearInterval(timerId); return; } console.log(levels[levelIdx]); gain.gain.value = levels[levelIdx]; // set gain if (levelIdx === 0) { osc.start(0); osc.stop(ctx.currentTime + levels.length * 0.5); } levelIdx++; }, 500); osc.connect(gain); gain.connect(ctx.destination); IUUQTHJTUHJUIVCDPNLBMJCPSBGCFGGBCB
DUY"VEJP$POUFYU ίʔυΛղઆ PTD var ctx = new AudioContext(); var
osc = ctx.createOscillator(); var gain = ctx.createGain(); (snip) gain.gain.value = levels[levelIdx]; // set gain (snip) osc.connect(gain); gain.connect(ctx.destination); EFTUJOBUJPO DPOOFDU HBJO DPOOFDU ϘϦϡʔϜ ϑΣʔμʔΈ ͍ͨͳͷ
DUY"VEJP$POUFYU ιʔεϊʔυ " σεςΟωʔ γϣϯϊʔυ ϊʔυ " ϊʔυ # ιʔεϊʔυ
# ϊʔυ $ ੨͍࢛֯ϊʔυͱ ݺΕΔͷͰ ͦΕΒΛෳΈ߹Θͤͯ ͍ΖΜͳԻ͕࡞ΕΔΈ͍ͨͰ͢
͓͠·͍
TJOFΛ߹͍ͯ͠Ζ Μͳܗ͕࡞ΕΔ https://www.google.co.jp/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=sin(x) %2Bsin(2x)*(1%2F2)%2Bsin(3x)*(1%2F3)%2Bsin(4x)*(1%2F4)%2Bsin(5x)*(1%2F5)%2Bsin(6x)*(1%2F6)%2Bsin(7x)*(1%2F7) https://www.google.co.jp/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=sin(x) %2Bsin(3x)*(1%2F3)%2Bsin(5x)*(1%2F5)%2Bsin(7x)*(1%2F7)%2Bsin(9x)*(1%2F9)%2Bsin(11x)*(1%2F11)