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
Youtube Lofier - Chrome拡張開発
Search
Nini
April 13, 2025
Programming
0
2.6k
Youtube Lofier - Chrome拡張開発
https://github.com/NikoSanko/YoutubeLofier
Nini
April 13, 2025
Tweet
Share
Other Decks in Programming
See All in Programming
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
9
1.7k
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
2
510
開発生産性を上げるための生成AI活用術
starfish719
3
1.1k
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
220
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
430
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
340
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
830
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.4k
作って理解するGOCACHEPROG / Go Conference 2025(Workshop)
mazrean
0
100
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
1k
Six and a half ridiculous things to do with Quarkus
hollycummins
0
180
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
540
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Documentation Writing (for coders)
carmenintech
75
5.1k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Producing Creativity
orderedlist
PRO
347
40k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
GitHub's CSS Performance
jonrohan
1032
470k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
20
1.2k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Transcript
Youtube Lofier(Chrome 拡張) 開発合宿 2025/04/11~12
目次 1. 実装したいもの 2. 使用技術 3. 仕組み 4. 終わりに
1. 実装したいもの Youtube/Youtube Music で聴く音楽を Lo-Fi(※) に加工したいので、元音源を加工して出 力する Chrome 拡張を作りたい
※音を歪ませたり、割ったりするなどして、音質を意図的に劣化させた音楽ジャンル
2. 使用技術 - JavaScript - HTML / CSS - Web
Audio API
3. 仕組み (Chrome拡張について) ユーザーが操作するポップアップウィンドウから メッセージがコンテンツスクリプト (content.js)に送信され、 Webページ上でコンテンツスクリプトが実行される ┌ manifest.json ├
content/ | └ content.js ├ popup/ | ├ popup.html | ├ popup.css | └ popup.js └ images/ └ 各種画像ファイル ボタン押下等をトリガーに Webペー ジにメッセージ送信 参考: https://developer.chrome.com/docs/extensions/develop?hl=ja
3. 仕組み (音声処理について) 音声の加工には Web Audio API は用いる。 Web Audio
API は音源やエフェクトをノードとして繋ぎ合わせることで音声処理を行う。 参考: https://developer.mozilla.org/ja/docs/Web/API/Web_Audio_API 元音源 エフェクター ・・・ エフェクター システム出力
3. 仕組み (音声処理について) 音声プログラミングの前提知識 音は波であり、音声データは波形をサンプリングレート数で区切った非連続な波形デー タとして表現される サンプリングレート数を 44100 とした場合、 1/44100
秒ごとの振幅(※) を保存した配列で表現できる ※音の大きさ。short int 型で表されることが多く、その場合 -32768 〜 32767 の範囲で表される
3. 仕組み (音声処理について) 今回主に使用したエフェクトは次の3つ 1. EQ 2. Compressor 3. Saturator
3. 仕組み (音声処理について - EQ) EQ は音の帯域を操作するエフェクターであり、高い音、低い音などを増減させることが できる 本来、波形データを帯域ごとに分けるには高速フーリエ展開をして、周波数分布を算出 する必要があるが、Web
Audio API には帯域処理をするメソッドとして BiquadFilterNode が用意されているのでこれを利用する 参考: https://developer.mozilla.org/en-US/docs/Web/API/BiquadFilterNode
3. 仕組み (音声処理について - EQ) 写真は実際に楽曲制作等で使用されるEQの画面イメージであり、 丸で囲った部分が処理を施している帯域であり、これをコードで再現する
3. 仕組み (音声処理について - EQ) EQノードを追加するメソッドを下記のように定義 https://github.com/NikoSanko/YoutubeLofier/blob/f86d73a30338b3e1f1889477aabd2f65648269c7/content/content.js#L94-L103
3. 仕組み (音声処理について - EQ) 前述のメソッドに下記パラメータを渡せば、写真の丸で囲われた部分と同じ処理をする ノードを追加できる { type: EQ_TYPE.LOWPASS,
frequency: 18000, q: 48, gain: null, mixRatio: 1 }
3. 仕組み (音声処理について - Compressor) Compressor は音の大きさを操作するエフェクターであり、指定した閾値(スレッショルド) を入力音声が超えた場合に指定比率(レシオ)に基づいて超過した音を小さくする Web Audio
API には Compressor として DynamicsCompressorNode が用意されて いるのでこれを利用する 参考: https://developer.mozilla.org/en-US/docs/Web/API/DynamicsCompressorNode
3. 仕組み (音声処理について - Compressor) 写真は実際に楽曲制作等で使用されるCompressorの画面イメージであり、 標準的な Compressor で制御できる下記パラメータをコードで再現する ・Threshold:
閾値 ・Ratio: 圧縮率 ・knee: コンプのかかり具合 ・Attack: 閾値を超えてから圧縮を かけ切るまでにかける時間 ・Release: 閾値を下回ってから圧縮を 戻すまでにかける時間
3. 仕組み (音声処理について - Compressor) Compressorノードを追加するメソッドを下記のように定義 https://github.com/NikoSanko/YoutubeLofier/blob/f86d73a30338b3e1f1889477aabd2f65648269c7/content/content.js#L105-L115
3. 仕組み (音声処理について -Compressor) 前述のメソッドに下記パラメータを渡せば、写真と同じ処理をするノードを追加できる { threshold: -10, knee: 3,
ratio: 3, attack: 0.001, release: 0.1, mixRatio: 1 }
3. 仕組み (音声処理について - Saturator) Saturator は音を歪ませるエフェクターであり、倍音を付与して音に温かみを持たせた り、ヘッドルームを作り出すことができる。 Web Audio
API にはカーブを指定することで波形の整形をして音を歪ませることができ る WaveShaperNode があるのでこれを利用する。波形を整形するためのカーブは別 で生成する必要がある。 参考: https://developer.mozilla.org/en-US/docs/Web/API/WaveShaperNode
3. 仕組み (音声処理について - Saturator) Saturator の詳しい仕組みについては込み入った話になるので、割愛する 下記は分かりやすく説明しているので、もし興味があればそちらをご覧ください https://korilakkuma.github.io/Web-Music-Documentation/#section-effectors-distortion
3. 仕組み (音声処理について - Saturator) 波形の整形のためのカーブ生成関数は下記のように定義 https://github.com/NikoSanko/YoutubeLofier/blob/f86d73a30338b3e1f1889477aabd2f65648269c7/content/content.js#L253-L262
3. 仕組み (音声処理について - Saturator) 前述の関数の amount パラメータに 5 を指定した場合のカーブは写真のようになる
4. 終わりに Chrome 拡張なので Youtube/Youtube Music に限らず、<audio><video>タグで音声を 出力しているなら基本的に本拡張は機能するはずだが、Spotify や SoundCloud
など他 のストリーミングサービスで本拡張は機能しなかった。軽く調べただけなのだが、どうやら Spotify は Spotify の Web API を利用しなければ音声を取得できないようだったため、本 拡張のサポート範囲は Youtube/Youtube Music に絞ることにした。