アニメと音声の同期の方法についてご存知の方お願いします。

[明久新782316]

Animaiteでhtml5canvasを設定してアニメーションを作成しています。

パブリッシュしたものを見るとアニメの動きと音声が同期していません。

アニメが早い時もあれば音声にアニメがついてこれないときもあります。

もともと同期させるという機能がhtml5canvasのときはないようですが、対応方法をご存知の方教えてください。

[Yasu_clockmaker_jp_]

Animate CCのHTML5 Canvasドキュメントで、サウンドとアニメーションを同期する手段はオプションなどでは存在しません。

■音がずれる原因

• サウンドは絶対時間で再生される
• 描画はフレームスキップすることなく、フレームごとに順番に表示される
• もし描画負荷が高くフレームが間に合わなかったら、サウンドと描画はずれていく

私も同様の現象に出くわし困ったことがあります。一例として紹介すると、私の場合は次のような対処をしました。

■対処方法

• アニメーションがフレームスキップするようにJavaScriptを実装する

パブリッシュ時に作られるHTMLにJavaScriptが記載されていますが、そのコードを一部書きかえています。

■ 変更前

exportRoot = new lib.XXXXXXX();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot); 
//Registers the "tick" event listener.
fnStartAnimation = function() {
    createjs.Ticker.setFPS(lib.properties.fps);
    createjs.Ticker.addEventListener("tick", stage);
}     

↓

■ 変更後

exportRoot = new lib.XXXXXXX();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot); 
var timeStart = Date.now(); // スタート時の時間を保存
exportRoot.stop(); // 停止させておく
//Registers the "tick" event listener.
fnStartAnimation = function() {
    createjs.Ticker.setFPS(lib.properties.fps);
    createjs.Ticker.addEventListener("tick", stage);
    // イベントリスナーを追加
    createjs.Ticker.addEventListener("tick", function(){
        var timeCurrent = Date.now() - timeStart; // 開始時点との差分を計算
        var frame = Math.round(timeCurrent / 1000 * lib.properties.fps); // フレーム数を計算
        exportRoot.gotoAndStop(frame); // 絶対時間に応じたフレームに移動
    });
}     

この対処方法によってサウンド(BGMなど)と描画は同期しますが、フレームスキップによってSE(効果音など)が再生されない可能性もあります。万全の策ではないので、ケースバイケースで対策を考える必要があると思います…。

[明久新782316]

「Animate CCのHTML5 Canvasドキュメントで、サウンドとアニメーションを同期する手段はオプションなどでは存在しません。」

ということはヘルプなどでわかっていたのですが、もともとflashで同期させたコンテンツを作っており、それをHTML5形式に変換する必要が生じたため困っていました。

ご丁寧なお答えありがとうございます。

変更を加えて試してみたいと思います。