画布时间线未与音频同步答案

【问题标题】：Canvas timeline is not syncing with audio画布时间线未与音频同步
【发布时间】：2016-10-14 09:12:04
【问题描述】：

所以我遇到了 Adobe Animate 中的时间线与 CreateJS 中调用的音频不同步的问题。问题是帧速率设置为 24fps 以匹配 Adobe Animate 时间线 fps。如果帧速率低于 24fps，则音频将在时间线之前完成，导致按钮和视觉效果比应有的显示时间晚得多。如果 fps 快于 24fps，音频将在时间线结束之前被切断。

有谁知道为什么或有解决方案来解决这个问题？谢谢。

【问题讨论】：

标签： javascript html5-canvas adobe createjs flash-cc

【解决方案1】：

默认情况下，Animate 为代码设置帧速率，但不为动画剪辑本身设置帧速率，它会尝试跟随代码速率，直到绘制时间过长，此时它们会变慢。

要解决此问题，请在股票代码上设置framerate on the movieclip 本身。

这将使影片剪辑丢弃任何必要的帧，以使视频保持在适当的帧速率，这可能会导致动画稍微不稳定，但至少它们会以正确的速度播放，因此可以与任何音频播放相匹配。

如果您使用的是 Animate 创建的 html 输出文件，您可以在 handleComplete 函数中添加这一行：

function handleComplete(evt) {
    //This function is always called, irrespective of the content. You  can use the variable "stage" after it is created in token create_stage.
    var queue = evt.target;
    var ssMetadata = lib.ssMetadata;
    for(i=0; i<ssMetadata.length; i++) {
        ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
    }
    exportRoot = new lib._MyAnimation_canvas();
    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot);
    stage.enableMouseOver();    

    exportRoot.framerate = lib.properties.fps; // <-- ADD THIS LINE

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

更复杂的动画可能需要在其他地方进行设置。如果你在使用自己的其他js代码，你需要找到movieclip有问题的地方并在那里设置。

【讨论】：

【解决方案2】：

对此并没有真正的解决方案。最好的方法是在声音结束时调用移动时间帧（或影片剪辑）的函数。

您可以为此使用complete 回调。更多信息和示例可以在SoundJS documentation找到。

【讨论】：