JavaScript / jQuery Flash AS3 交互答案

【问题标题】：JavaScript / jQuery Flash AS3 interactionJavaScript / jQuery Flash AS3 交互
【发布时间】：2012-01-28 04:53:34
【问题描述】：

我正在使用 JavaScript (jQuery) 和 HTML5 设计一个音乐播放器，并使用 Flash AS3 进行回退。基本上我想要做的是能够单击 HTML 控制元素并让它们与 Flash 交互，以便播放/暂停和跳过播放列表中的曲目（由 JavaScript 读取的播放列表 JSON 文件，将文件 ID 传递给 AS3，AS3 读取另一个 JSON 文件来获取 URL，然后播放音频）

这使我能够仅使用 Flash 播放音频，因此无论 HTML5 浏览器支持如何，都可以创建相同的用户体验。

我假设我将不得不“监听”AS3 中的事件，但是任何关于如何在 JS 中参与这些事件并对 AS3 中的事件做出反应的指针都会有很大帮助！

【问题讨论】：

我假设您已经在 Google 上搜索过“从 javascript 调用 flash 函数”？
是的，我在这里找到了一个链接已过期的页面，然后我在这里搜索并没有找到任何似乎相关的内容。然而，我在没有互联网的情况下使用手机进行搜索，并在本地主机服务器上离线构建。
@Andy Ray 既然可以在这里提问，为什么还要用谷歌搜索呢？

标签： javascript jquery json flash actionscript-3

【解决方案1】：

要在 JavaScript 和 ActionScript 之间进行通信，您可以使用 ExternalInterface API：

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/external/ExternalInterface.html

作为您想做的替代方案，您可以使用 SoundManager 2 播放音频，并使用 JavaScript 进行所有您自己的编程：

“使用 HTML5 和 Flash，SoundManager 2 提供可靠的跨平台单个 JavaScript API 下的音频。”

http://www.schillmania.com/projects/soundmanager2/

【讨论】：

谢谢你，你把我从混乱中救了出来！ ExternalInterface 也很容易使用！

【解决方案2】：

我对这个问题有一个答案，但在我完成之前就接受了一个答案。无论如何，它是：

Main.as（文档类）：

package 
{
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.external.ExternalInterface;
    import flash.media.Sound;
    import flash.media.SoundChannel;
    import flash.net.URLRequest;

    public class Main extends Sprite 
    {
        private var _sound:Sound;
        private var _soundChannel:SoundChannel;

        public function Main():void 
        {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);

        }// end function

        private function init(e:Event = null):void 
        {
            removeEventListener(Event.ADDED_TO_STAGE, init);

            if (ExternalInterface.available)
            {
                ExternalInterface.addCallback("loadSound", loadSound);
                ExternalInterface.addCallback("stopSounds", stopSounds);

            }// end if

        }// end function

        private function loadSound(url:String):void
        {
            _sound = new Sound();
            _sound.load(new URLRequest(url));
            if (_soundChannel) _soundChannel.stop();
            _soundChannel = _sound.play();

        }// end function

        private function stopSounds():void
        {
            _soundChannel.stop();

        }// end function

    }// end class

}// end package

sounds.json：

{ "sounds" : {
    "sound": [
        { "name": "Sound 1", "url": "sounds/sound1.mp3" },
        { "name": "Sound 2", "url": "sounds/sound2.mp3" },
        { "name": "Sound 3", "url": "sounds/sound3.mp3" }
    ]
}}

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>SoundPlayer</title>
    <meta name="description" content="" />
    <script src="js/swfobject.js"></script>
    <script src="js/jquery.min.js"></script>
    <script>
        var flashvars = {
        };
        var params = {
            menu: "false",
            scale: "noScale",
            allowFullscreen: "true",
            allowScriptAccess: "always",
            bgcolor: "",
            wmode: "direct" // can cause issues with FP settings & webcam
        };
        var attributes = {
            id:"SoundPlayer"
        };
        swfobject.embedSWF(
            "SoundPlayer.swf", 
            "altContent", "0", "0", "10.0.0", 
            "expressInstall.swf", 
            flashvars, params, attributes);
    </script>
    <style>
        html, body { height:100%; overflow:hidden; }
        body { margin:0; margin-top:25px; }
        .button { float:left; margin-left:25px; width:100px; height:60px;
                  background-color:#fafafa; border: 1px solid #e1e1e1;
                  font-size:15px; font-family: Arial; text-align:center; padding-top:40px;
                  text-decoration: none; color: #323232; } 
    </style>
</head>
<body>
    <script>
    $(document).ready(function() {

        var soundPlayer = $("#SoundPlayer").get(0);

        $.getJSON('json/sounds.json', function(data) {

            $.each(data.sounds.sound, function(i, sound) {

                $("<a href=\"#\" class=\"button\">" + sound.name + "</a>")
                .click(function () { soundPlayer.loadSound(sound.url); })
                .appendTo("body");

            });

            $("<a href=\"#\" class=\"button\">Stop Sounds</a>")
            .click(function() { soundPlayer.stopSounds(); })
            .appendTo("body");

        });

    });
    </script>
    <div id="altContent">
        <h1>SoundPlayer</h1>
        <p><a href="http://www.adobe.com/go/getflashplayer">Get Adobe Flash player</a></p>
    </div>
</body>
</html>

【讨论】：