uniapp에서 오디오 녹음 및 사운드 처리를 구현하는 방법

UniApp은 Vue.js 기반의 크로스 플랫폼 개발 프레임워크로, 개발자가 iOS, Android, H5 등을 포함하여 하나의 코딩을 기반으로 동시에 여러 플랫폼용 애플리케이션을 생성하는 데 도움을 줄 수 있습니다. UniApp에서 오디오 녹음 및 사운드 처리 기능을 구현하려면 uni-extend 플러그인과 uni-audio 구성 요소를 사용해야 합니다.

먼저 UniApp 프로젝트에 uni-extend 플러그인을 설치해야 합니다. 명령줄 창을 열고 프로젝트 디렉터리로 전환한 후 다음 명령을 실행하여 uni-extend 플러그인을 설치합니다.

npm install uni-extend

설치가 완료된 후 프로젝트에 audio.js와 같은 새 JS 파일을 만듭니다. , 오디오 녹음 및 사운드 처리 로직을 처리합니다. audio.js에서는 uni-extend 플러그인과 uni-audio 구성 요소를 도입해야 하며 프롬프트 정보를 표시하려면 uni.showToast 메서드도 도입해야 합니다.

import { ChooseImage, SaveImage } from 'uni-extend';
import { showToast } from 'uni-audio';

export default {
  methods: {
    // 音频录制
    startRecord() {
      uni.showToast({
        title: '开始录音',
        icon: 'none'
      });

      uni.startRecord({
        success: (res) => {
          const tempFilePath = res.tempFilePath;
          this.stopRecord(tempFilePath);
        },
        fail: (err) => {
          uni.showToast({
            title: '录音失败',
            icon: 'none'
          });
        }
      });
    },
    // 停止录音
    stopRecord(tempFilePath) {
      uni.stopRecord();
      this.showAudio(tempFilePath);
    },
    // 播放录音
    playAudio() {
      uni.showToast({
        title: '开始播放',
        icon: 'none'
      });

      uni.playVoice({
        filePath: this.audioSrc,
        success: () => {
          uni.showToast({
            title: '播放完成',
            icon: 'none'
          });
        },
        fail: () => {
          uni.showToast({
            title: '播放失败',
            icon: 'none'
          });
        }
      });
    },
    // 显示录音
    showAudio(tempFilePath) {
      this.audioSrc = tempFilePath;
    },
    // 声音处理
    processAudio() {
      uni.showToast({
        title: '声音处理完毕',
        icon: 'none'
      });
    }
  }
}

위 코드에서는 startRecord 메서드를 사용하여 녹음을 시작하고, uni.startRecord 메서드를 호출하여 녹음을 시작하며, 녹음에 성공한 후 stopRecord 메서드를 호출하여 녹음을 중지합니다. stopRecord 메소드에서 uni.stopRecord 메소드를 호출하여 녹음을 중지하고, 녹음 파일의 tempFilePath를 showAudio 메소드에 전달하여 녹음을 표시합니다.

녹음을 재생하려면 playAudio 메서드를 사용하고, 녹음 파일의 경로를 재생하려면 uni.playVoice 메서드를 호출합니다. processAudio 메서드는 사운드 처리에 사용되며 여기에서 특정 요구에 따라 오디오 처리 로직을 추가할 수 있습니다.

마지막으로 Vue 페이지에서 이러한 방법을 사용해야 합니다. 페이지의 <script></script> 태그에 audio.js 파일을 삽입하고 이를 메소드에 메소드로 등록합니다. <script></script>标签中，引入audio.js文件，并将其在methods中注册为方法。

<script>
import audio from '@/audio';

export default {
  methods: {
    ...audio.methods
  }
}
</script>

在页面的<template></template>

<template>
  <view>
    <button @click="startRecord">开始录音</button>
    <button @click="playAudio">播放录音</button>
    <button @click="processAudio">声音处理</button>
    <uni-audio :src="audioSrc" v-if="audioSrc"></uni-audio>
  </view>
</template>

페이지의 <template></template>에서 uni-audio 구성 요소를 사용하여 녹음 재생을 표시하고 제어합니다.

rrreee

위는 오디오 녹음 및 사운드의 구체적인 예입니다. UniApp에서 처리 중입니다. Uni-extend 플러그인과 Uni-Audio 구성 요소를 결합하면 UniApp에서 오디오 녹음 및 사운드 처리 기능을 쉽게 구현할 수 있습니다. 물론 실제 개발에서는 일부 오류 처리 및 기타 논리 처리를 수행해야 할 수도 있습니다. 위 코드는 단순한 예일 뿐이며 필요에 따라 수정하고 확장할 수 있습니다. 🎜

위 내용은 uniapp에서 오디오 녹음 및 사운드 처리를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!