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
650
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
180
音色と波形の話
hirotan
0
180
chiptune by web audio api
hirotan
0
150
Other Decks in Technology
See All in Technology
【実演版】カンファレンス登壇者・スタッフにこそ知ってほしいマイクの使い方 / 大吉祥寺.pm 2025
arthur1
1
870
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
9
73k
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
150
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
840
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
120
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
280
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
160
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
cmusudakeisuke
1
260
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
240
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
180
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
10k
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
180
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Visualization
eitanlees
148
16k
KATA
mclloyd
32
14k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Documentation Writing (for coders)
carmenintech
74
5k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
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);
まとめ 少ないコー ド量で音作りが楽しめる 変更がリアルタイムかつシー ムレスに反映される どのノー ドをどう繋ぐかは音楽の知識が必要 本格的にやろうとすると結構頭使う