~alcinnz/rhapsode

ref: 10f5b0bbc4d28d523ef27ac89d12805b6e8a5d11 rhapsode/docs/CSS-Speech-Tutorial.md -rw-r--r-- 3.6 KiB
10f5b0bb — Adrian Cochrane Populate changelog. 4 years ago

Wanted: Guidance on creating a great audio theme. Maybe based on voice acting or public speaking theory. Wanted: Written descriptions of the various outcomes of properties. I.e, how does speak-as: spell-out differ from normal.

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
  • never
#speak-as

Usage: speak-as: spell-out

Valid options:

  • spell-out
  • digits
  • literal-punctuation
  • no-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

Wanted: denote syntax and properly format list

#voice-family

Usage: voice-family: OPTIONS

  • genders: male female neutral
  • ages: child young old

#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

Usage: voice-volume: medium -10dB

Valid keywords:

  • silent
  • x-soft
  • soft
  • medium
  • loud
  • x-loud
  • medium
#voice-rate

Usage: voice-rate: medium -10%

Valid keywords:

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

Usage: voice-pitch: medium +10%

Valid keywords:

  • x-low
  • low
  • medium
  • high
  • x-high
#voice-stress

Usage: voice-stress: moderate

Valid keywords:

  • strong
  • moderate
  • none
  • reduced

#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

Usage: pause: before weak 50ms

Valid keywords:

  • x-weak
  • weak
  • medium
  • `strong

#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.