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!
2 answers
solution1
1 ACCPTED 2011-12-27 03:58:48
To communicate between JavaScript and ActionScript, you can use the ExternalInterface API:
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."
solution2
1 2011-12-28 08:42:54
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.