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
dynamic!
moro
10
7.8k
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
200
Cursorハンズオン実践!
eltociear
2
1.1k
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
820
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
250
Go言語はstack overflowの夢を見るか?
logica0419
0
270
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
170
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
160
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
200
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
900
私はどうやって技術力を上げたのか
yusukebe
43
18k
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
110
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Balancing Empowerment & Direction
lara
4
690
Docker and Python
trallard
46
3.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
The Pragmatic Product Professional
lauravandoore
36
6.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Faster Mobile Websites
deanohume
310
31k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Writing Fast Ruby
sferik
629
62k
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 に絞ることにした。