skip to content W3C SVG

34. User Control of Audio

Let user control the audio

If audio plays longer than three seconds, either only play the audio on user request or allow it to be stopped easily using a screen reader. Allow users to restart and replay any audio that provides information.
Note: This includes multimedia presentations with audio.

Rationale

Screen reader users need to be able to control when audio plays so that they can hear and focus either on what their screen reader is speaking or on the audio. When audio begins automatically, it can be difficult or impossible for a screen reader user to navigate to a stop button. Similarly, screen reader users may miss audio that plays just after the page loads, as their screen reader may be speaking a summary of what’s on the page, such as, “Page has 3 Landmarks, 23 headings, and 212 links.”

Audio can also interfere with voice recognition software. If audio begins automatically and can’t be stopped without navigating to a stop button, users with mobility impairment who use voice recognition to control the computer may not be able to turn off the audio.

Techniques

Audio that does not Start Automatically

Ideally, do not have the audio play automatically and provide a play button with a stop or pause button near (or replacing) the play button.

Making Audio Easy to Stop

There are a few options for making audio easy to stop:

  • Escape - If the audio begins automatically, allow the escape key to stop the audio. Be sure the escape key will work without the user having to move focus to any controls or to a video. Be sure to only capture escape once to stop the audio. When the audio is not playing, the escape key must have its default behavior.
  • A stop or pause button at the top of the page - If audio begins automatically when a page or screen is loaded, include a Stop Audio button at the very beginning of that page or screen. Be sure this button is at the very beginning of the reading order. See Pearson Guideline 4 for more information on reading order.
  • Moving focus to the stop or pause button - In some cases, it is okay to use scripting to move the focus to the stop or pause button if audio starts automatically. For example, if a video plays while you are advancing through a learning module and users know what to expect, you might place focus on the pause button right when the page loads.

Flash & Flex

Ideally, Flash content should not use audio that plays automatically, but, when it does, the following must be implemented:

  • Interactive controls that allow the audio to be paused and resumed.
  • Global shortcuts that allow the user to pause and resume the audio.

Note that while implementing the shortcuts alone would meet this guideline, implementing both is recommended.

Interactive controls can be as simple as basic buttons, but they can also be custom components (as long as these components are themselves accessible).

For global keyboard shortcuts, it’s important to keep in mind that key event handlers defined within Flash are effective only within the Flash movie’s scope. In other words, Flash-based keyboard shortcuts work only when the current keyboard focus is placed inside the Flash movie.

To resolve this, you can add JavaScript-based key handlers to the HTML document containing the Flash movie. The JavaScript-based event handlers can then call the Flash-based event handlers, using Flash’s ExternalInterface class. With this approach, keyboard shortcuts will work both inside and outside the Flash movie, ensuring that the user is always able to turn the sound off.

Enhancing Your Solution with Screen Reader Detection

Flash has the capability to check whether an MSAA client (which could be a screen reader) is currently running. Using this capability, you can prevent audio from playing automatically for screen reader users.

The code snippet below shows how to set the autoPlay property of an existing FLVPlayback instance to false. This disables the entire movie (including audio) from playing automatically for screen reader users.


import flash.accessibility.Accessibility;
import flash.system.Capabilities;
import fl.video.FLVPlayback;



var myPlayer:FLVPlayback;
// Capabilities.hasAccessibility
// indicates whether the current operating system supports
// MSAA (which basically means that the OS is Windows based)
// Accessibility.active
// indicates whether an MSAA client is currently active



if (Capabilities.hasAccessibility &&
Accessibility.active) {
myPlayer.autoPlay = false;
}

Note: The Accessibility.active check does not guarantee that all screen reader types are detected (it specifically checks for MSAA clients). This solution should only be used as a last resort, e.g. when it’s not possible to disable automatically playing audio for all users or make this behavior configurable by users.

Example with Keyboard Shortcuts, Toggle Button, and Screen Reader Detection

The code example below shows a sample class that automatically starts playing music. The following features are included in this sample:

  1. A button is provided that allows users to stop the music.
  2. Shortcuts are defined in both the Flash movie as well as in the HTML document, allowing the user to pause / play (p), stop (esc), and restart ® the music in either the Flash movie or the HTML content.
  3. The demo checks for the presence of a running screen reader and will not play the music automatically if one is detected.

The code includes inline comments to highlight each feature.

Note: This example uses a third party class for handling audio called ‘SoundManager.’ (Open Web page about Sound Manager in a new window.) This specific class is not required for this technique and is only used to simplify the code example below.

ActionScript 3.0 Code:


