« nanocにJavaScriptで動的ページャ機能を追加する
nanocで手軽にAmazonアソシエイトリンクするフィルタ »

CeVIO Creative Studio FREEとReveal.jsで自動プレゼン

Created at: 2013-04-27 | Tags:

2013/4/26にCeVIO Creative Studio FREEが公開され、以下の記事で話題になっていました。

早速私も試してみたところ、かなり自然な音声合成ができ、音声ファイルの出力なども簡単でした。

そこで今回は、このCeVIO Creative Studio FREEと、先日少し改造したReveal.jsを使って自動プレゼンテーションを作ってみたので紹介します。

自動プレゼンテーション 自動プレゼンテーション

自動プレゼンテーション Demo

今回作成した自動プレゼンテーションのDemoは、下記ページで確認いただけます。

ただしChrome、Firefox、Operaのみで動作確認しており、その他のブラウザでは正しく動作しないと思いますのでご注意下さい。

右下のキャラクターはマンガで分かる！Vimの使い方に登場している伊藤さんです。(連載が中途半端な所で止まっていてすみません)

CeVIO Creative Studio FREEの使い方

CeVIO Creative Studio FREEのユーザガイドはこちらです。操作は極めてシンプルなので、すぐに使えると思います。

動作環境がWindows 7,8となっていますが、一応XPでも動作しました。

なお、今回のDemoで使用している音声はパラメータを一切変更していませんが、すごく自然にしゃべってくれるので助かります。

CeVIO Creative Studio FREE CeVIO Creative Studio FREE

Demo用には以下のcsvファイルをインポートして音声データを作りました。英単語はあまり読めないようなので、カタカナにしたりしています。

さとうささら,こんにちは。
さとうささら,マンガで分かるヴィムの使い方の伊藤です。今からCeVIOクリエイティブ・スタジオ・フリーとレヴィアルドットjsを使った自動プレゼンテーションについてご紹介します。
さとうささら,それでは早速始めましょう。
さとうささら,目次はこのようになっています。
さとうささら,このプレゼンテーションは3分程度で終了します。
さとうささら,今回のテーマは、プレゼンテーションの自動化です。
さとうささら,すでにご覧頂いている通り、音声データと字幕表示を使って、プレゼンテーションを自動再生しています。
さとうささら,これにより、発表者は開始ボタンを押すだけでプレゼンテーションを代行してもらうことができます。
さとうささら,次のページから、利用しているツールについて説明しますね。
さとうささら,まずは、CeVIOクリエイティブ・スタジオ・フリーです。
さとうささら,こちらは入力したテキストを音声合成してくれるソフトウェアです。2013年4月26日にフリー版が公開されました。
さとうささら,画面上から発話に関するパラメータを直感的に変更することができ、作成した音声はウェーブファイルとして保存可能です。
さとうささら,動作環境はWindowsセブンとエイトですが、この自動プレゼンテーションを作ったナセさんによるとXPでも動いたそうです。
さとうささら,次は、レヴィアルドットjsです。
さとうささら,これはHTMLとジャバスクリプトでプレゼンテーション用のスライドを実現しているものです。
さとうささら,通常はこのような自動再生ではなく、手動でスライドを操作するようになっています。
さとうささら,なおここでは、ナセさんがマークダウンで手軽にスライドを作れるようにカスタマイズした改造版を使っています。
さとうささら,それでは、これらのツールを使ってどのように自動プレゼンテーションを行なっているのか、簡単に説明しましょう。
さとうささら,ジャバスクリプトで行なっている主な処理内容はこちらのとおりです。
さとうささら,ちなみに、音声データはHTMLファイブのオーディオ機能を使って再生しています。
さとうささら,これだけではよく分からないと思うので、詳しくは直接ソースコードを御覧ください。
さとうささら,発表は以上です。
さとうささら,ご清聴ありがとうございました。
さとうささら,もう一度見る場合は上のボタンを、ナセさんのブログを開く場合は下のボタンをクリックして下さい。

