Question

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

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

我假设我必须'监听'AS3中的事件，但是如何在JS中参与这些事件以及对AS3中的事件做出反应的任何指示都将是一个很大的帮助！

Answer 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/

Answer 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>

JavaScript / jQuery Flash AS3交互

2 个答案: