Table of Contents
Question 1: wx api is not declared or is not in the current module
Question 2: recorder.start is not a function
Question 3: recorder.start fail: start audiomanager unsuccessfully
Home Web Front-end uni-app What should I do if I get an error when implementing the recording function in uniapp?

What should I do if I get an error when implementing the recording function in uniapp?

Apr 20, 2023 pm 03:05 PM

With the development of mobile Internet technology, the development of mobile applications has become a necessary skill. Cross-platform development based on the uniapp framework optimizes developers' work efficiency. However, when implementing the recording function in uniapp, we may encounter some errors. Let’s take a look at these problems and their solutions.

Question 1: wx api is not declared or is not in the current module

First of all, we need to make it clear: uniapp is built on the basis of the vue framework, so its API part is the same as the vue API akin. If you encounter this problem, the reason is because we did not declare it after introducing the wx api.

Solution:
We need to introduce wx api into vue and declare it in the code before it can be used. The sample code is as follows:

import wx from 'uni-app/weixin.js';
export default{
   data(){
      return {
          recoderManager:null   // 声明参数
      }
   },
   //在mounted部分进行wx api的声明
   mounted(){
      this.recoderManager = wx.getRecorderManager()
   }
}
Copy after login

Question 2: recorder.start is not a function

This problem is obvious, that is, when we call recorder.start(), an error is reported. The reason is that we did not instantiate the recorderManager correctly.

Solution:
We need to instantiate wx api in the mounted part. Refer to the code below:

import wx from 'uni-app/weixin.js';
export default{
   data(){
      return {
          recoderManager:null   // 声明参数
      }
   },
   //在mounted部分进行wx api的实例化
   mounted(){
      this.recoderManager = wx.getRecorderManager()
   },
   methods:{
      //在该方法中可以调用 start()方法
      recoding(){
           this.recoderManager.start({   //注意参数
                 duration:60000,
                 format:'mp3'
           });
           //当录音结束后触发该函数
           this.recoderManager.onStop((res)=>{
               var voice = res.tempFilePath   //得到当前录音的文件路径
           })
      },
   }
}
Copy after login

Question 3: recorder.start fail: start audiomanager unsuccessfully

This problem may occur on iOS devices. The reason is that the current browser does not support it, or the audio permission is disabled. The solution is as follows:

Solution:
We need to enter the settings page and check whether the current application has obtained audio permissions. If the audio permission is disabled, we need to enable it. In addition, we can try to upgrade the browser version, which may solve such problems.

The above are three common problems and their solutions when uniapp implements the recording function. If you follow the above steps, you should be able to avoid these problems.

The above is the detailed content of What should I do if I get an error when implementing the recording function in uniapp?. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1664
14
PHP Tutorial
1266
29
C# Tutorial
1239
24