プロジェクトを保存すると.ccsという拡張子でデータが保存されます。このファイルは実態がXMLのため、簡単に各発話の長さなどを取り出すことができます。

Reveal.jsのカスタマイズ

Reveal.jsでの自動プレゼンテーションを実現するために追加した主なコード(js/script.js)は以下のとおりです。

var speach_data = [];
var current_page = 0;

var speach_exe = function(key, val, total_duration){
  //フキダシを更新
  $("#fukidashi").empty();
  $("#fukidashi").append(val["text"]);
  //画像が指定されていれば変更
  if (val["img"] != "") {
    $("img.speaker").fadeOut();
    $("#" + val["img"]).fadeIn();
  }
  //音声を再生
  $("#voice_" + ("00" + (key + 1)).slice(-3) + "").get(0).play();
  //ページ送りフラグがあれば処理
  if (val["next"] == true) {
    //2秒後にスライドのページを進める
    setTimeout(function() {
        Reveal.slide(current_page + 1);
        current_page += 1;
      }, 2000 + val["duration"]);
  }
};

$(function(){
  //スピーチデータを読み込む
  $.ajaxSetup({async: false});
  $.getJSON("./js/speach.json", function(data) {
    speach_data = data;
  });

  $("#ajax-loader").hide();
  $("#start_btn").removeAttr('disabled');
  $("#start_btn").empty();
  $("#start_btn").append("自動プレゼン開始<br />＊＊＊音が出ます＊＊＊");
  //開始ボタンが押されたら処理
  $("#start_btn").click(function(){
    $("#start_btn").attr('disabled','disabled')
    $("#start_btn").empty();
    $("#start_btn").append("自動プレゼン開始<br />－－－実行中－－－");

    var start_time = 0;
    var total_duration = 0;
    //スピーチデータを1件ずつ処理
    $.each(speach_data, function(key, val){
      if (key == 0) {
        start_time = 500;
      } else {
        start_time = total_duration + 2000;
      }
      setTimeout(speach_exe, start_time, key, val);
      if (key == 0) {
        total_duration += val["duration"] + 500;
      } else {
        total_duration += val["duration"] + 2000;
      }
    });
  });
  //リロードボタンが押されたら処理
  $("#reload_btn").click(function(){
    window.location.href = "/files/2013-04-27_01_cevio_and_reveal_js_auto_presentation/";
  });
  //ブログを開くボタンが押されたら処理
  $("#open_blog_btn").click(function(){
    window.location.href = "/";
  });
});

ajaxで外部ファイルのjsonを読み込んでいるため、このままだとサーバに置かないと実行できません。jsonをベタ書きに変えればローカルでも使えそうな気がします。

jsonファイルの中身は以下のようになっています。

