ブラウザで完結!YouTube 動画で VJ ができる「YouTube-VJ」を作りました!
作成日: ・ 更新日:
DJ の音楽に合わせてスクリーンに YouTube の MV を投影する目的で「 YouTube-VJ 」を作ってみました!
再生速度変更やタイミングの微調整など、音楽と合わせるための機能に特化しています
なお、 YouTube-VJ を作るにあたり 簡易 VJ アプリ の実装等を参考にしました
使い方
準備
※このシステムの利用には投影用と操作用の 2 画面必要です。
起動ボタンを押すと、
YouTube-VJ Controller Window
(操作画面)と
YouTube-VJ Projection Window
(投影画面)が開きます。
投影用画面はあらかじめ全画面表示(F11 キーなど)しておきます。
1.YouTube 動画をロードする
コントローラー中心上部を使います。

Enter YouTube ID
の欄に、動画の URL
を入力すると、サムネイルが表示されます。
サムネイルを確認し、読み込みたい動画で間違いなければ、上部
Load
ボタンを押して、読み込みます。
この際、右の
Load
ボタンは右デッキに、左の
Load
ボタンは左デッキに読み込まれます。
2.動画のタイミングやスピードを設定する
コントローラー左右のデッキを使います。

Preview
では、実際に出力される動画を確認できます。(デフォルトでミュート)
Preview 欄は、通常の YouTube のように操作できるため、再生バーで位置を調整、再生・一時停止することができます。
左下
Adjust
では、再生位置の微調整ができます。
右下
Speed
では、再生スピードの変更ができます。数字欄に直接値を入れることもできます。(設定できる値は
0.25 ~ 2.00 倍、0.05 刻み)
3.動画を切り替える
コントローラー中央下部を使います。

Crossfader
では、左右の動画の切り替えができます。
フェーダーを右に移動させると右の動画に、左に移動させると左の動画になります。
また、中央に合わせると 2 つの動画が重なって出力されます。
Opacity
では、左右それぞれの動画の透過率を変更することができます。
さいごに
note 執筆時現在(2024/09/30)、絶賛開発中です!
もし使っていてこんな機能が欲しいな~などあれば、 X @KazuProg の DM 等でご連絡ください!!!