Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@mariohamann/read-it
Advanced tools
A customizable web component that will read content out to you using the web speech API.
A customizable web component that will read content out to you using the web speech API. It uses only Light DOM.
This is a more customizable version of read-it-to-me by macdonst. See his blog post for more information and background.
<script
type="module"
src="https://unpkg.com/@mariohamann/read-it/read-it.js?module=true"
></script>
<script
type="module"
src="https://cdn.skypack.dev/@mariohamann/read-it"
></script>
<read-it>
Read it to me!
<button data-read-it="play">Play / Pause</button>
<button data-read-it="stop">Stop</button>
</read-it>
read-it
NPM package:npm i read-it
import { ReadIt } from "read-it";
script
tag in your HTML.<read-it>
Read it to me!
<button data-read-it="play">Play / Pause</button>
<button data-read-it="stop">Stop</button>
</read-it>
lang
- A string representing a BCP 47 language tag, with the default of en-US
. The default will be automatically reflected.pitch
- A float representing the pitch value. It can range between 0 (lowest) and 2 (highest), with 1 being the default pitch for the current platform or voice.rate
- A float representing the rate value. It can range between 0.1 (lowest) and 10 (highest), with 1 being the default rate for the current platform or voice, which should correspond to a normal speaking rate.play-query
– A string representing the query selector for the play button. Defaults to button[data-read-it="play"]
.stop-query
– A string representing the query selector for the stop button. Defaults to button[data-read-it="stop"]
.The following states are reflected as attributes:
hydrated
– A (non-settable) boolean representing the initialized state of the component.playing
– A (non-settable) boolean representing the playing state of the component.paused
– A (non-settable) boolean representing the paused state of the component.read-it-play
– Fired when the reading started or resumed.read-it-stop
– Fired when the reading stopped.read-it-pause
– Fired when the reading is paused.You can skip parts to be read by setting data-read-it="skip"
to the element.
<read-it>
<p>Read this to me!</p>
<p data-read-it="skip">Don't read this to me!</p>
</read-it>
You can hide the play and stop buttons by default and show them when JavaScript is available by using the hidden
and watching for the hydrated
attribute which is set when the component is initialized.
<read-it>
<p>Read it to me! The quick brown fox jumps over the lazy dog.</p>
<p data-read-it="skip">This content will be skipped from reading.</p>
<button data-read-it="play" hidden>
<span class="play">Play</span>
<span class="pause">Pause</span>
</button>
<button data-read-it="stop" hidden>Stop</button>
</read-it>
<style>
read-it[hydrated] button[data-read-it] {
display: block;
}
</style>
hydrated
/ playing
/ paused
statesYou can customize styles or content depending on the hydrated
, playing
and the paused
states which are reflected as attributes. The following example shows how to toggle play
and pause
text and the visibility of the stop button:
stop
button is shown when the component is playing or paused.play
text is shown when the component is not playing, the pause
text is shown when the component is playing.<read-it>
<p>Read it to me! The quick brown fox jumps over the lazy dog.</p>
<p data-read-it="skip">This content will be skipped from reading.</p>
<button data-read-it="play" hidden>
<span class="play">Play</span>
<span class="pause">Pause</span>
</button>
<button data-read-it="stop" hidden>Stop</button>
</read-it>
<style>
read-it[hydrated] button[data-read-it="play"],
read-it:is([playing], [paused]) button[data-read-it="stop"] {
display: block;
}
read-it:not([playing]) .pause,
read-it[playing] .play {
display: none;
}
read-it:not([playing]) .play,
read-it[playing] .pause {
display: inline-block;
}
</style>
FAQs
A customizable web component that will read content out to you using the web speech API.
The npm package @mariohamann/read-it receives a total of 0 weekly downloads. As such, @mariohamann/read-it popularity was classified as not popular.
We found that @mariohamann/read-it demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.