[
  {"duration" : 745, "text" : "こんにちは。", "img" : "ito_san_002", "next" : false},
  {"duration" : 10720, "text" : "「マンガで分かる！Vimの使い方」の伊藤です。今から「CeVIO Creative Studio FREE」と「Reveal.js」を使った自動プレゼンテーションについてご紹介します。", "img" : "ito_san_001", "next" : false},
  {"duration" : 2000, "text" : "それでは早速始めましょう。", "img" : "", "next" : true},

  {"duration" : 1975, "text" : "目次はこのようになっています。", "img" : "", "next" : false},
  {"duration" : 3370, "text" : "このプレゼンテーションは3分程度で終了します。", "img" : "", "next" : true},

  {"duration" : 3785, "text" : "今回のテーマは、プレゼンテーションの自動化です。", "img" : "", "next" : false},
  {"duration" : 7990, "text" : "すでにご覧頂いている通り、音声データと字幕表示を使って、プレゼンテーションを自動再生しています。", "img" : "", "next" : false},
  {"duration" : 6805, "text" : "これにより、発表者は開始ボタンを押すだけでプレゼンテーションを代行してもらうことができます。", "img" : "", "next" : false},
  {"duration" : 4555, "text" : "次のページから、利用しているツールについて説明しますね。", "img" : "", "next" : true},

  {"duration" : 3380, "text" : "まずは、「CeVIO Creative Studio FREE」です。", "img" : "", "next" : false},
  {"duration" : 9325, "text" : "こちらは入力したテキストを音声合成してくれるソフトウェアです。2013年4月26日にFREE版が公開されました。", "img" : "", "next" : false},
  {"duration" : 9275, "text" : "画面上から発話に関するパラメータを直感的に変更することができ、作成した音声はwavファイルとして保存可能です。", "img" : "", "next" : false},
  {"duration" : 8730, "text" : "動作環境はWindows 7と8ですが、この自動プレゼンテーションを作ったnaseさんによるとXPでも動いたそうです。", "img" : "", "next" : true},

  {"duration" : 2830, "text" : "次は、「Reveal.js」です。", "img" : "", "next" : false},
  {"duration" : 5935, "text" : "これはHTMLとJavaScriptでプレゼンテーション用のスライドを実現しているものです。", "img" : "", "next" : false},
  {"duration" : 6260, "text" : "通常はこのような自動再生ではなく、手動でスライドを操作するようになっています。", "img" : "", "next" : false},
  {"duration" : 7620, "text" : "なおここでは、naseさんがMarkdownで手軽にスライドを作れるようにカスタマイズした改造版を使っています。", "img" : "", "next" : false},
  {"duration" : 8255, "text" : "それでは、これらのツールを使ってどのように自動プレゼンテーションを行なっているのか、簡単に説明しましょう。", "img" : "", "next" : true},

  {"duration" : 4220, "text" : "JavaScriptで行なっている主な処理内容はこちらのとおりです。", "img" : "", "next" : false},
  {"duration" : 6170, "text" : "ちなみに、音声データはHTML5のaudio機能を使って再生しています。", "img" : "", "next" : false},
  {"duration" : 5985, "text" : "これだけではよく分からないと思うので、詳しくは直接ソースコードを御覧ください。", "img" : "", "next" : true},

  {"duration" : 1300, "text" : "発表は以上です。", "img" : "", "next" : false},
  {"duration" : 1990, "text" : "ご清聴ありがとうございました。", "img" : "ito_san_002", "next" : false},
  {"duration" : 6895, "text" : "もう一度見る場合は上のボタンを、naseさんのブログを開く場合は下のボタンをクリックして下さい。", "img" : "ito_san_001", "next" : false}
]

「duration」はccsファイルから抜き出したDuration値をミリ秒に変換したものです。「next」のフラグがtrueの場合、音声再生後にページ送りが実行されます。

おわりに

ローディング表示など、まだ不完全なところも残っていますが、とりあえず動くようになったので公開しました。

ちなみに自動プレゼンテーションは以前にもMMDAgentを使って実現しています。

ただ、この時の方法ではシナリオの記述が煩雑だったり、MMDAgentを起動しておく必要があったりとイマイチだったので、今回のやり方のほうが手軽な感じです。

今回も画像のモーションが2種類だけと物足りないですが、音声の感情表現と併せて拡充すれば、こちらもより臨場感がでるかもしれません。ccsファイルには音素情報も入っているので、口パクもできそうな気がします。

CeVIOはまだまだ進化しそうなので、今後の展開にも期待しています。

追記＠2013/04/27

CeVIO Creative Studio FREEとReveal.jsで自動プレゼン Demoを以下の通り変更しました。

  • 伊藤さんの名前を間違えて佐藤さんにしていたので修正しました。
  • 音声ファイルをえこでこツールでwavからogg(aoTuv VBR 0.5)へ変換し、合計12MB→1.5MB程度に圧縮しました。

以下のページは冒頭で紹介した記事の要点などがまとまっていて分かりやすいです。

追記＠2013/04/28

追記＠2013/04/29

発話の調整のため、インポートCSVの内容を以下の通り変更しました。

  • 「Windows7と8」→「Windowsセブンとエイト」
  • 「なせさん」→「ナセさん」
« nanocにJavaScriptで動的ページャ機能を追加する
nanocで手軽にAmazonアソシエイトリンクするフィルタ »
blog comments powered by Disqus