~alcinnz/rhapsode

ref: 484199606127617ae2b26e4e55cf94137571ddec rhapsode/docs/CSS-Speech-Tutorial.md -rw-r--r-- 4.7 KiB
48419960 — Adrian Cochrane Extract data for 'pseudolinks', exposing more features. 3 years ago

Wanted: Guidance on creating a great audio theme. Maybe based on voice acting or public speaking theory.

Rhapsode still lets you apply CSS styles to your webpages, but since it outputs audio rather than video it supports a different set of CSS properties. This page provides an overview of these properties.

#Should it be spoken?

You can use the speak property to determine whether an HTML element should be read aloud or not, and the speak-as property to determine how it reads digits and/or punctuation.

Setting speak: never is not the same as setting voice-volume: silent as the latter still takes up the same ammount of time as it would've to read the text aloud.

#Reference:

#speak

Usage: speak: always

Valid Options:

  • always - Yes, it should be read aloud. default
  • never - Skips over the element entirely, no time spent on it.
#speak-as

Usage: speak-as: spell-out

Valid options:

  • spell-out - announces each individual letter or digit.
  • digits - announces each individual digit.
  • literal-punctuation - announces any punctuation marks.
  • no-punctuation - Does not read any punctuation.

#The Voice

You can use the voice-family attribute to select a voice either by age/gender/variant or by it's name. Just like font-family this'll make a big difference to the "look" of your page.

#Reference

#voice-family

Usage: voice-family: child female

Specifies a comma-seperated list of voices, which can be specified by name (known to the text-to-speech engine) or age/gender/variant-number which it depicts. age/gender/number must be specified in that order, but only gender must be specified.

  • genders: male female neutral
  • ages: child young old. May also be specified as approximate age in years.

#Speaking Style

You can alter the voice you choose by varying it's volume, rate, pitch, range, and stress. Doing so helps people pay attention, especially if it reinforces the meaning of your text.

#Keywords & Offsets

All the speaking style properties provide keywords you can use instead of a number. In which case write a number after a keyword to represent an offset from that keyword.

#Reference

#voice-volume

How loud the sound is, either as keyword or in decibels.

Usage: voice-volume: medium -10dB

Valid keywords:

  • silent - no sound for this duration.
  • x-soft - quieter
  • soft
  • medium
  • loud
  • x-loud - louder
#voice-rate

How fast the sound is, as a keyword with optional percentage adjustment.

Usage: voice-rate: medium -10%

Valid keywords:

  • x-slow - slower
  • slow
  • medium
  • fast
  • x-fast - faster
#voice-pitch

How high or low the sound is, in (kilo)hertz or with percentage/semitone adjustment.

Usage: voice-pitch: medium +10%

Valid keywords:

  • x-low - lower pitch
  • low
  • medium
  • high
  • x-high - higher pitch
  • absolute - indicates the given value in (kilo)hertz should be used regardless of the inherited value.
#voice-range

By how much does the pitch of the sound change. Syntax matches voice-pitch.

#voice-stress

Usage: voice-stress: moderate

Valid keywords:

  • strong - more stress
  • moderate
  • none
  • reduced - less stress.

#Rests, Pauses, and Auditory Cues

On either end of your text you can place an audio cue to identify it, and on either end of those you can insert additional silence. If two silences are directly adjacent, the smaller one will be removed.

The inner pauses are called the element's rest and the outer ones are called it's pause.

The user agent stylesheet, for example, uses audio cues to indicate list bullets and links. And silence functions exactly like whitespace in a visual browser.

#Reference

Note: pause and rest mirror functionality Note: -before and -after are both offered by the api as well

#pause/rest

Usage: pause-before: weak 50ms

In seconds or milliseconds, or as keyword.

Valid keywords:

  • x-weak - less
  • weak
  • medium
  • strong - more
#cue

Usage: cue-after: url(censor.wav)

Specifies .wav file to play between the corresponding pause/rest by relative URL.

#Text Generation

Rhapsode supports (some of) the same text generation attributes as visual browsers, namely:

  • counter-reset
  • counter-increment
  • counter-set
  • content

Though more may be added in the future.

However unlike visual browsers you can apply the content property to the element itself to replace it's own children.