> The transcript page for the `@times-stories` suite of packages
npm install @times-stories/transcript-page> The transcript page for the @times-stories suite of packages
``bash`
$ yarn add @times-stories/transcript-page
This component allows you to render an auto-playing (muted by default) audio
player with scrolling transcript words.
You must provide both the audio source, and the transcribed words (with start
time, duration, and the word itself – see below for an example). Services such
as Trint can provide data in a similar format to this. You
can find a full example in stories/fixtures/words.js.
The showMuteOnboarding and onMuteOnboardingClose props are left for you tolocalstorage
determine the logic. You may choose to store a flag in so theonMuteOnboardingClose
unmute logic is not shown in the future, or you may choose to show it on the
first slide. By default, the template will not close the tooltip when dismissed
unless you implement .
`js
import Story from "@times-stories/story";
import Page from "@times-stories/page";
import TranscriptPage from "@times-stories/transcript-page";
const backgroundImage = {
src: "url/to/image",
focusPoint: {
x: 50,
y: 50
}
};
const words = [
{ start: 700, duration: 15, word: "Hello" },
{ start: 715, duration: 20, word: "world" }
];
class MyStory extends React.Component {
state = {
showOnboarding: true
};
toggleOnboarding = () => {
this.setState(({ showOnboarding }) => ({
showOnboarding: !showOnboarding
}));
};
render() {
const { showOnboarding } = this.state;
return (
{props => (
source="/path/to/audio/file.mp3"
words={words}
backgroundImage={{
src: backgroundImage,
focusPoint: {
x: 50,
y: 50
}
}}
showMuteOnboarding={showOnboarding}
onMuteOnboardingClose={this.toggleOnboarding}
/>
)}
);
}
}
``