AI 宠物面板开发模版与流程（三）

AI 宠物面板开发模版与流程（二） 

9. 萌宠音频互动

支持用户录制并播放特定场景音频，帮助用户安抚宠物、寻找宠物或进行趣味互动。

相关代码段

// 初始化录音数据
useEffect(() => {
  dispatch(fetchAudios());
}, []);

// Home组件
<PageContainer
  show={showVoices}
  customStyle="backgroundColor: transparent"
  position="bottom"
  overlayStyle="background: rgba(0, 0, 0, 0.5);"
  onLeave={() => setShowVoices(false)}
  onAfterEnter={() => setReady(true)}
  onClickOverlay={() => setShowVoices(false)}
>
  <Voices ready={ready} onClose={() => setShowVoices(false)} />
</PageContainer>;

// 录音流程

  import { getRecorderManager } from '@ray-js/ray';

  const recordManager = useRef(getRecorderManager());
  const recordFile = useRef<string>();

// （1）开始录音
  const handleStart = () => {
    recordManager.current.start({
      frameSize: undefined,
      format: 'wav',
      success: res => {
        recordFile.current = res.tempFilePath;
        setIsRecording(true);
      },
      fail: err => {
        console.log(err);
      },
    });
  };

// （2）结束录音
  const handleFinish = () => {
    recordManager.current.stop({
      success: () => {
        setIsRecording(false);
        onRecorded(recordFile.current);
      },
    });
  };

// （3）试听录音

  import { getRecorderManager } from '@ray-js/ray';

  const audioContext = useRef<ty.CreateInnerAudioContextTask>();
  audioContext.current = createInnerAudioContext();

  const handleListen = () => {
    if (isPlaying) {
      audioContext.current?.stop?.({
        success: () => {
          setIsPlaying(false);
        },
      });
    } else {
      audioContext.current?.play?.({
        src: file,
        autoplay: true,
        loop: false,
        success: () => {
          setIsPlaying(true);
        },
      });
    }
  };

  // （4）保存录音
    const handleSave = async () => {
    try {
      const {
        data: { inputValue },
      } = await DialogInstance.input({
        context: this,
        title: Strings.getLang('dsc_input_audio_name'),
        overlayStyle: { background: 'transparent' },
        value: '',
        cancelButtonText: Strings.getLang('dsc_cancel'),
        confirmButtonText: Strings.getLang('dsc_confirm'),
        selector: '#smart-dialog-voice',
      });

      if (file) {
        try {
          showLoading({
            title: Strings.getLang('dsc_uploading'),
          });

          const { cloudKey } = await uploadAudio(
            file,
            'pet_media-device',
            'application/octet-stream'
          );

          await fileRelationSave(
            {
              objectKey: cloudKey,
              fileName: `${inputValue}_@_${duration}`,
            },
            devId
          );

          await (dispatch as AppDispatch)(fetchAudios()).unwrap();

          onSave();
        } catch (err) {
          showToast({
            title: Strings.getLang('dsc_save_fail'),
            icon: 'fail',
          });
        } finally {
          hideLoading();
        }
      }
    } catch (err) {
      console.log(err);
    }
  };

  // （5）删除录音
  import { showLoading, hideLoading, showToast } from '@ray-js/ray';

  const [edit, setEdit] = useState(false);
  const [selectedIds, setSelectedIds] = useState<string[]>([]);

    const handleEdit = async () => {
    if (audiosTotal === 0) return;
    if (edit) {
      try {
        if (selectedIds.length !== 0) {
          showLoading({
            title: '',
          });

          await (dispatch as AppDispatch)(deleteAudios(selectedIds)).unwrap();
        }
        setEdit(false);
        setSelectedIds([]);
      } catch (err) {
        showToast({
          title: Strings.getLang('dsc_delete_failed'),
          icon: 'fail',
        });
      } finally {
        hideLoading();
      }
    } else {
      setEdit(true);
    }
  };

10. 萌宠语聊

主要支持用户通过双向语音对讲，陪伴宠物，增强宠物的情感联系。

相关代码段

// 核心组件
<IpcPlayer
  objectFit="contain"
  defaultMute={isMute}
  devId={devId}
  onlineStatus={isOnline}
  updateLayout={`${playerLayout}`}
  scalable={false}
  onChangeStreamStatus={handleChangeStreamStatus}
  onCtx={handleCtx}
  onPlayerTap={handlePlayerClick}
  clarity={videoClarityObj[mainDeviceCameraConfig.videoClarity]}
  privateState={dpBasicPrivate ?? false}
  playerStyle={{ borderRadius: 20 }}
/>;

// 导出音视频实例
const handleCtx = (ctx) => {
  dispatch(updateIpcCommon({ playerCtx: ctx }));
};

// 开启双向对讲
export const startTalk = async () => {
  const { isTwoTalking } = store.getState().ipcCommon;
  // 开启对讲
  return new Promise((resolve, reject) => {
    const { playerCtx } = store.getState().ipcCommon;

    playerCtx.ctx.startTalk({
      success: () => {
        if (isTwoTalking) showToast("ipc_3s_can_not_donging", "none");
        resolve(true);
      },
      fail: () => {
        showToast();
        reject();
      },
    });
  });
};

// 关闭双向对讲
export const stopTalk = (showErrorToast = true) => {
  return new Promise((resolve, reject) => {
    const { playerCtx } = store.getState().ipcCommon;

    playerCtx.ctx.stopTalk({
      success: () => {
        resolve(false);
      },
      fail: () => {
        showErrorToast && showToast();
        reject();
      },
    });
  });
};

11. 结束

• 恭喜你 🎉 完成了本教程的学习！
• 有任何问题可以提交工单。