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
Web Audio API でお手軽10バンドイコライザー
Search
hiro-tan
September 08, 2016
Technology
1
640
Web Audio API でお手軽10バンドイコライザー
WebAudio.tokyo #1 で発表した資料です。
hiro-tan
September 08, 2016
Tweet
Share
More Decks by hiro-tan
See All by hiro-tan
party-night-with-webaudio-api
hirotan
0
250
Getting Started Web Audio API
hirotan
0
170
音色と波形の話
hirotan
0
180
chiptune by web audio api
hirotan
0
150
Other Decks in Technology
See All in Technology
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
210
rubygem開発で鍛える設計力
joker1007
2
200
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
260
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
120
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
180
BigQuery Remote FunctionでLooker Studioをインタラクティブ化
cuebic9bic
3
290
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
440
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
3
1.7k
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
29
11k
OpenHands🤲にContributeしてみた
kotauchisunsun
1
430
Github Copilot エージェントモードで試してみた
ochtum
0
100
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
170
Featured
See All Featured
The Invisible Side of Design
smashingmag
299
51k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Side Projects
sachag
455
42k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Writing Fast Ruby
sferik
628
61k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Designing Experiences People Love
moore
142
24k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
GitHub's CSS Performance
jonrohan
1031
460k
Optimizing for Happiness
mojombo
379
70k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Documentation Writing (for coders)
carmenintech
72
4.9k
Transcript
Web Audio API で お手軽10 バンドイコライザー 廣田 洋平 @DRECOM
We are hiring!
Join us! #6 @DRECOM 10/13(thu)
自己紹介 廣田 洋平 (Yohei Hirota) ドリコム16 新卒入社 「 ちょこっとファー ム」
サー バー サイド Web Audio API 歴3 ヶ月とちょっと 作ったもの https://hiro-tan.github.io/
アジェンダ Web Audio API でイコライザー を作る イコライザー とは? Web Audio
API で音声ファイルを読み込む 音声にフィルタをかける Web Audio API におけるのノー ドの概念 webaudio-controls を使ってみる
イコライザー とは? 音声信号の周波数特性を変更する音響機器 wikipedia「 イコライザー ( 音響機器)」 より ある特定の周波数帯域の波形を強調 /
減少させて 音作りを行うこと 周波数帯域をバンドという 10 バンド 10 箇所調整できる
DEMO https://hiro-tan.github.io/equalizer.html
音声ファイルを読み込む var context = new AudioContext(); var buffer = null;
loadSound("path/to/source") var source = context.createBufferSource(); source.buffer = buffer; source.connetct(context.destination) source.start(0) function loadSound(url) { var req = new XMLHttpRequest(); req.open("GET", url, true); req.responseType = "arraybuffer"; req.onload = function() { context.decodeAudioData(req.response, function(b) { buffer = b; }, function() {}); } req.send(); }
音声にフィルタをかける Web Audio API では音を作る部分と 音を鳴らす部分を分けて考える パソコンとスピー カー のような関係 buffer
destination この間にフィルタのノー ドを挟む buffer filter destination
音声にフィルタをかける var source = context.createBufferSource(); var filter = context.createBiquadFilter(); filter.type
= "peaking"; filter.frequency.value = 440; filter.gain.value = 10; // 中略 source.buffer = buffer; source.connect(filter); filter.connect(context.destination); source.start(0);
まとめ 少ないコー ド量で音作りが楽しめる 変更がリアルタイムかつシー ムレスに反映される どのノー ドをどう繋ぐかは音楽の知識が必要 本格的にやろうとすると結構頭使う