動画に音を合成する


前回 canvas から映像を作りました。

前に Audio API で音を作ったので、音を足した動画にしてみます。

参考リンク

MDN

音と映像を重ねる

AudioContextAudioDestinationNode の代わりにMediaStreamAudioDestinationNode に繋いで stream を取得します。

canvas からも stream を取得して track を抜き出して重ねます。

 

図にするとこんな感じ。

 

コードを抜き出すとこんな感じです。

getAudioTrack() は以前のコードの destination を変更してトラックを抜き出したもので、メインは 36 - 39 行目です。

recorderを外に出してるのは stop するためです。

 

実際に録画してみると、音が終了したところで動画は終わっています。

トラックの1つが終了するとそこまでになるのかな。終了方法を少し考えないといけなさそうです。

ともあれ音付きの動画になりました。

 

動画や音は別ファイルから読み込んでもいいし、音を使って canvas を操作して動画にしてもいい。色々と遊べそうです。


コメントを残す

メールアドレスが公開されることはありません。