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
660
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
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
940
Geospatialの世界最前線を探る [2025年版]
dayjournal
1
260
「使い方教えて」「事例教えて」じゃもう遅い! Microsoft 365 Copilot を触り倒そう!
taichinakamura
0
450
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.7k
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
8
1.1k
物体検出モデルでシイタケの収穫時期を自動判定してみた。 #devio2025
lamaglama39
0
240
Click A, Buy B: Rethinking Conversion Attribution in ECommerce Recommendations
lycorptech_jp
PRO
0
110
Implementing and Evaluating a High-Level Language with WasmGC and the Wasm Component Model: Scala’s Case
tanishiking
0
150
LLMアプリの地上戦開発計画と運用実践 / 2025.10.15 GPU UNITE 2025
smiyawaki0820
1
670
LLMプロダクトの信頼性を上げるには?LLM Observabilityによる、対話型音声AIアプリケーションの安定運用
ivry_presentationmaterials
0
600
ビズリーチ求職者検索におけるPLMとLLMの活用 / Search Engineering MEET UP_2-1
visional_engineering_and_design
1
170
いまからでも遅くない!SSL/TLS証明書超入門(It's not too late to start! SSL/TLS Certificates: The Absolute Beginner's Guide)
norimuraz
0
280
Featured
See All Featured
Being A Developer After 40
akosma
91
590k
The Cost Of JavaScript in 2023
addyosmani
55
9k
Site-Speed That Sticks
csswizardry
13
910
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
KATA
mclloyd
PRO
32
15k
Agile that works and the tools we love
rasmusluckow
331
21k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
35
6.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Visualization
eitanlees
149
16k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
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);
まとめ 少ないコー ド量で音作りが楽しめる 変更がリアルタイムかつシー ムレスに反映される どのノー ドをどう繋ぐかは音楽の知識が必要 本格的にやろうとすると結構頭使う