JavaScript / jQuery Flash AS3 interaction

JavaScript / jQuery Flash AS3 interaction

本文关键字：AS3 interaction Flash jQuery JavaScript      更新时间：2023-09-26

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

这使我能够只使用Flash播放音频，从而创建相同的用户体验，而不管HTML5浏览器支持。

我假设我将不得不"监听"AS3中的事件，但是任何关于如何在JS中参与这些事件并对AS3中的事件做出反应的指针将是一个很大的帮助!

要在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/

我对这个问题有一个答案，但是在我完成之前这个答案就被接受了。不管怎样，它是:

主要。(文档类): 

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>
相关文章：