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

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

cueBefore style property

Browser support:

Retrieves the sound file to play before an element.

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.cueBefore;

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

This property is read-only.

CSS page for this property: cue-before

Possible values:

The type of this property is string.

One of the following values:

url(URI)

Where URI specifies the location of the sound file.

inherit

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

none

No sound file is specified.

Default: none.

Example HTML code 1:

This example illustrates the use of the cue-before property:

<head>
    <style>
        .voice {
            cue-before: url("budgie.wav");
            cue-after: 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 property 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>