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
520
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
220
Getting Started Web Audio API
hirotan
0
120
音色と波形の話
hirotan
0
160
chiptune by web audio api
hirotan
0
120
Other Decks in Technology
See All in Technology
コードを書く隙間を見つけて生きていく技術/Findy 思考の現在地
fujiwara3
23
4.6k
Tableau事例紹介 / Tableau Case Study of Eureka
kazuya_araki_tokyo
1
170
DevOpsメトリクスとアウトカムの接続にトライ!開発プロセスを通して計測できるメトリクスの活用方法
ham0215
0
160
入社後初めてのタスクでk8sアップグレードした話.pdf
kkato1
0
370
2024-04-06 AMeDAS to Lagoon SORACOM UG 2024-04-06
anysonica
0
120
[PlatformCon 24] Platform Orchestrators: The Missing Middle of Internal Developer Platforms?
danielbryantuk
0
160
Kubernetesでアプリの安定稼働と高頻度のアップデートを両立するためのプラクティス / Best Practices for Applications on Kubernetesto Achieve Both Frequent Updates and Stability
hhiroshell
10
2.9k
DevOpsDays History and my DevOps story
kawaguti
PRO
6
1k
Microsoft Cloudで開発ライフサイクルを保護する
kkamegawa
0
140
NLP2024 参加報告LT ~RAGの生成評価と懇親戦略~ / nlp2024_attendee_presentation_LT_masuda
taro_masuda
1
190
Data and AI Governance: Existing Challenges and Emerging Trends
scotthsieh825
0
140
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
1
630
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
41
12k
Bash Introduction
62gerente
604
210k
Bootstrapping a Software Product
garrettdimon
PRO
301
110k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
320
20k
A Tale of Four Properties
chriscoyier
150
22k
Stop Working from a Prison Cell
hatefulcrawdad
265
19k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Designing with Data
zakiwarfel
95
4.8k
Atom: Resistance is Futile
akmur
258
25k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
15
1.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.3k
In The Pink: A Labor of Love
frogandcode
137
21k
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);
まとめ 少ないコー ド量で音作りが楽しめる 変更がリアルタイムかつシー ムレスに反映される どのノー ドをどう繋ぐかは音楽の知識が必要 本格的にやろうとすると結構頭使う