diff --git a/packages/storyteller-home/public/audio-samples/voice-conversion-1.mp3 b/packages/storyteller-home/public/audio-samples/voice-conversion-1.mp3 new file mode 100644 index 0000000000..074b0ffabc Binary files /dev/null and b/packages/storyteller-home/public/audio-samples/voice-conversion-1.mp3 differ diff --git a/packages/storyteller-home/public/audio-samples/voice-conversion-2.mp3 b/packages/storyteller-home/public/audio-samples/voice-conversion-2.mp3 new file mode 100644 index 0000000000..80b0c0e8d5 Binary files /dev/null and b/packages/storyteller-home/public/audio-samples/voice-conversion-2.mp3 differ diff --git a/packages/storyteller-home/src/pages/index/AudioSample.tsx b/packages/storyteller-home/src/pages/index/AudioSample.tsx new file mode 100644 index 0000000000..0931646686 --- /dev/null +++ b/packages/storyteller-home/src/pages/index/AudioSample.tsx @@ -0,0 +1,48 @@ +import React, { useRef, useState } from 'react'; +import { Howl } from 'howler'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faPause, faPlay } from '@fortawesome/free-solid-svg-icons'; + +interface Props { + sampleUrl: string, +} + +function AudioSample(props: Props) { + + const [isPlaying, setIsPlaying] = useState(false); + + const howlPlayer = useRef( + new Howl({ + src: [props.sampleUrl], + autoplay: false, + loop: false, + onplay: function() { setIsPlaying(true) }, + onpause: function() { setIsPlaying(false) }, + onend: function() { setIsPlaying(false) }, + }) + ); + + const onClickToggle = () => { + const player = howlPlayer.current; + if (player.playing()) { + player.stop(); + setIsPlaying(false); + } else { + player.play(); + setIsPlaying(true); + } + } + + const playIcon = isPlaying ? + : + ; + + return ( + + ); +} + +export default AudioSample; diff --git a/packages/storyteller-home/src/pages/index/IndexPage.tsx b/packages/storyteller-home/src/pages/index/IndexPage.tsx index ec5cae54a9..dbee46ffdc 100644 --- a/packages/storyteller-home/src/pages/index/IndexPage.tsx +++ b/packages/storyteller-home/src/pages/index/IndexPage.tsx @@ -1,8 +1,9 @@ import { faApple, faLinux, faSpeakap, faSpeakerDeck, faTwitch, faWindows } from '@fortawesome/free-brands-svg-icons'; -import { faAsterisk, faFlask, faHeadphonesAlt, faMicrophone, faUser, faUserAlt, faUserCircle, faUsers, faVoicemail } from '@fortawesome/free-solid-svg-icons'; +import { faArrowLeft, faArrowRight, faAsterisk, faFlask, faHeadphonesAlt, faMicrophone, faQuoteLeft, faUser, faUserAlt, faUserCircle, faUsers, faVoicemail } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import React from 'react'; +import AudioSample from './AudioSample'; function IndexPage () { return ( @@ -148,16 +149,53 @@ function IndexPage () { This is still an early beta. Voice quality will improve substantially over time. +

- [ demo goes here ] +
+
+ +
+
+

+ + “I've got a huge announcement. + This just sounds really, really great. + And other than some phase distortion, artifacts, + this is just sounding really great. + And it's good for America. + And voice synthesis is amazing.” + +

+
+
+ +
+
+

+ + “My favorite game is Super Smash Bros Ultimate. + It's a really, really great game. + It's huge. There's so many characters.” + +

+
+
+ +

+ Brandon Donald Trump
+ Real time voice to voice conversion. +

+ + +

Sign up for your very own voice changer

- We'll be rolling this out shortly. Get on the list! + We'll be rolling this out shortly. Get on the list! Tell us who you want to be.