JavaScript / jQuery Flash AS3 interaction

Question

I am designing a music player using JavaScript (jQuery) and HTML5, with Flash AS3 to fall back. Basically what I want to do is to be able to click HTML control elements and have them interact with the flash in order to play/pause and skip tracks in the playlist (playlist JSON file read by JavaScript, passes file ID to AS3, AS3 reads another JSON file to get URL, then plays audio)

This enables me to only use the Flash to play the audio, thus creating the same user experience regardless of HTML5 browser support.

I'm assuming I will have to 'listen' for events in AS3, however any pointers in how to engage these events in JS and react to the events in AS3 would be a great help!

I'm assuming you've already Googled for "call flash function from javascript"? — Andy Ray
– Andy Ray, Commented Dec 26, 2011 at 22:42
Yes, I got a page here which the link had expired on, then I searched here and didn't find anything that seemed relevant. I am using my phone to search while I have no Internet however, and am building this offline on a localhost server. — Andrew Willis
– Andrew Willis, Commented Dec 26, 2011 at 22:47

Lars Blåsjö · Accepted Answer · 2011-12-27 03:58:48Z

1

To communicate between JavaScript and ActionScript, you can use the ExternalInterface API:

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

As an alternative for what you want to do, you could use SoundManager 2 to play the audio, and do all of your own programming in JavaScript:

"Using HTML5 and Flash, SoundManager 2 provides reliable cross-platform audio under a single JavaScript API."

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

answered Dec 27, 2011 at 3:58

Lars Blåsjö

6,1372 gold badges21 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andrew Willis Over a year ago

Thankyou, You have saved me from turmoil! It's really easy to use the ExternalInterface too!

TM_ · Accepted Answer · 2011-12-28 08:42:54Z

I had an answer for this question but then an answer was accepted before I finished it. Anyway here it is:

Main.as(document class):

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>

Collectives™ on Stack Overflow

JavaScript / jQuery Flash AS3 interaction

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related