uniappで音声録音と音声処理を実装する方法

UniApp は、Vue.js をベースにしたクロスプラットフォーム開発フレームワークで、開発者が 1 つのコーディングに基づいて、iOS、Android、H5 などの複数のプラットフォーム向けのアプリケーションを同時に生成できるようにします。 、など。 UniApp でオーディオ録音およびサウンド処理機能を実装するには、uni-extend プラグインと uni-audio コンポーネントを使用する必要があります。

まず、UniApp プロジェクトに uni-extend プラグインをインストールする必要があります。コマンド ライン ウィンドウを開き、プロジェクト ディレクトリに切り替え、次のコマンドを実行して uni-extend プラグインをインストールします。

npm install uni-extend

インストールが完了したら、プロジェクトに次のような新しい JS ファイルを作成します。 audio.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> タグ内に、audio.js ファイルを導入し、メソッドとしてメソッドとして登録します。

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

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

ページの <template> で、uni-audio コンポーネントを使用して録音の再生を表示および制御します。

<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>

上記は方法です。 UniApp での音声録音と音声処理の具体例を実装します。 uni-extend プラグインと uni-audio コンポーネントを組み合わせることで、UniApp にオーディオ録音およびサウンド処理機能を簡単に実装できます。もちろん、実際の開発ではエラー処理やその他のロジック処理も必要になる場合がありますが、上記のコードは単なる例であり、必要に応じて変更および拡張することができます。

以上がuniappで音声録音と音声処理を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。