Bagaimana untuk melaksanakan rakaman audio dan pemprosesan bunyi dalam uniapp

UniApp ialah rangka kerja pembangunan merentas platform berdasarkan Vue.js, yang boleh membantu pembangun menjana aplikasi untuk berbilang platform pada masa yang sama berdasarkan satu pengekodan, termasuk iOS, Android, H5, dll. Untuk melaksanakan rakaman audio dan fungsi pemprosesan bunyi dalam UniApp, anda perlu menggunakan komponen pemalam uni-lanjut dan komponen audio-uni.

Pertama, dalam projek UniApp anda, anda perlu memasang pemalam uni-extend. Buka tetingkap baris arahan, tukar ke direktori projek anda dan jalankan arahan berikut untuk memasang pemalam uni-extend:

npm install uni-extend

Selepas pemasangan selesai, buat fail JS baharu dalam projek anda, seperti audio.js , untuk memproses rakaman Audio dan logik pemprosesan bunyi. Dalam audio.js, kita perlu memperkenalkan komponen pemalam uni-extend dan uni-audio, dan juga perlu memperkenalkan kaedah uni.showToast untuk memaparkan maklumat segera.

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'
      });
    }
  }
}

Dalam kod di atas, kaedah startRecord digunakan untuk memulakan rakaman, kaedah uni.startRecord dipanggil untuk memulakan rakaman, dan selepas rakaman berjaya, kaedah stopRecord dipanggil untuk menghentikan rakaman. Dalam kaedah stopRecord, panggil kaedah uni.stopRecord untuk menghentikan rakaman dan hantar tempFilePath fail rakaman kepada kaedah showAudio untuk memaparkan rakaman.

Kaedah playAudio digunakan untuk memainkan rakaman, dan kaedah uni.playVoice dipanggil untuk memainkan laluan fail rakaman. Kaedah processAudio digunakan untuk pemprosesan bunyi Di sini anda boleh menambah logik pemprosesan audio mengikut keperluan tertentu.

Akhir sekali, anda perlu menggunakan kaedah ini dalam halaman Vue anda. Dalam teg <script></script> halaman, perkenalkan fail audio.js dan daftarkannya sebagai kaedah dalam kaedah. <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>

Dalam <template></template> halaman, gunakan komponen uni-audio untuk memaparkan dan mengawal main balik rakaman:

rrreee

Di atas ialah contoh khusus rakaman audio dan bunyi pemprosesan dalam UniApp. Dengan menggabungkan komponen plug-in uni-extend dan uni-audio, kami boleh melaksanakan fungsi rakaman audio dan pemprosesan bunyi dengan mudah dalam UniApp. Sudah tentu, dalam pembangunan sebenar, anda juga mungkin perlu melakukan beberapa pengendalian ralat dan pemprosesan logik lain Kod di atas hanyalah contoh mudah, dan anda boleh mengubah suai dan memanjangkannya mengikut keperluan anda sendiri. 🎜

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan rakaman audio dan pemprosesan bunyi dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!