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
76
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.5k
アウトプットの始め方/start output 20230121
ariaki
0
190
web-secure-phpcon2020
ariaki
3
3k
オブジェクトライフサイクルとメモリ管理を学ぼう / OOC 2020
ariaki
8
3.1k
エンジニアはアウトプットによって成長できるのか? / Grow with your output
ariaki
24
5.9k
アウトプットを始めよう / How to begin output jawsug-bgnr
ariaki
2
3.3k
参加者の安全を守れていますか? / Protecting community safety
ariaki
1
5.9k
タピオカに学ぶ二段階認証 / tapioca-mfa
ariaki
5
1.1k
古に学ぶ個人開発のススメ / My recommendation of personal development
ariaki
1
1.2k
Other Decks in Technology
See All in Technology
TiDBにおけるテーブル設計と最適化の事例
cygames
0
240
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
15
35k
ルーターでプレゼンする
puhitaku
1
3.4k
DevRelによる信頼構築とデータ駆動で変わるエンジニア採用 / DevRel Trust Building to Data Driven Engineering Hiring
bobtani
1
100
しくじり先生、PharmaXのLLMアプリケーション開発の失敗を語る
pharma_x_tech
0
140
成長をサポートするピープルマネジメントのやり方
sioncojp
9
1.4k
IaCジェネレーターとBedrockで詳細設計書を生成してみた
tsukasa_ishimaru
4
950
中年男性がメインフレームから クラウドへキャリアシフトしてみた
uechishingo
1
430
個人的、Kubernetes の最新注目機能! (2024年5月版) / TechFeed Experts Night#28 〜 コンテナ技術最前線
pfn
PRO
1
140
require(ESM)とECMAScript仕様
uhyo
4
1k
Cypress or Playwright?
rainerhahnekamp
0
180
CockroachDB はどのくらい「しぶとい」のか? / How tough is CockroachDB?
kota2and3kan
6
3.9k
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.4k
Navigating Team Friction
lara
179
13k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
The Invisible Customer
myddelton
114
12k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Product Roadmaps are Hard
iamctodd
45
9.8k
Infographics Made Easy
chrislema
238
18k
Practical Orchestrator
shlominoach
183
9.7k
Adopting Sorbet at Scale
ufuk
69
8.6k
Into the Great Unknown - MozCon
thekraken
15
1k
A Modern Web Designer's Workflow
chriscoyier
689
190k
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 !