-
+1700
+
+2000
TTS Voices in the library (and growing)
+10K
diff --git a/packages/storyteller-stream/src/pages/index/VoicePreviewPlayer.tsx b/packages/storyteller-stream/src/pages/index/VoicePreviewPlayer.tsx
index 3f4247015b..068268ac03 100644
--- a/packages/storyteller-stream/src/pages/index/VoicePreviewPlayer.tsx
+++ b/packages/storyteller-stream/src/pages/index/VoicePreviewPlayer.tsx
@@ -1,84 +1,82 @@
-import React from "react";
+import React, { useState, useCallback } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faMicrophone, faPlay } from "@fortawesome/free-solid-svg-icons";
+import {
+ faMicrophone,
+ faPause,
+ faPlay,
+} from "@fortawesome/free-solid-svg-icons";
import Wavesurfer from "react-wavesurfer.js";
-import AudioSampleButton from "./AudioSampleButton";
-export default class MyComponent extends React.Component
{
- constructor(props: any) {
- super(props);
-
- this.state = {
- playing: false,
- pos: 0,
- };
- this.handleTogglePlay = this.handleTogglePlay.bind(this);
- this.handlePosChange = this.handlePosChange.bind(this);
- }
- handleTogglePlay() {
- this.setState({
- playing: !this.state.playing,
- });
- }
- handlePosChange(e: any) {
- this.setState({
- pos: e.originalArgs[0],
- });
- }
-
- render() {
- let wavesurferConfigs = [
- {
- filename: "/assets/preview/tracer.wav",
- title: "Tracer (Overwatch)",
- },
- {
- filename: "/assets/preview/son-goku.wav",
- title: "Son Goku (Sean Schemmel)",
- },
- {
- filename: "/assets/preview/stan-lee.wav",
- title: "Stan Lee",
- },
- ];
-
- let wavesurfers = wavesurferConfigs.map((config) => {
- let ws = (
-
-
-
-
-
-
- {config.title}
-
-
-
-
-
-
-
{wavesurfers}
;
- }
+interface Props {
+ filename: string;
+ title: string;
}
+
+function VoicePreviewPlayer(props: Props) {
+ const [isPlaying, setIsPlaying] = useState(false);
+ const [position, setPosition] = useState(0);
+
+ const handleTogglePlay = useCallback(() => {
+ if (!isPlaying) {
+ setIsPlaying(true);
+ } else {
+ setIsPlaying(false);
+ }
+ }, [isPlaying]);
+
+ const handleFinish = useCallback(() => {
+ setIsPlaying(false);
+ setPosition(0);
+ return [setIsPlaying, setPosition];
+ }, []);
+
+ let playButtonText = ;
+
+ if (isPlaying) {
+ playButtonText = (
+ <>
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+ {props.title}
+
+
+
+
+
+
+
-