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
技術スタックだけじゃない、業務ドメイン知識のオンボーディングも同じくらいの量が必要な話
niftycorp
PRO
0
100
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
260
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
8
3.5k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
18k
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
130
Two Blades, One Journey: Engineering While Managing
ohbarye
4
1.9k
実は強い 非ViTな画像認識モデル
tattaka
2
1.2k
スキルだけでは満たせない、 “組織全体に”なじむオンボーディング/Onboarding that fits “throughout the organization” and cannot be satisfied by skills alone
bitkey
0
170
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
10
3.7k
Amazon Aurora のバージョンアップ手法について
smt7174
2
140
Goで作って学ぶWebSocket
ryuichi1208
3
2.7k
AIエージェント入門
minorun365
PRO
31
17k
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1368
200k
Docker and Python
trallard
44
3.3k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
The Invisible Side of Design
smashingmag
299
50k
Optimizing for Happiness
mojombo
376
70k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Building Applications with DynamoDB
mza
93
6.2k
Writing Fast Ruby
sferik
628
61k
Thoughts on Productivity
jonyablonski
69
4.5k
Agile that works and the tools we love
rasmusluckow
328
21k
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 !