uni-app 官方录音插件需求 增加允许暂停继续录音功能

发布于 1周前 作者 phonegap100 来自 Uni-App

uni-app 官方录音插件需求 增加允许暂停继续录音功能

4 回复

可以做 专业插件开发 q 1196097915 主页 https://ask.dcloud.net.cn/question/91948


可以做,联系QQ:1804945430

在uni-app中实现录音功能并支持暂停和继续录音,可以通过对官方录音插件进行扩展来实现。下面是一个简单的代码案例,展示了如何实现这一功能。

首先,确保你的项目中已经安装了uni-app的录音插件。在manifest.json中配置好必要的权限,比如麦克风权限。

然后,在你的页面代码中,可以按照以下步骤实现录音、暂停和继续录音的功能:

<template>
  <view>
    <button @click="startOrResumeRecording">开始/继续录音</button>
    <button @click="pauseRecording">暂停录音</button>
    <button @click="stopRecording">停止录音</button>
    <audio :src="audioSrc" controls></audio>
  </view>
</template>

<script>
export default {
  data() {
    return {
      recorderManager: null,
      tempFilePath: '',
      isRecording: false,
      audioSrc: ''
    };
  },
  mounted() {
    this.recorderManager = uni.getRecorderManager();

    this.recorderManager.onStart(() => {
      console.log('录音开始');
    });

    this.recorderManager.onPause(() => {
      console.log('录音暂停');
    });

    this.recorderManager.onResume(() => {
      console.log('录音继续');
    });

    this.recorderManager.onStop((res) => {
      this.tempFilePath = res.tempFilePath;
      this.audioSrc = this.tempFilePath;
      console.log('录音停止', res);
    });
  },
  methods: {
    startOrResumeRecording() {
      if (this.isRecording) {
        this.recorderManager.resume();
      } else {
        this.recorderManager.start({
          format: 'mp3'
        });
        this.isRecording = true;
      }
    },
    pauseRecording() {
      this.recorderManager.pause();
      this.isRecording = false;
    },
    stopRecording() {
      this.recorderManager.stop();
      this.isRecording = false;
    }
  }
};
</script>

<style>
/* 添加你的样式 */
</style>

在这个例子中,我们使用了uni.getRecorderManager()来获取录音管理器,并为其绑定了开始、暂停、继续和停止事件。通过isRecording状态变量来控制录音的开始、暂停和继续逻辑。当点击“开始/继续录音”按钮时,如果当前正在录音,则继续录音;否则,开始新的录音。点击“暂停录音”按钮时,会暂停当前录音。点击“停止录音”按钮时,会停止录音并保存录音文件。

请注意,这个例子中的录音格式为mp3,你可以根据需要调整录音格式和其他参数。此外,确保在实际应用中处理好权限申请和用户反馈,以提升用户体验。

回到顶部