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.4k
Other Decks in Technology
See All in Technology
地図も、未来も、オープンに。 〜OSGeo.JPとFOSS4Gのご紹介〜
wata909
0
110
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
240
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
260
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
250
Github Copilot エージェントモードで試してみた
ochtum
0
100
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
160
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
lamodatech
0
330
【TiDB GAME DAY 2025】Shadowverse: Worlds Beyond にみる TiDB 活用術
cygames
0
1k
AIの最新技術&テーマをつまんで紹介&フリートークするシリーズ #1 量子機械学習の入門
tkhresk
0
130
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
3
1.7k
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
2
200
実践! AIエージェント導入記
1mono2prod
0
160
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Done Done
chrislema
184
16k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Building Applications with DynamoDB
mza
95
6.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Producing Creativity
orderedlist
PRO
346
40k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
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 !