uniappに音声録音機能を実装する方法-uni-app-php.cn

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

王林

リリース： 2023-07-04 20:15:07

オリジナル

3729 人が閲覧しました

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 サイトの他の関連記事を参照してください。