uniapp录音制作

简介: uniapp录音制作
<template>
  <view>
    <button @tap="startRecord">开始录音</button>
    <button @tap="endRecord">停止录音</button>
    <button @tap="playVoice">播放录音</button>
  </view>
</template>
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();
      }
    }
  }
}

注意:

有时返回的格式不为mp3可以使用:

recorderManager.start({
    format:'mp3'
})

播放时可以将格式转换一下

详细可见:

uni.getRecorderManager() | uni-app官网 (dcloud.net.cn)

相关文章
|
4月前
|
JavaScript
uniapp+uView 【详解】录音,自制音频播放器
uniapp+uView 【详解】录音,自制音频播放器
129 0
|
前端开发 JavaScript
uniapp 录音和播放功能
uniapp 录音和播放功能
393 0
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
128 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+部署文档+讲解等)
82 7
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
113 7
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
113 7
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的成人教育APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的成人教育APP的详细设计和实现(源码+lw+部署文档+讲解等)
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的大学生勤工助学管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的大学生勤工助学管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)