uniapp录音功能

简介: uniapp录音功能

录音功能需要使用到uniapp官方文档里面的API

模版区

<template>
  <view>
    <button @tap="startRecord">开始录音</button>
    <button @tap="endRecord">停止录音</button>
    <button @tap="playVoice">播放录音</button>
  </view>
</template>

js

const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
export default {
  data() {
    return {
      text: 'uni-app',
      voicePath: ''
    }
  },
  onLoad() {
    let self = this;
    recorderManager.onStop(function (res) {
      console.log('recorder stop' + JSON.stringify(res));
      self.voicePath = res.tempFilePath;
    });
  },
  methods: {
    startRecord() {
      console.log('开始录音');
      recorderManager.start();
    },
    endRecord() {
      console.log('录音结束');
      recorderManager.stop();
    },
    playVoice() {
      console.log('播放录音');
      if (this.voicePath) {
        innerAudioContext.src = this.voicePath;
        innerAudioContext.play();
      }
    }
  }
}

现在就是可以进行一个简单的录音,暂停以及播放,再根据需求进行更改即可

还有需要注意的就是在进行真机调试的时候需要判断用户是否打开了录音权限

uni.authorize({
          scope: 'scope.record',
          success() {
            recorderManager.start({
              format: 'mp3'
            });
            t.getTimeInterval();
            uni.setInnerAudioOption({
              obeyMuteSwitch: false
            })
          },
          fail() {
            uni.showModal({
              content: '检测到您没打开录音功能权限,是否去设置打开?',
              confirmText: "确认",
              cancelText: '取消',
              success(res) {
                recorderManager.start();
                t.time = setInterval(this.timer, 50)
              }
            })
          }
        })
相关文章
|
6月前
|
JavaScript API
uniapp录音功能
uniapp录音功能
115 0
|
JavaScript API
uniapp实现录音功能和播放功能
uniapp实现录音功能和播放功能
|
6月前
|
存储
uniapp录音功能和音频播放功能制作
uniapp录音功能和音频播放功能制作
395 0
|
前端开发 API
uniapp录音功能
uniapp录音功能
215 0
|
JavaScript API
uniapp录音功能
uniapp录音功能
231 0
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
126 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
62 7
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
81 7
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
110 7

热门文章

最新文章