import SoundDemo;
// Get an instance of the SoundDemo class
// (specifically made for this demo)
// The string determines which music will play
var mySoundDemo:SoundDemo = new SoundDemo(“http://freepd.com/Classical/Allemande.mp3");
this.addChild(mySoundDemo);
SoundDemo Class (ActionScript 3.0 Code): package {
import fl.controls.Button;
import fl.accessibility.ButtonAccImpl;
import flash.accessibility.Accessibility;
import flash.system.Capabilities;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.external.ExternalInterface;
import flash.events.KeyboardEvent;
import com.reintroducing.sound.SoundManager;



public class SoundDemo extends Sprite {
// Private variables
private var myButton:Button;
private var mySoundManager:SoundManager;
// Constructor
public function SoundDemo(mp3String):void {
if (ExternalInterface.available) {
//Make public methods in this class callable by JavaScript
ExternalInterface.addCallback(“toggleMusic”, this.toggleMusic);
ExternalInterface.addCallback(“pauseMusic”, this.pauseMusic);
ExternalInterface.addCallback(“restartMusic”, this.restartMusic);
}
//load the music using the third party SoundManager class
mySoundManager = SoundManager.getInstance();
mySoundManager.addExternalSound(mp3String, “demoMusic”);
// create the button for pausing the music
ButtonAccImpl.enableAccessibility();
myButton = new Button();
myButton.x = myButton.y = 10;
myButton.width = 150;
myButton.addEventListener(MouseEvent.CLICK, clickHandler);
this.addChild(myButton);
myButton.label = “Start music”;
this.addEventListener(KeyboardEvent.KEY_UP, keyUpHandler);
if (!Capabilities.hasAccessibility || !Accessibility.active) {
// No screen reader detected,
// automatically start playing the music
mySoundManager.playSound(“demoMusic”);
myButton.label = “Pause music”;
}
}
public function toggleMusic() {
if (!mySoundManager.isSoundPaused(“demoMusic”)) {
pauseMusic();
}
else {
playMusic();
}
}
public function playMusic():void {
mySoundManager.playSound(“demoMusic”);
myButton.label = “Pause music”;
}
public function pauseMusic():void {
mySoundManager.pauseSound(“demoMusic”);
myButton.label = “Resume music”;
}
public function restartMusic():void {
mySoundManager.stopSound(“demoMusic”);
playMusic();
myButton.label = “Pause music”;
}
private function clickHandler(e:MouseEvent):void {
toggleMusic();
}
// global key event handlers for manipulating music playback
// These shortcuts only work when keyboard focus is inside
// the Flash movie. See HTML Code below for solution.
private function keyUpHandler(e:KeyboardEvent):void {
trace (e.keyCode);
switch (e.keyCode) {
case 27: // Esc key
    pauseMusic();
    break;
case 80: // P key
    toggleMusic()
    break;
case 82: // R key
    restartMusic();
    break;
}
}
}
}

HTML Code:


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=“http://www.w3.org/1999/xhtml" lang=“en” xml:lang=“en”>
<head>
<title>audio</title>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<style type=“text/css” media=“screen”>
</style>
<script type=“text/javascript” src=“swfobject.js”></script>
<script type=“text/javascript”>
// Use SWFObject to dynamically load the Flash movie.
// The “mySwf” id can be used later to reference
// methods in the Flash movie.



swfobject.embedSWF(“audio.swf”, “mySwf”, “200”, “200”, “8”);
window.onkeyup = keyUpHandler;



// This key up handler ensures that the shortcut keys for
// audio manipulation are also available in the entire
// web page, not just when focus is in the Flash content
function keyUpHandler(e) {
e = e || window.event;
var mySwf = document.getElementById(“mySwf”);
switch (e.keyCode) {
    // each of these Flash based methods were made
    // available to JavaScript through use of the
    // ExternalInterface.addCallback() method in
    // the Flash movie’s code.
    case 27: // Esc key
    mySwf.pauseMusic();
    break;
    case 80: // P key
    mySwf.toggleMusic();
    break;
    case 82: // R key
    mySwf.restartMusic();
    break;
}
}
</script>
</head>
<body>
<div id=“flashContent”>
<h1>Flash Automatic Sound Demo</h1>
<p>This page contains a Flash movie that
    automatically starts playing sound. Use the
    button below to stop or start the sound.
    Additionally, you can use the following shortcuts:</p>
<ul>
<li>esc: Stop Music</li>
<li>p: Pause / Play Music</li>
<li>r: Restart Music</li>
</ul>
<!– This fallback content will be replaced by swfobject
    when Javascript and Flash are supported:–>
<p id=“mySwf”>Flash needs to be installed for this
    example to work.
<a href=“http://get.adobe.com/flashplayer/">
    Get the Adobe Flash Player
</a>
</p>
</div>
</body>
</html>

Additional Details and Background Information (open in a new window/tab)

PowerPoint

PowerPoint automatically adds a control to start and pause the video or audio clip. By default the user can control when the content starts to play because it is configured to play when they click. Be sure to not select “Play automatically” so that the screen reader can read the content of the screen first.

Testing

Testing technique Description
Review Just review the page for any sound that starts automatically and continues for more than three seconds and for any sound that provides information.
Analysis Make sure any sound that plays automatically for more than three seconds can be stopped by pressing escape. Make sure any sound that provides information can be replayed.

Related Guidelines

WCAG 2.0 Level A - SC 1.4.2 Audio Control:

If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level. (Level A)