|
@@ -1,198 +0,0 @@
|
|
|
-import IconPause12 from "@/images/icon-pause-12.png";
|
|
|
-import IconPlay12 from "@/images/icon-play-12.png";
|
|
|
-import VoiceWave from "@/images/voice-wave.png";
|
|
|
-import { voiceTryout } from "@/service/audio";
|
|
|
-import { useBase64AudioPlayer } from "@/utils/audioBase64";
|
|
|
-import { Image, Text, View } from "@tarojs/components";
|
|
|
-import Taro, { useUnload } from "@tarojs/taro";
|
|
|
-import { useState } from "react";
|
|
|
-import style from "./index.module.less";
|
|
|
-import PopupRecorder from "./popup-recorder/index";
|
|
|
-
|
|
|
-interface Props {
|
|
|
- onCloneEnd?: (voice: string) => void;
|
|
|
- status: number;
|
|
|
- voice?: string;
|
|
|
- profileId: string;
|
|
|
- setStatus: (status: number) => void;
|
|
|
-}
|
|
|
-
|
|
|
-export default ({ onCloneEnd, status, setStatus, voice, profileId }: Props) => {
|
|
|
- const [show, setShow] = useState(false);
|
|
|
- const [recording, setRecording] = useState(false);
|
|
|
- const [playing, setPlaying] = useState(false);
|
|
|
- const { playAudio, stopAudio, onEnded } = useBase64AudioPlayer();
|
|
|
-
|
|
|
- const handleCloneStatus = (r: number) => {
|
|
|
- console.log(r);
|
|
|
- if (r === 1) {
|
|
|
- setRecording(true);
|
|
|
- } else if (r === 2) {
|
|
|
- setStatus(1);
|
|
|
- } else {
|
|
|
- setRecording(false);
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- // 声音录制完成
|
|
|
- const onRecordEnd = (r: string) => {
|
|
|
- console.log("onRecordEnd:", r);
|
|
|
- if (r) {
|
|
|
- onCloneEnd && onCloneEnd(r);
|
|
|
- setStatus(2);
|
|
|
- } else {
|
|
|
- Taro.showModal({
|
|
|
- title: "克隆失败",
|
|
|
- content: "请检查网络后重试",
|
|
|
- showCancel: false,
|
|
|
- });
|
|
|
- setStatus(0);
|
|
|
- }
|
|
|
- };
|
|
|
- // 播放完毕
|
|
|
- onEnded(() => {
|
|
|
- setPlaying(false);
|
|
|
- });
|
|
|
-
|
|
|
- // 播放或重新播放
|
|
|
- const playVoice = async () => {
|
|
|
- stopAudio();
|
|
|
- console.log(voice);
|
|
|
- if (voice && !playing) {
|
|
|
- setPlaying(true);
|
|
|
- Taro.showLoading();
|
|
|
- const res = await voiceTryout(voice);
|
|
|
- Taro.hideLoading();
|
|
|
- if (res?.data?.audio) {
|
|
|
- playAudio(res.data.audio);
|
|
|
- }
|
|
|
- } else {
|
|
|
- setPlaying(false);
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- const nav2SystemVoice = () => {
|
|
|
- Taro.navigateTo({
|
|
|
- url: `/pages/system-voice/index?profileId=${profileId}`,
|
|
|
- });
|
|
|
- };
|
|
|
-
|
|
|
- useUnload(() => {
|
|
|
- stopAudio();
|
|
|
- });
|
|
|
-
|
|
|
- const renderPlayIcon = () => {
|
|
|
- return playing ? (
|
|
|
- <Image src={IconPause12} mode='widthFix' className={style.icon} />
|
|
|
- ) : (
|
|
|
- <Image src={IconPlay12} mode='widthFix' className={style.icon} />
|
|
|
- );
|
|
|
- };
|
|
|
-
|
|
|
- const renderSystemVoice = () => {
|
|
|
- return (
|
|
|
- <View className=''>
|
|
|
- <View
|
|
|
- className='text-12 leading-24'
|
|
|
- style='color: rgba(64, 64, 64, 0.65);'
|
|
|
- >
|
|
|
- 超出时长后,将自动切换成{" "}
|
|
|
- <Text className='primary-color-dark' onClick={nav2SystemVoice}>
|
|
|
- 系统声音
|
|
|
- </Text>{" "}
|
|
|
- 进行对话,升级可获得更多时长
|
|
|
- </View>
|
|
|
- </View>
|
|
|
- );
|
|
|
- };
|
|
|
-
|
|
|
- const renderCloneBox = () => {
|
|
|
- if (status === 0) {
|
|
|
- return (
|
|
|
- <View className={style.containerInner} onClick={() => setShow(true)}>
|
|
|
- <View className={`iconfont icon-icon_20_add ${style.add}`}></View>
|
|
|
- <View className={style.cloneTips}>
|
|
|
- 克隆你的声音,用真实声音和他人对话
|
|
|
- </View>
|
|
|
- {/* {renderSystemVoice()} */}
|
|
|
- </View>
|
|
|
- );
|
|
|
- }
|
|
|
- if (status === 1) {
|
|
|
- return (
|
|
|
- <View className={style.containerInner}>
|
|
|
-
|
|
|
- <View className={style.cloningTips}>克隆中,请稍候</View>
|
|
|
- </View>
|
|
|
- );
|
|
|
- }
|
|
|
- if (status === 2) {
|
|
|
- return (
|
|
|
- <View className={`${style.containerInner} w-full`}>
|
|
|
- <View className='flex items-center gap-6 w-full p-4'>
|
|
|
- <View className='flex-1 flex flex-col gap-6'>
|
|
|
- <View className='text-14 leading-22 text-black font-medium'>
|
|
|
- 用你的声音和他人对话
|
|
|
- </View>
|
|
|
- <View className='text-harsh font-semibold text-14 leading-22'>
|
|
|
- 10 分钟/每天
|
|
|
- </View>
|
|
|
- </View>
|
|
|
- <View className={style.button} onClick={() => {}}>
|
|
|
- 升级时长
|
|
|
- </View>
|
|
|
- </View>
|
|
|
- <View
|
|
|
- className='px-20 py-12 bg-white items-center flex gap-16 w-full rounded-8'
|
|
|
- onClick={playVoice}
|
|
|
- >
|
|
|
- <View className={style.playButton}>{renderPlayIcon()}</View>
|
|
|
- <Image
|
|
|
- src={VoiceWave}
|
|
|
- mode='widthFix'
|
|
|
- className={style.voiceWave}
|
|
|
- ></Image>
|
|
|
- </View>
|
|
|
- {renderSystemVoice()}
|
|
|
- </View>
|
|
|
- );
|
|
|
- }
|
|
|
- if (status === 3) {
|
|
|
- return (
|
|
|
- <View className={`${style.containerInner} w-full`}>
|
|
|
- <View className='flex items-center gap-6 w-full p-4'>
|
|
|
- <View className='flex-1 flex flex-col gap-6'>
|
|
|
- <View className='text-harsh font-semibold text-14 leading-22'>
|
|
|
- 克隆失败
|
|
|
- </View>
|
|
|
- </View>
|
|
|
- <View className={style.button} onClick={() => {}}>
|
|
|
- 重新克隆
|
|
|
- </View>
|
|
|
- </View>
|
|
|
-
|
|
|
- {renderSystemVoice()}
|
|
|
- </View>
|
|
|
- );
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- return (
|
|
|
- <View className={style.container}>
|
|
|
- {renderCloneBox()}
|
|
|
- {process.env.TARO_ENV == "h5" ? (
|
|
|
- <>
|
|
|
- <div> 待实现</div>
|
|
|
- </>
|
|
|
- ) : (
|
|
|
- <PopupRecorder
|
|
|
- recording={recording}
|
|
|
- onRecordEnd={onRecordEnd}
|
|
|
- setCloneStatus={(r) => handleCloneStatus(r)}
|
|
|
- show={show}
|
|
|
- setShow={(s) => setShow(s)}
|
|
|
- ></PopupRecorder>
|
|
|
- )}
|
|
|
- </View>
|
|
|
- );
|
|
|
-};
|