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
81
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.9k
アウトプットの始め方/start output 20230121
ariaki
0
290
web-secure-phpcon2020
ariaki
3
3.4k
オブジェクトライフサイクルとメモリ管理を学ぼう / OOC 2020
ariaki
8
3.6k
エンジニアはアウトプットによって成長できるのか? / Grow with your output
ariaki
24
6.4k
アウトプットを始めよう / How to begin output jawsug-bgnr
ariaki
2
3.8k
参加者の安全を守れていますか? / Protecting community safety
ariaki
1
6.9k
タピオカに学ぶ二段階認証 / tapioca-mfa
ariaki
5
1.3k
古に学ぶ個人開発のススメ / My recommendation of personal development
ariaki
1
1.5k
Other Decks in Technology
See All in Technology
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
kazeburo
1
300
CDK Toolkit Libraryにおけるテストの考え方
smt7174
0
120
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
140
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
事例で学ぶ!B2B SaaSにおけるSREの実践例/SRE for B2B SaaS: A Real-World Case Study
bitkey
1
160
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
300
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
260
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
180
QuickSight SPICE の効果的な運用戦略~S3 + Athena 構成での実践ノウハウ~/quicksight-spice-s3-athena-best-practices
emiki
0
120
Operating Operator
shhnjk
1
620
LLM時代の検索
shibuiwilliam
2
430
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
470
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Speed Design
sergeychernyshev
32
1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Site-Speed That Sticks
csswizardry
10
690
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Visualization
eitanlees
146
16k
Agile that works and the tools we love
rasmusluckow
329
21k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
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 !