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

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

voiceFamily style property

Browser support:

Specifies or returns the type of voice to use as speak control.

Syntax:

object.voiceFamily;

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

This property is read/write.

CSS page for this property: voice-family

Possible values:

The type of this property is string.

One of the following values:

•

This value can be used arbitrary times (use the , character to separate them)

•

Values in this order (use the space character to separate them):

One of the following values:

•

user specific voice

•

Values in this order (use the space character to separate them):

One of the following values:

•	child
•	old
•	young

possible but not necessary; left to personal choice

One of the following values:

•	female
•	male
•	neutral

voice characteristic (positive integer)

•

inherit

Description of values:

child

Child voice.

female

Female voice.

inherit

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

male

Male voice.

neutral

Neutral voice.

old

Old voice.

user specific voice

String that identifies a specific voice on the user's system.

voice characteristic (positive integer)

Integer that indicates the number of the voice characteristic in the order of the given generic-voice.

young

Young voice.

Default: young male 0.

Example HTML code 1:

This example illustrates the use of the voice-family property:

<head>
    <style>
        .example  {
            voice-family: "Louis Amstrong", male;
        }
    </style>
</head>
<body>
    <div class="example">What a wonderful world</div>
</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 voiceFamily property in JavaScript:

<head>
    <script type="text/javascript">
        function ChangeVoiceFamily () {
            var selectTags = document.getElementsByTagName ("select");

            var familyValue = "";
            for (i = 0; i < selectTags.length; i++) {
                // Returns the index of the selected option
                whichSelected = selectTags[i].selectedIndex;

                // Concatenates the text of the selected option
                familyValue += selectTags[i].options[whichSelected].text + " ";
            }

            var div = document.getElementById ("myDiv");
 
            if ('voiceFamily' in div.style) {
                div.style.voiceFamily = familyValue;
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <div id="myDiv">Select this text and use context menu</div>

    <br />
    Change the voice-family property:
    <br />
    <select size="3" onchange="ChangeVoiceFamily ();">
        <option />child
        <option selected="selected" />young
        <option />old
    </select>
    <select size="2" onchange="ChangeVoiceFamily ();">
        <option />female
        <option selected="selected" />male
    </select>
</body>