In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > cue

cue style property

Browser support:

Retrieves the cue-before and cueAfter properties in a shorthand form in aural style sheets.

With the cueBefore and cueAfter properties you can specify sound files to play before and after an element.

If you want a pause before or after playing sound files, use the pause, pauseBefore, pauseAfter and rest, restBefore, restAfter properties.

Use the pauseBefore property for a pause immediately before, and the restBefore property for a pause immediately after playing the sound file specified with the cueBefore property.

Similarly, use the restAfter property for a pause immediately before, and the pauseAfter property for a pause immediately after playing the sound file specified with the cueAfter property.

Note: Unfortunately, the pauseBefore and restAfter properties currently do not work for sound files in Opera, and the pause, pauseBefore, pauseAfter and rest, restBefore, restAfter properties have some other bugs (do not work for several valid time values).

Syntax:

object.cue;

You can find the related objects in the Supported by objects section below.

This property is read-only.

CSS page for this property: cue

Possible values:

The type of this property is string.

One of the following values:

•

Any of the following values (use the space character to separate them, each value can be used only once):

•	<cue-before>
•	<cue-after>

•

inherit

Description of values:

cue-after

Retrieves the sound file to play after an element.

cue-before

Retrieves the sound file to play before an element.

inherit

Takes the value of this property from the computed style of the parent element.

Default: this property has no default value.

If only one sound file is specified, it affects both the cueBefore and cueAfter properties.

Example HTML code 1:

This example illustrates the use of the cue property:

<head>
    <style>
        .voice {
            cue: url("budgie.wav") url("bell.wav");
        }
    </style>
</head>
<body>
    Select all text on the page (CTRL+A), click with the right mouse button on the selected text 
    and select the speak menu item in the popup context menu.
    <span class="voice">
        The budgie.wav sound file has been played before this sentence. 
        The bell.wav sound file will be played after this sentence.
    </span>
    This is the last sentence.
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the cueBefore and cueAfter properties in JavaScript:

<head>
    <script type="text/javascript">
        function GetSoundFiles () {
            var voice = document.getElementById ("voice");
            if ('cue' in voice.style) {
                alert ("The sound file to play before:\n" + voice.style.cueBefore);
                alert ("The sound file to play after:\n" + voice.style.cueAfter);
            }
            else {
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body>
    Select all text on the page (CTRL+A), click with the right mouse button on the selected text 
    and select the speak menu item in the popup context menu.
    <span id="voice" 
        style='cue: url("budgie.wav") 
                    url("bell.wav");'>
        The budgie.wav sound file has been played before this sentence. 
        The bell.wav sound file will be played after this sentence.
    </span>
    This is the last sentence.
    <br /><br />
    <button onclick="GetSoundFiles ()">Get sound files</button>
</body>