Youtube Lofier - Chrome拡張開発

https://github.com/NikoSanko/YoutubeLofier

Transcript

1. Youtube Lofier（Chrome 拡張） 開発合宿 2025/04/11~12
2. 目次 1. 実装したいもの 2. 使用技術 3. 仕組み 4. 終わりに
3. 1. 実装したいもの Youtube/Youtube Music で聴く音楽を Lo-Fi(※) に加工したいので、元音源を加工して出 力する Chrome 拡張を作りたい ※音を歪ませたり、割ったりするなどして、音質を意図的に劣化させた音楽ジャンル
4. 2. 使用技術 - JavaScript - HTML / CSS - Web Audio API
5. 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
6. 3. 仕組み (音声処理について) 音声の加工には Web Audio API は用いる。 Web Audio API は音源やエフェクトをノードとして繋ぎ合わせることで音声処理を行う。 参考: https://developer.mozilla.org/ja/docs/Web/API/Web_Audio_API 元音源 エフェクター ・・・ エフェクター システム出力
7. 3. 仕組み (音声処理について) 音声プログラミングの前提知識 音は波であり、音声データは波形をサンプリングレート数で区切った非連続な波形デー タとして表現される サンプリングレート数を 44100 とした場合、 1/44100 秒ごとの振幅(※) を保存した配列で表現できる ※音の大きさ。short int 型で表されることが多く、その場合 -32768 〜 32767 の範囲で表される
8. 3. 仕組み (音声処理について) 今回主に使用したエフェクトは次の3つ 1. EQ 2. Compressor 3. Saturator
9. 3. 仕組み (音声処理について - EQ) EQ は音の帯域を操作するエフェクターであり、高い音、低い音などを増減させることが できる 本来、波形データを帯域ごとに分けるには高速フーリエ展開をして、周波数分布を算出 する必要があるが、Web Audio API には帯域処理をするメソッドとして BiquadFilterNode が用意されているのでこれを利用する 参考: https://developer.mozilla.org/en-US/docs/Web/API/BiquadFilterNode
10. 3. 仕組み (音声処理について - EQ) 写真は実際に楽曲制作等で使用されるEQの画面イメージであり、 丸で囲った部分が処理を施している帯域であり、これをコードで再現する
11. 3. 仕組み (音声処理について - EQ) EQノードを追加するメソッドを下記のように定義 https://github.com/NikoSanko/YoutubeLofier/blob/f86d73a30338b3e1f1889477aabd2f65648269c7/content/content.js#L94-L103
12. 3. 仕組み (音声処理について - EQ) 前述のメソッドに下記パラメータを渡せば、写真の丸で囲われた部分と同じ処理をする ノードを追加できる { type: EQ_TYPE.LOWPASS, frequency: 18000, q: 48, gain: null, mixRatio: 1 }
13. 3. 仕組み (音声処理について - Compressor) Compressor は音の大きさを操作するエフェクターであり、指定した閾値(スレッショルド) を入力音声が超えた場合に指定比率(レシオ)に基づいて超過した音を小さくする Web Audio API には Compressor として DynamicsCompressorNode が用意されて いるのでこれを利用する 参考: https://developer.mozilla.org/en-US/docs/Web/API/DynamicsCompressorNode
14. 3. 仕組み (音声処理について - Compressor) 写真は実際に楽曲制作等で使用されるCompressorの画面イメージであり、 標準的な Compressor で制御できる下記パラメータをコードで再現する ・Threshold: 閾値 ・Ratio: 圧縮率 ・knee: コンプのかかり具合 ・Attack: 閾値を超えてから圧縮を 　　　　 かけ切るまでにかける時間 ・Release: 閾値を下回ってから圧縮を 　　　　　 戻すまでにかける時間
15. 3. 仕組み (音声処理について - Compressor) Compressorノードを追加するメソッドを下記のように定義 https://github.com/NikoSanko/YoutubeLofier/blob/f86d73a30338b3e1f1889477aabd2f65648269c7/content/content.js#L105-L115
16. 3. 仕組み (音声処理について -Compressor) 前述のメソッドに下記パラメータを渡せば、写真と同じ処理をするノードを追加できる { threshold: -10, knee: 3, ratio: 3, attack: 0.001, release: 0.1, mixRatio: 1 }
17. 3. 仕組み (音声処理について - Saturator) Saturator は音を歪ませるエフェクターであり、倍音を付与して音に温かみを持たせた り、ヘッドルームを作り出すことができる。 Web Audio API にはカーブを指定することで波形の整形をして音を歪ませることができ る WaveShaperNode があるのでこれを利用する。波形を整形するためのカーブは別 で生成する必要がある。 参考: https://developer.mozilla.org/en-US/docs/Web/API/WaveShaperNode
18. 3. 仕組み (音声処理について - Saturator) Saturator の詳しい仕組みについては込み入った話になるので、割愛する 下記は分かりやすく説明しているので、もし興味があればそちらをご覧ください https://korilakkuma.github.io/Web-Music-Documentation/#section-effectors-distortion
19. 3. 仕組み (音声処理について - Saturator) 波形の整形のためのカーブ生成関数は下記のように定義 https://github.com/NikoSanko/YoutubeLofier/blob/f86d73a30338b3e1f1889477aabd2f65648269c7/content/content.js#L253-L262
20. 3. 仕組み (音声処理について - Saturator) 前述の関数の amount パラメータに 5 を指定した場合のカーブは写真のようになる
21. 4. 終わりに Chrome 拡張なので Youtube/Youtube Music に限らず、<audio><video>タグで音声を 出力しているなら基本的に本拡張は機能するはずだが、Spotify や SoundCloud など他 のストリーミングサービスで本拡張は機能しなかった。軽く調べただけなのだが、どうやら Spotify は Spotify の Web API を利用しなければ音声を取得できないようだったため、本 拡張のサポート範囲は Youtube/Youtube Music に絞ることにした。