KazuProg's notes

技術メモや備忘録などを自由気ままに書き連ねています

ブラウザで完結!YouTube 動画で VJ ができる「YouTube-VJ」を作りました!

作成日: ・ 更新日:

DJ の音楽に合わせてスクリーンに YouTube の MV を投影する目的で「 YouTube-VJ 」を作ってみました!

再生速度変更やタイミングの微調整など、音楽と合わせるための機能に特化しています

なお、 YouTube-VJ を作るにあたり 簡易 VJ アプリ の実装等を参考にしました

使い方

準備

※このシステムの利用には投影用と操作用の 2 画面必要です。

起動ボタンを押すと、 YouTube-DJ Controller Window (操作画面)と YouTube-DJ Projection Window (投影画面)が開きます。

投影用画面はあらかじめ全画面表示(F11 キーなど)しておきます。

1.YouTube 動画をロードする

コントローラー中心上部を使います。

Load Track

Enter YouTube ID の欄に、動画の URL を入力すると、サムネイルが表示されます。

サムネイルを確認し、読み込みたい動画で間違いなければ、上部 Load ボタンを押して、読み込みます。

この際、右の Load ボタンは右デッキに、左の Load ボタンは左デッキに読み込まれます。

2.動画のタイミングやスピードを設定する

コントローラー左右のデッキを使います。

Deck

Preview では、実際に出力される動画を確認できます。(デフォルトでミュート)

Preview 欄は、通常の YouTube のように操作できるため、再生バーで位置を調整、再生・一時停止することができます。

左下 Adjust では、再生位置の微調整ができます。

右下 Speed では、再生スピードの変更ができます。数字欄に直接値を入れることもできます。(設定できる値は 0.25 ~ 2.00 倍、0.05 刻み)

3.動画を切り替える

コントローラー中央下部を使います。

Fader

Crossfader では、左右の動画の切り替えができます。

フェーダーを右に移動させると右の動画に、左に移動させると左の動画になります。

また、中央に合わせると 2 つの動画が重なって出力されます。

Opacity では、左右それぞれの動画の透過率を変更することができます。

さいごに

note 執筆時現在(2024/09/30)、絶賛開発中です!

もし使っていてこんな機能が欲しいな~などあれば、 X @KazuProg の DM 等でご連絡ください!!!