uniapp录音功能

简介: uniapp录音功能

UniApp提供了录音功能的API,可以通过该API实现录音功能。

首先,在uni-app项目中创建一个录音页面。在该页面中,引入uni录音API:

import uniRecorder from '@/uni_modules/uni-recorder/uni-recorder.js';

然后,在页面中添加开始录音和停止录音的按钮,并绑定相应的事件处理函数:

<template>
  <view>
    <button @tap="startRecord">开始录音</button>
    <button @tap="stopRecord">停止录音</button>
  </view>
</template>
<script>
import uniRecorder from '@/uni_modules/uni-recorder/uni-recorder.js';
export default {
  methods: {
    startRecord() {
      uniRecorder.start({
        format: 'mp3',
        duration: 120000,
        sampleRate: 44100,
        numberOfChannels: 1,
        encodeBitRate: 64000,
        frameSize: 2048,
        audioSource: 'auto'
      }).then((res) => {
        console.log(res.tempFilePath);
      }).catch((err) => {
        console.log(err);
      });
    },
    stopRecord() {
      uniRecorder.stop().then((res) => {
        console.log(res.tempFilePath);
      }).catch((err) => {
        console.log(err);
      });
    }
  }
}
</script>

在开始录音的事件处理函数中,调用uniRecorder的start方法开始录音,并传入录音的参数。其中,format表示录音格式,duration表示录音时长,sampleRate表示采样率,numberOfChannels表示声道数,encodeBitRate表示编码比特率,frameSize表示帧大小,audioSource表示音频获取源,可以选择auto、camcorder或voice_communication。在start方法返回的Promise对象中,可以获取到录音生成的临时文件路径。

在停止录音的事件处理函数中,调用uniRecorder的stop方法停止录音,并在stop方法返回的Promise对象中获取录音生成的临时文件路径。

需要注意的是,在使用uniRecorder的API之前,需要先在manifest.json文件中配置录音相关的权限:

"permissions": {
    "audioRecord": {
      "desc": "用于录音功能"
    },
  }
相关文章
|
7月前
|
JavaScript API
uniapp录音功能
uniapp录音功能
122 0
|
7月前
|
JavaScript API
uniapp录音功能
uniapp录音功能
|
JavaScript API
uniapp实现录音功能和播放功能
uniapp实现录音功能和播放功能
|
7月前
|
存储
uniapp录音功能和音频播放功能制作
uniapp录音功能和音频播放功能制作
425 0
|
JavaScript API
uniapp录音功能
uniapp录音功能
234 0
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
134 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
68 7
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
89 7
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
120 7

热门文章

最新文章