upper left corner
upper right corner
header end left header end right Flash Audio
Daryl Croke

Accessible Flash Streaming Audio

page 1 2 3 4 5 6

Exiting the SWF

The next step is to provide an exit button. While it is easy for users to tab into an embedded Flash player there is no built in way for them to exit the player. Flash players can trap keyboard users within the movie. Without using a mouse there is no way to escape. To work around this problem, I created an exit button in the SWF that requires the browser to change focus from the embedded player to a HTML form element in the web page. This technique allows the user to tab out of the embedded Flash movie and back into the web page. I placed the following script on an exit button in Flash.

getURL("javascript:document.form1.skip.focus()");

When pressed, the JavaScript code in the getURL action changes the focus of the browser from the embedded Flash player to a button called skip inside a form called form1. Place the form after the SWF in the HTML document and the user can then tab to the next link in the document. Make sure you name all the form elements correctly or else JavaScript will not be able to change focus from the Flash player to the HTML form and the user cannot escape the player.

<form name="form1" method="post" action="">
	<input type="button" id="skip" value="" />
</form>

There is no action for the form or value for the button as the aim is to make the form invisible.

For greater flexibility I tracked keyboard events using the key object method within an enter frame function, _root.onEnterFrame. This method avoids attaching a script to an invisible button on the stage. Used in conjunction with Key.isDown(keycode) developers can track the whole keyboard for key input. In the example below pressing "s" will stop the audio.

_root.onEnterFrame = function() {
	if (key.isDown(83)) { //s = stop;
		mySound.stop();
		playing = false;
	}
	// other keys etc
}

To help non-visual users, I added a single guitar note audio cue in the sound console to indicate that the audio is fully loaded. Flash then takes the user to another console with expanded features such as pause/resume and fast-forward.

if (total_bytes > 100) {
	// displays percentage loaded
	display = Math.Floor(loaded_bytes/total_bytes*100);
	// when fully loaded "ding sounds" goes to next frame
	if (display== 100) {
		playing = false;
		myQue.start(0);// play que sound
		gotoAndPlay(4);// go to full console
	}
}

Audio cues can greatly aid the interaction with screen readers. Developers however should avoid rollover sounds placed on buttons. These can get in the way of the button’s accessibility label. A multi-channel sound card should be able to play both sounds together but users could get confused when the Screen reader describes the button and the Flash rollover sound simultaneously.

page 1 2 3 4 5 6

upper left corner
upper right corner
header end left
header end right
Sponsors
 
header end left
header end right
Contribute
  • Contribute an Article
    Demonstrate your professional skills and knowledge to the community.
  • Become a Sponsor
    Promote your service to Sonify's community of professional content and application developers.
  • Submit News
    Help keep the community informed about industry developments.
header end left
header end right
About Sonify.org

Sonify.org is a community resource where Developers can unite with the common goals of adding interactive audio to the Web, Wireless and Digital Devices as well as advancing the development of the underlying interactive audio technologies. Read more.