speech-paragraph
v0.0.1
Published
A Web Component that enables the native paragraph HTML element to read out its text through Web Speech Synthesis
Downloads
3
Readme
speech-paragraph
A Custom Element that extends the native paragraph HTML element <p>
to enable it to read its text out loud using
Web SpeechSynthesis.
Usage:
<script type="module" src="/src/speech-paragraph.js"></script>
<p is="speech-paragraph">
This text will be read out loud.
</p>
In browsers that don't support extending native HTML elements, the element speech-paragraph
can be used:
<script type="module" src="/src/speech-paragraph.js"></script>
<speech-paragraph>
This text will be read out loud.
</speech-paragraph>
A play button will appear in the top-right corner of the paragraph. When pressed, the text of the paragraph will be read out loud and the play button will change into a pause button.
To cancel speaking instead of pausing, click outside the paragraph.
You can also select a portion of text inside the paragraph to play. In that case, the play button will appear at the start of the selection.
Selecting a language
The default language is US English, but you can specify the language with the lang
attribute which takes as value a
BCP 47 language tag.
For example: en-US
or simply en
.
<p is="speech-paragraph" lang="en-US">
<speech-paragraph lang="en-US">
Selecting a voice
For every language, the browser provides an array of available voices. A voice from this array can by chosen by specifying
its name
in the voice
attribute.
To get the array of available voices, get a reference to the element and inspect the voices
property. The easiest way
to do this is to click the element in the Elements panel of your browser's dev tools which will assign it to the special
$0
variable:
$0.voices
which will show the array of available voices like this:
0: SpeechSynthesisVoice {voiceURI: 'Alex', name: 'Alex', lang: 'en-US', localService: true, default: true}
1: SpeechSynthesisVoice {voiceURI: 'Fred', name: 'Fred', lang: 'en-US', localService: true, default: false}
2: SpeechSynthesisVoice {voiceURI: 'Samantha', name: 'Samantha', lang: 'en-US', localService: true, default: false}
3: SpeechSynthesisVoice {voiceURI: 'Victoria', name: 'Victoria', lang: 'en-US', localService: true, default: false}
4: SpeechSynthesisVoice {voiceURI: 'Google US English', name: 'Google US English', lang: 'en-US', localService: false, default: false}
A voice is selected by specifying its name
property, so to select "Victoria":
<p is="speech-paragraph" lang="en-US" voice="Victoria">
<speech-paragraph lang="en-US" voice="Victoria">
Setting the playback speed
The speech at which the text is spoken can be set with the rate
attribute. It accepts a value between 0.5 and 1.5.
The default value is 1.
<p is="speech-paragraph" rate="0.8>
<speech-paragraph rate="0.8>
Styling
The component exposes the following CSS custom properties for styling :
--button-size
: size of the play and pause button. Default:12px
--button-color
: color of the play and pause button. Default:#000000
--text-highlight-color
: background color of selected text inside the element. Default:#ffff00
Demo
To run the demo, run npm install
once and then npm start
and view the demo at
http://localhost:8080