如何让 FlashPro CC HTML5 Canvas 导出与 iPad/iPhone 上的声音一起使用

Posted 2023-02-16

【中文标题】如何让 FlashPro CC HTML5 Canvas 导出与 iPad/iPhone 上的声音一起使用

【英文标题】：How to get FlashPro CC HTML5 Canvas exports to work with sound on the iPad/iPhone

【发布时间】：2015-05-13 18:55:19

【问题描述】：

我无法让 FlashPro CC html5 Canvas 导出来处理 iPad/iPhone 上的声音。 我在 Twitter 上联系并得到了这样的回复：

“时间轴在点击时播放，但声音在 frame2 上异步播放。使用“playEmptySound”修复此问题。

这是给我的链接。 http://www.createjs.com/Docs/SoundJS/classes/WebAudioPlugin.html#method_playEmptySound

好的，现在问题来了，我充其量只是一名动画师，而且对代码知之甚少……我在哪里插入这个“playEmptySound”代码？

我已经发布了 Flash 推出的 2 个文件，HTML 和 JS 对此的任何帮助将不胜感激。

这是Flash CC生成的JS动画

(function (lib, img, cjs) 

var p; // shortcut to reference prototypes

// library properties:
lib.properties = 
    width: 550,
    height: 400,
    fps: 15,
    color: "#FFFFFF",
    manifest: [
        src:"audio/moo.mp3", id:"moo"
    ]
;



// symbols:



(lib.triangle = function() 
    this.initialize();

    // Layer 1
    this.shape = new cjs.Shape();
    this.shape.graphics.f("#6600FF").s().p("AolIlIIJxKIJBRKg");
    this.shape.setTransform(55,55);

    this.addChild(this.shape);
).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(0,0,110,110);


(lib.square_btn = function() 
    this.initialize();

    // Layer 1
    this.shape = new cjs.Shape();
    this.shape.graphics.f("#FF0000").s().p("AnkHlIAAvJIPJAAIAAPJg");
    this.shape.setTransform(48.5,48.5);

    this.addChild(this.shape);
).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(0,0,97,97);


(lib.blue_btn = function(mode,startPosition,loop) 
    this.initialize(mode,startPosition,loop,);

    // timeline functions:
    this.frame_2 = function() 
        playSound("moo");
    

    // actions tween:
    this.timeline.addTween(cjs.Tween.get(this).wait(2).call(this.frame_2).wait(1));

    // Layer 1
    this.shape = new cjs.Shape();
    this.shape.graphics.f().s("#009900").ss(1,1,1).p("AGQAAQAAClh2B1Qh1B2ilAAQikAAh2h2Qh1h1AAilQAAikB1h2QB2h1CkAAQClAAB1B1QB2B2AACkg");
    this.shape.setTransform(40,40);

    this.shape_1 = new cjs.Shape();
    this.shape_1.graphics.f("#0066FD").s().p("AkaEaQh1h1AAilQAAikB1h2QB2h1CkAAQClAAB1B1QB2B2AACkQAAClh2B1Qh1B2ilAAQikAAh2h2g");
    this.shape_1.setTransform(40,40);

    this.timeline.addTween(cjs.Tween.get().to(state:[t:this.shape_1,t:this.shape]).to(state:[t:this.shape_1,t:this.shape],2).wait(1));

).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-1,-1,82,82);


(lib.background = function() 
    this.initialize();

    // Layer 1
    this.shape = new cjs.Shape();
    this.shape.graphics.f("#666666").s().p("EgsXAgMMAAAhAXMBYvAAAMAAABAXg");
    this.shape.setTransform(284.1,206.1);

    this.addChild(this.shape);
).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(0,0,568.2,412.1);


(lib.sound_mc = function(mode,startPosition,loop) 
    this.initialize(mode,startPosition,loop,);

    // timeline functions:
    this.frame_0 = function() 
        /* Stop at This Frame
        The  timeline will stop/pause at the frame where you insert this code.
        Can also be used to stop/pause the timeline of movieclips.
        */

        this.stop();

        /* Click to Go to Frame and Play
        Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and continues playback from that frame.
        Can be used on the main timeline or on movie clip timelines.

        Instructions:
        1. Replace the number 5 in the code below with the frame number you would like the playhead to move to when the symbol instance is clicked.
        2.Frame numbers in EaselJS start at 0 instead of 1
        */

        this.square_btn.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_2.bind(this));

        function fl_ClickToGoToAndPlayFromFrame_2()
        
            this.gotoAndPlay(1);
        
    
    this.frame_2 = function() 
        playSound("moo");
    

    // actions tween:
    this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(2).call(this.frame_2).wait(58));

    // square
    this.square_btn = new lib.square_btn();
    this.square_btn.setTransform(48.5,48.5,1,1,0,0,0,48.5,48.5);
    new cjs.ButtonHelper(this.square_btn, 0, 1, 1);

    this.timeline.addTween(cjs.Tween.get(this.square_btn).to(y:210.5,33).wait(27));

).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(0,0,97,97);


// stage content:



(lib.moo_button = function(mode,startPosition,loop) 
    this.initialize(mode,startPosition,loop,);

    // timeline functions:
    this.frame_0 = function() 
        /* Stop at This Frame
        The  timeline will stop/pause at the frame where you insert this code.
        Can also be used to stop/pause the timeline of movieclips.
        */

        this.stop();

        /* Click to Go to Frame and Play
        Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and continues playback from that frame.
        Can be used on the main timeline or on movie clip timelines.

        Instructions:
        1. Replace the number 5 in the code below with the frame number you would like the playhead to move to when the symbol instance is clicked.
        2.Frame numbers in EaselJS start at 0 instead of 1
        */

        this.blue_btn.addEventListener("click", fl_ClickToGoToAndPlayFromFrame.bind(this));

        function fl_ClickToGoToAndPlayFromFrame()
        
            this.gotoAndPlay(1);
        
    

    // actions tween:
    this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(50));

    // Layer 2
    this.triangle = new lib.triangle();
    this.triangle.setTransform(377,178,1,1,0,0,0,55,55);

    this.timeline.addTween(cjs.Tween.get(this.triangle).wait(50));

    // Layer 1
    this.blue_btn = new lib.blue_btn();
    this.blue_btn.setTransform(85,203,1,1,0,0,0,40,40);
    new cjs.ButtonHelper(this.blue_btn, 0, 1, 2);

    this.timeline.addTween(cjs.Tween.get(this.blue_btn).to(x:455,49).wait(1));

    // Layer 4
    this.sound_mc = new lib.sound_mc();
    this.sound_mc.setTransform(220.6,84.5,1,1,0,0,0,48.5,48.5);

    this.timeline.addTween(cjs.Tween.get(this.sound_mc).wait(50));

    // Layer 3
    this.instance = new lib.background("synched",0);
    this.instance.setTransform(278.1,202.1,1,1,0,0,0,284.1,206.1);

    this.timeline.addTween(cjs.Tween.get(this.instance).wait(50));

).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(269,196,568.2,412.1);

)(lib = lib||, images = images||, createjs = createjs||);
var lib, images, createjs;

这是从 Flash CC 生成的 HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>moo_button-tringle2</title>

<script src="script/easeljs-0.7.1.min.js"></script>
<script src="script/tweenjs-0.5.1.min.js"></script>
<script src="script/movieclip-0.7.1.min.js"></script>
<script src="script/preloadjs-0.4.1.min.js"></script>
<script src="script/soundjs-0.5.2.min.js"></script>
<script src="moo_button-tringle2.js"></script>

<script>
var canvas, stage, exportRoot;

function init() 
    canvas = document.getElementById("canvas");

    var loader = new createjs.LoadQueue(false);
    loader.installPlugin(createjs.Sound);
    loader.addEventListener("complete", handleComplete);
    loader.loadManifest(lib.properties.manifest);


function handleComplete() 
    exportRoot = new lib.moo_button();

    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot);
    stage.update();
    stage.enableMouseOver();

    createjs.Ticker.setFPS(lib.properties.fps);
    createjs.Ticker.addEventListener("tick", stage);


function playSound(id, loop) 
    createjs.Sound.play(id, createjs.Sound.INTERRUPT_EARLY, 0, 0, loop);

</script>
</head>

<body onload="init();" style="background-color:#D4D4D4">
    <canvas id="canvas"   style="background-color:#FFFFFF"></canvas>
</body>
</html>

【参考方案1】：

OJay 的回答是我最初会尝试的。我唯一会尝试的另一件事是，在您的 function handleComplete() 内部，类似：

function handleComplete() 
    exportRoot = new lib.moo_button();

    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot);
    stage.update();
    stage.enableMouseOver();

    createjs.Ticker.setFPS(lib.properties.fps);
    createjs.Ticker.addEventListener("tick", stage);

    var listener = function() 
        createjs.WebAudioPlugin.playEmptySound();
        window.removeEventListener('touchstart', listener);
    ;
    window.addEventListener('touchstart', listener);

¯\_(ツ)_/¯

【讨论】：

这个答案比我的好，应该改用。

感谢穆恩斯彭和奥杰。我们刚刚尝试过，但仍然没有运气:( 我们将继续尝试和调整设置

【参考方案2】：

您需要将其插入 lib.moo_button 函数 fl_ClickToGoToAndPlayFromFrame。它应该是这样的：

function fl_ClickToGoToAndPlayFromFrame()

  if(createjs.WebAudioPlugin.context != null) 
    createjs.WebAudioPlugin.playEmptySound();
  
  this.gotoAndPlay(1);

如果您不确定首先按下哪个按钮，您可能需要将其应用于所有按钮，但缺点是代码将在每次按下按钮时运行。在 Flash 中编码并不是解决此类问题的最佳解决方案，但可以完成工作。

希望对您有所帮助。

【讨论】：

谢谢，这些都不起作用。实际上，是的，它们在 iPad 和 iPhone 的“浏览器”中工作，但我在 ePub3 中使用这些。声音在 ePub 中的其他任何地方都能正常播放，但在 iPad/iPhone 中。

WebView 很棘手。如果 ePub 基于 Cordova，您可以使用最新的 SoundJS-Next 尝试新的 CordovaAudioPlugin。 Web 音频在 Web 视图中存在问题，因为它需要 xhr 来加载无法加载本地文件的音频。您可以强制 HTMLAudioPlugin 避免此问题：createjs.Sound.registerPlugins([HTMLAudioPlugin]);