Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Playing with WebAudio
Search
Akira Morikawa
April 23, 2018
Technology
0
79
Playing with WebAudio
ブラウザJavascriptを使って簡単な作曲環境を作りました
Akira Morikawa
April 23, 2018
Tweet
Share
More Decks by Akira Morikawa
See All by Akira Morikawa
コロナ禍だからこそ考えるオフラインコミュニティの意義 / significance of community
ariaki
0
1.8k
アウトプットの始め方/start output 20230121
ariaki
0
260
web-secure-phpcon2020
ariaki
3
3.3k
オブジェクトライフサイクルとメモリ管理を学ぼう / OOC 2020
ariaki
8
3.5k
エンジニアはアウトプットによって成長できるのか? / Grow with your output
ariaki
24
6.3k
アウトプットを始めよう / How to begin output jawsug-bgnr
ariaki
2
3.7k
参加者の安全を守れていますか? / Protecting community safety
ariaki
1
6.7k
タピオカに学ぶ二段階認証 / tapioca-mfa
ariaki
5
1.2k
古に学ぶ個人開発のススメ / My recommendation of personal development
ariaki
1
1.4k
Other Decks in Technology
See All in Technology
事業を差別化する技術を生み出す技術
pyama86
2
500
Cracking the Coding Interview 6th Edition
gdplabs
14
28k
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
530
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
19k
30→150人のエンジニア組織拡大に伴うアジャイル文化を醸成する役割と取り組みの変化
nagata03
0
330
Global Databaseで実現するマルチリージョン自動切替とBlue/Greenデプロイ
j2yano
0
160
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
540
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
9
2.6k
手を動かしてレベルアップしよう!
maruto
0
250
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
210
EDRの検知の仕組みと検知回避について
chayakonanaika
12
5.3k
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
800
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Faster Mobile Websites
deanohume
306
31k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
The Language of Interfaces
destraynor
156
24k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
Thoughts on Productivity
jonyablonski
69
4.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
GitHub's CSS Performance
jonrohan
1030
460k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Documentation Writing (for coders)
carmenintech
68
4.6k
Adopting Sorbet at Scale
ufuk
75
9.2k
Transcript
WebAudioで遊んでみた 2018. 04. 27 ariaki // ブラウザ Javascript が面白い件
WebAudio 知ってる人いる?
What’s WebAudio HTML5 Multimedia Audio Video
AudioContext AudioContext MediaElement MediaStream Source Destination Oscillator
Oscillator を使って 遊んでみよう
Purpose 着メロ的なやつを鳴らしてみよう ① とりあえず音を出す ② 音階を変える ③ 音の長さや速度を変える ④ メロディを作れる
⑤ 時間の都合上、単音でやる ⑥ なんか面白い感じにする
Playing with OscillatorNode var audioContext = new AudioContext(); var masterGain
= audioContext.createGain(); //Gain: 音量 var oscillator = audioContext.createOscillator(); //Oscillator: 波形生成 oscillator.connect(masterGain); masterGain.connect(audioContext.destination); oscillator.start(audioContext.currentTime); #1 初期化する
Playing with OscillatorNode AudioContext Oscillator Gain (connect) (connect) Destination (create)
Playing with OscillatorNode masterGain.gain.value = 1.0; //ボリューム: 0.0~1.0 oscillator.frequency.value =
440; //音階(Hz): 0~1000 oscillator.type = ‘sawtooth’; //波形種類: sine | square | sawtooth | triangle | custom oscillator.start(); #2 音を出してみる frequency=440 → A音:音階を変えるには? 440 * Math.pow(2, n/12);
Playing with OscillatorNode #3 曲を作って再生してみた - 音階を設定して音を鳴らす - setTimeout()で指定時間待ってから次の音出す -
音を止める時はgain=0にすればいいよね - 鳴らす音のリストは配列作ってループさせよう
Playing with OscillatorNode var scores = [{note:60, size:1}, {note:62, size:1},
...]; var sound = scores.shift(); scores.length > 0 play( sound ); Fin
https://ariaki.info/webaudio Demonstration
WebAudio 他にもいろんな機能があるよ
Other Nodes Node Description BiquadFilter バンドパス / バンドシェル ... (Equalizer,
Phaser, Wah, ...) ChannelSplitter / ChannelMerge チャンネルを分割・結合する Compressor 音量をそろえる Convolver 空間反響させる(Reverb) Delay 音を遅延させる(Chorus, Flanger, ...) Gain 音量を変化させる(Tremolo) Panner 音の位置を変える WaveShaper 音を歪ませる(Distortion, Overdrive, Fuzz, ...)
Other Nodes Node Description Analyzer 信号のスペクトラム情報を取得する ScriptProcessor 生の音声バッファ(バイナリ)を取得する
Other Nodes まとめ - 音源はたくさん(マイク・ファイル・オシレータから生成) - 多彩なエフェクタを使って加工できる - アナライザを使ってスペクトル可視化できる -
編集結果を出力/保存できる
これからは JS で作曲する時代 # 昔CALで書いてた人
Thank You For Your Attention !