質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

4763閲覧

HTML canvasアニメーションを動画ファイル化する為には?

退会済みユーザー

退会済みユーザー

総合スコア0

Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/06/06 15:27

編集2017/06/06 22:44

HTMLのcanvas上で数分程度のモーショングラフィックスアニメーションを動的に生成し、そのアニメーションを動画ファイルとして書き出したいです。

そのアニメーションにはバックグランドのBGMの他にも、ところどころに動的に効果音も入ってきます。例えば3分のアニメーションであれば、イントロクリップ用の音声ファイルが再生され、イントロと本編のトランジション部分には短い効果音ファイルが再生され、そのあとはアニメーション本編用の音声ファイルが再生され、本編とエンドクリップとの繋ぎ部分に効果音が再生され、最後にエンドクリップ用の音声ファイルが再生され、、、本編のアニメーション中には動的に効果音が適切な箇所に挿入されて再生され、、、といった具合です。

アニメーションを動画ファイルにするには、アニメーションをフレーム毎に画像書き出しして、ffmpegで繋げて動画ファイル化すれば良いのかなと思っているのですが、音声をどのように一つの音声ファイルとして生成することが出来るのか分かりません。

何かヒントを教えて頂けないでしょうか!?

よろしくお願いいたします!

追記

動画キャプチャーソフトを利用せずにプラグマティックに音声付き動画ファイルを生成したい理由としては、そもそも生成するモーショングラフィックスアニメーションが動的に素材を読み込み生成されるので、動画生成自体もプログラムで行いたいからです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

プログラミングに関しての質問サイトであるteratailの回答としては失格かもしれませんが、PC画面を任意の範囲で録画&録音できるキャプチャーソフトを使えばすっごく楽にできるんじゃないかと思います。

投稿2017/06/06 16:28

oskbt

総合スコア1895

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/06/06 20:45

プログラミングで実現する方法を知りたいのです笑
guest

0

ベストアンサー

BGMや効果音などのオーディオがどのように再生されているのか不明なので、完全な答えではないと思いますが、MediaRecorderオブジェクトが使えるのではないでしょうか。少なくともヒントにはなるかと。

MediaRecorder の対応はブラウザによって差異があります。現状、FireFoxが最も多くの機能をサポートしています。

参考リンク:

ご参考になれば。

投稿2017/06/09 05:54

tkanda

総合スコア2425

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問