Comment implémenter l'enregistrement audio et le traitement du son dans Uniapp

UniApp est un framework de développement multiplateforme basé sur Vue.js, qui peut aider les développeurs à générer des applications pour plusieurs plates-formes en même temps sur la base d'un seul codage, notamment iOS, Android, H5, etc. Pour implémenter les fonctions d'enregistrement audio et de traitement du son dans UniApp, vous devez utiliser le plug-in uni-extend et les composants uni-audio.

Tout d'abord, dans votre projet UniApp, vous devez installer le plug-in uni-extend. Ouvrez une fenêtre de ligne de commande, accédez au répertoire de votre projet et exécutez la commande suivante pour installer le plug-in uni-extend :

npm install uni-extend

Une fois l'installation terminée, créez un nouveau fichier JS dans votre projet, tel que audio.js. , pour le traitement de l'enregistrement audio et de la logique de traitement du son. Dans audio.js, nous devons introduire le plug-in uni-extend et le composant uni-audio, ainsi que la méthode uni.showToast pour afficher les informations d'invite.

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

Dans le code ci-dessus, la méthode startRecord est utilisée pour démarrer l'enregistrement, la méthode uni.startRecord est appelée pour démarrer l'enregistrement et une fois l'enregistrement réussi, la méthode stopRecord est appelée pour arrêter l'enregistrement. Dans la méthode stopRecord, appelez la méthode uni.stopRecord pour arrêter l'enregistrement et transmettez le tempFilePath du fichier d'enregistrement à la méthode showAudio pour afficher l'enregistrement.

La méthode playAudio est utilisée pour lire l'enregistrement et la méthode uni.playVoice est appelée pour lire le chemin du fichier d'enregistrement. La méthode processAudio est utilisée pour le traitement du son. Ici, vous pouvez ajouter une logique de traitement audio en fonction de besoins spécifiques.

Enfin, vous devez utiliser ces méthodes dans votre page Vue. Dans la balise <script> de la page, introduisez le fichier audio.js et enregistrez-le comme méthode dans les méthodes. <script>标签中，引入audio.js文件，并将其在methods中注册为方法。

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

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

在页面的<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>

Dans le <template> de la page, utilisez le composant uni-audio pour afficher et contrôler la lecture de l'enregistrement :

rrreee

Ce qui précède est un exemple spécifique d'enregistrement audio et de son traitement dans UniApp. En combinant le plug-in uni-extend et les composants uni-audio, nous pouvons facilement implémenter des fonctions d'enregistrement et de traitement du son dans UniApp. Bien sûr, dans le développement réel, vous devrez peut-être également effectuer une gestion des erreurs et d'autres traitements logiques. Le code ci-dessus n'est qu'un exemple simple, et vous pouvez le modifier et l'étendre en fonction de vos propres besoins. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!