uniapp录制语音

给大家讲解瞎 录制语音 的功能,这部分主要涉及到以下几个步骤:开始录音、停止录音、播放录音的功能

1.开始录音 (startRecording 函数)

  • 当用户点击 开始录音 按钮时,调用 startRecording 函数开始录音。

  • 录音通过 uni.getRecorderManager() 来实现。recorderManager 是录音管理器,提供了启动、停止、暂停等控制录音的功能、

    const startRecording = () => {
    const options = {
    duration: 60000, // 限制录音时长,最大为60秒
    format: 'mp3', // 录音格式
    };
    recorderManager.start(options); // 调用 start 方法开始录音
    };

2. 停止录音 (stopRecording 函数)

  • 当用户点击 停止录音 按钮时,调用 stopRecording 函数来停止录音。

    1. 停止录音 (stopRecording 函数)
      当用户点击 停止录音 按钮时,调用 stopRecording 函数来停止录音。

3. 录音过程的管理

  • 在录音过程中,你需要显示录音时长,实时更新时长信息。为了实现这一功能,你可以设置一个定时器,在录音过程中定时更新时间

    recorderManager.onStart(() => {
    console.log('录音开始');
    isRecording.value = true; // 标记录音状态为进行中
    recordingStartTime = Date.now(); // 记录开始时间
    recordingInterval = setInterval(() => {
    recordingDuration.value = Math.floor((Date.now() - recordingStartTime) / 1000); // 每秒更新一次录音时长
    }, 1000);
    });

4. 录音停止后的处理

  • 当录音停止后,你可以通过 recorderManager.onStop 获取录音的文件路径。

    recorderManager.onStop((res) => {
    console.log('录音停止', res);
    isRecording.value = false; // 标记录音结束
    audioSrc.value = res.tempFilePath; // 获取录音文件的路径
    clearInterval(recordingInterval); // 停止定时器
    recordingDuration.value = Math.floor((Date.now() - recordingStartTime) / 1000); // 更新最终录音时长
    });

5. 播放录音 (playAudio 函数)

  • 用户录音完成后,可以通过 playAudio 函数播放录音。
复制代码
  const playAudio = () => {
      if (audioSrc.value) {  // 确保有录音文件
          innerAudioContext.src = audioSrc.value;  // 设置录音文件的路径
          innerAudioContext.play();  // 播放录音

          innerAudioContext.onPlay(() => {
              console.log('开始播放');
          });

          innerAudioContext.onError((err) => {
              console.error('播放错误', err);
          });
      }
  };

总结

录音功能的实现主要包括以下几个方面:

  • 开始录音 :通过 recorderManager.start() 开始录音。
  • 停止录音 :通过 recorderManager.stop() 停止录音,并获取录音文件路径。
  • 管理录音时长:使用定时器实时更新录音时长。
  • 播放录音 :通过 innerAudioContext.play() 播放录音。
  • 清理资源:在组件销毁时,销毁音频上下文,释放资源。
相关推荐
快起来搬砖了1 小时前
UniApp 路由配置实战:从全局守卫到 404 页面优雅处理
uni-app
5335ld2 小时前
uniapp-APP端table列表左侧第一列固定、头部固定
windows·uni-app
一个假的前端男3 小时前
uni-app App 端长按录音的工程级实现
uni-app
无名前端小白3 小时前
uniapp 安卓离线打包, 无法调起系统安装应用
uni-app
游戏开发爱好者83 小时前
苹果 App 上架流程,结合 Xcode、CI 等常见工具
macos·ios·ci/cd·小程序·uni-app·iphone·xcode
2501_915106324 小时前
用 HBuilder 上架 iOS 应用时如何管理Bundle ID、证书与描述文件
android·ios·小程序·https·uni-app·iphone·webview
2501_915909064 小时前
资源文件混淆在 iOS 应用安全中的实际价值
android·安全·ios·小程序·uni-app·iphone·webview
2501_915918414 小时前
iOS App 性能测试中常被忽略的运行期问题
android·ios·小程序·https·uni-app·iphone·webview
毕设源码-邱学长4 小时前
【开题答辩全过程】以 基于uni-app的装修现场管理小程序设计与实现为例,包含答辩的问题和答案
uni-app
郑州光合科技余经理6 小时前
PHP构建:支撑欧美澳市场的同城生活服务平台开发
java·开发语言·数据库·uni-app·php·排序算法·生活