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
170
音色と波形の話
hirotan
0
180
chiptune by web audio api
hirotan
0
150
Other Decks in Technology
See All in Technology
サイバーエージェントグループのSRE10年の歩みとAI時代の生存戦略
shotatsuge
4
710
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
270
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
330
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
220
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
2
630
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
flyaahelpguide
0
240
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
rinchsan
0
360
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
zaimy
1
290
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
kazeburo
1
410
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
3
570
「Chatwork」のEKS環境を支えるhelmfileを使用したマニフェスト管理術
hanayo04
1
210
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
270
Featured
See All Featured
Side Projects
sachag
455
42k
Statistics for Hackers
jakevdp
799
220k
Rails Girls Zürich Keynote
gr2m
95
14k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Done Done
chrislema
184
16k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
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);
まとめ 少ないコー ド量で音作りが楽しめる 変更がリアルタイムかつシー ムレスに反映される どのノー ドをどう繋ぐかは音楽の知識が必要 本格的にやろうとすると結構頭使う