uniappに音声録音機能を実装する方法

uni-app で音声録音機能を実装する方法

概要
モバイル アプリケーション開発では、音声録音機能は音声メッセージ、音声認識、スピーチツーなどのシナリオで広く使用されています。 -文章。クロスプラットフォームの開発フレームワークである uni-app の強力な機能と豊富な API により、オーディオ録音機能を非常に簡単に実装できます。この記事では、uni-app に音声録音機能を実装する方法と詳細なコード例を紹介します。

ステップ 1: ユニアプリ プロジェクトを作成する
まず、開発環境でユニアプリ プロジェクトを作成する必要があります。 HbuilderX などの IDE ツールやコマンド ライン ツールを使用して、次のコマンドを実行することで、基本的なユニアプリ プロジェクトを作成できます。

$ vue create -p dcloudio/uni-preset-vue my-project

ステップ 2: ユニアプリ オーディオ機能プラグインをインストールします
提供されていますuni-app コミュニティ内 豊富なプラグイン セットを使用して、プラグインを介してオーディオ録音機能を実装できます。 uni-audio-recorder プラグインを使用することをお勧めします。このプラグインは、オーディオの録音、一時停止、録音の継続などの機能を実装するためのシンプルで使いやすい API インターフェイスを提供します。
プロジェクトのルート ディレクトリで次のコマンドを実行して、uni-audio-recorder プラグインをインストールします:

$ npm install uni-audio-recorder

uni-audio-recorder プラグインを構成ファイルに追加します。ローカル リソースやその他の関数を使用する必要がある場合は、次のコード構成を manifest.json ファイルに追加する必要もあります:

{
  "usingComponents": {
    "uni-audio-recorder": "uni-audio-recorder/uni-audio-recorder"
  },
  "permission": {
    "audioRecord": {
      "desc": "您的录音功能将被用于实现语音邮件,确定开启录音功能？"
    }
  }
}

ステップ 3: 記録ページを作成する
uni-app では、次のコード構成を使用できます。ページを作成するための Vue 構文。まず、pages ディレクトリに Recording.vue ファイルを作成し、その中に次のコードを追加します。

<template>
    <view class="container">
        <button @click="startRecord">开始录制</button>
        <button @click="pauseRecord">暂停录制</button>
        <button @click="resumeRecord">继续录制</button>
        <button @click="stopRecord">停止录制</button>
    </view>
</template>

<script>
    import uniAudioRecorder from 'uni-audio-recorder'
    export default {
        methods: {
            startRecord() {
                uniAudioRecorder.start({
                    success(res) {
                        console.log('录音开始成功', res)
                    },
                    fail(err) {
                        console.error('录音开始失败', err)
                    }
                })
            },
            pauseRecord() {
                uniAudioRecorder.pause()
            },
            resumeRecord() {
                uniAudioRecorder.resume()
            },
            stopRecord() {
                uniAudioRecorder.stop({
                    success(res) {
                        console.log('录音停止成功', res)
                    },
                    fail(err) {
                        console.error('录音停止失败', err)
                    }
                })
            }
        }
    }
</script>

<style>
    .container {
        display: flex;
        justify-content: space-around;
    }
</style>

ステップ 4: 記録機能の実行とテスト
実機のデバッグで uni-app プロジェクトを実行します。録音ページで「録音開始」ボタンをクリックして録音を開始します。 「録画一時停止」ボタンをクリックして録画を一時停止し、「録画継続」ボタンをクリックして前の録画を継続し、「録画停止」ボタンをクリックして録画を停止し、録画ファイルを取得します。同時に、uniAudioRecorder が提供するコールバック関数を通じて、録音プロセス中に発生する成功および失敗の状況を処理できます。

まとめ
上記の手順により、uni-app に音声録音機能を実装することができました。 uni-audio-recorder プラグインの API インターフェイスと Vue 構文サポートを使用すると、開発者はオーディオの録音、一時停止、録音の継続、録音の停止などの機能を簡単に実装できます。この記事が読者の役に立ち、オーディオ録音機能の開発がより簡単かつ効率的になることを願っています。

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