#TECH

How to Play External Sound with Flash or External Interface?

Flash with ExternalInterface
Flash Logo

 

Playing sound on web app is a cool engagement tool, in one of the recent projects we used same. We tried sound testing to see if the speakers on the system on which our web-app is being accessed can work.So I used different jquery plugins(like ion-sound etc) to achieve this but it was not working because of various browser incompatibilities, not all plugins work on all browsers. In the end, we took a call to go back to flash to solving this problem.

Through this post I would elaborate how to play an external sound clip with flash and jquery using the flash ExtenalInterface API. and  ExternalInterface allows the Actionscript API to communicate with javascript API.

playsound.html

We created a button which is used to play the sound along with one div in which we will embed the flash file in to create the sound that needs to be played.

<html>

<head>

<script src="jquery-1.10.2.min.js"></script>

<script src="swfobject.js"></script>

<script type="text/javascript" src="soundplay.js"></script>

</head>

<body>

// button to play the sound

<button id="playSoundbutton">Play Sound</button>

// div to embedd the flah object

<div id="flash_embedd_div">

</body>

</html>

Flash file code

Create a new actionscript 3.0 file in adobe flash professional and open the actions of this file by clicking F9 or clicking windows and then choose actions from the dropdown.

Now add the following code in the actions panel:

import flash.media.Sound;

import flash.net.URLRequest;

import flash.external.ExternalInterface;

import flash.utils.setTimeout;

import flash.utils.setInterval;

import flash.events.Event;

import flash.events.TimerEvent;

import flash.system.Security;

var jsReady:Boolean = false;

var mySound:Sound;

if(ExternalInterface.available) {

try {

if(checkJsReady()) {

setUpCallBacks();

}

else {

var jsPollTimer:Timer = new Timer(1000,0);

jsPollTimer.addEventListener(TimerEvent.TIMER, timerHandler);

jsPollTimer.start();

}

}

catch(event:Security) {

trace("security error");

}

catch(event:Error) {

trace("Error");

}

}

else {

trace("unable to play sound");

}

function loadSound(url:String):void {

mySound = new Sound();

mySound.load(new URLRequest(url));

}

 

function playSound():void {

mySound.play();

}

function checkJsReady():Boolean {

jsReady = ExternalInterface.call("isJsReady");

return jsReady;

}

function timerHandler(event:TimerEvent):void{

if(checkJsReady()) {

Timer(event.target).stop();

setUpCallBacks();

}

}

function setUpCallBacks():void {

ExternalInterface.addCallback("playtestsound",playSound);

ExternalInterface.addCallback("loadSoundFromUrl",loadSound);

ExternalInterface.call("callBacksReady");

}

Now save the file and export it to creating the swf file, copy this swf in the same directory in which you have your html file.

Lets understand the actionscript code that we have written.

First, try to find out whether browsers support the ExternaInterface API, though most of the browsers including IE 6 and above support ExternalInterface.

The Externalinterface provides us with two functions “call” and “addCallback” to interact with the javascript code. Let me elaborate the two functions:

We can call any javascript function from our flash file by using the ExternalInterface.call(“functionname”) function where “functionname” will be the function defined in the javascript file soundplay.js, make sure the function is defined on a global level.

Call any function defined within the flash file from the javascript code used, the ExternalInterface.addCallback(“javascriptfunctionname”,actionscriptfunctionName) methon – here the first parameter is the functionname for javacript to call on the flash object and the second parameter is the function defined within the flash file which it calls .

soundplay.js file

var jsReady = false;

var soundUrl = "test_sound.mp3"// path to the sound clip;

$(document).ready(function(){

var flashvars = {};

var params = {

menu: "false",

scale: "noScale",

allowFullscreen: "false",

allowscriptaccess: "always",

};

var attributes = {

id: 'flash_embedd_div',

name:'flash_embedd_div'

};

swjobject.embedd(

"playsound.swf",

attributes.id, 10,10, "11",

"expressInstall.swf",

flashvars, params, attributes

);

$j("#playSoundbutton").on("click", function(){

play();

});

(function pageInit() {

jsReady = true;

})();

function isJsReady() {

return jsReady;

};

})

function play(){

document.getElementById('flash_embedd_div').playtestsound();

};

function callBacksReady() {

document.getElementById('flash_embedd_div').loadSoundFromUrl(soundUrl);

};

First we need to embed the swf file created, for this we can use the swfobject.js by calling the swfobject.embedd, then load the swf flash object. Make sure that the id and name within which the attribute’s object and the div in which the swf is embedded are same.

We add a handler for ‘click of the button’, within the handler “play” we call the “playtestsound” function on the flash object .

We define a self-calling anonymous function “pageinit” which will tell that the js has loaded.

As soon as the swf is loaded, call the checkJsReady function which in turn calls the function in javascript with the help of ExternalInterface api. This function tells whether the javascript is fully loaded or not.

If its not, then we can keep on calling the function for one minute by creating a timer and calling the javascript function from within. In the mean time, we can call the pageInit function which sets on the jsReady variable. As the js gets ready in a3 we can start setting up all callbacks by calling the setUpCallBacks function. The function playtestsound in js file is associated with playSound function, so whenever we call the playtestsound function on the loaded flash object the function playSound is called.

Same happens for function loadSoundFromUrl and loadSound. When the function callBacksReady is called which loads the sound with the help of as3’s loadSound function, within this function we can load a sound file from a resource location. Now whenever we click the button playSoundbutton we can make a call to the function play from js, which in turns calls the playSound function in as3 in turn calls the play function on the sound object.

Hope you liked it and understood it. Happy Learning!!!!