Vueを使ってAPPレコーディング機能とアップロード機能を実装する方法

近年、モバイルアプリの普及に伴い、音声の録音やアップロードの需要が日に日に高まっています。 Vue フレームワークでは、HTML5 の新機能と組み合わせることで、APP レコーディング機能を簡単に実装してアップロードできます。この記事では、Vue を使用して APP 録音機能を実装し、アップロードする方法を共有します。これにより、音声録音とアップロード機能を簡単に実装できます。

1. 前提条件

まず、記録機能は HTML5 の新機能を使用する必要があることを明確にする必要があるため、記録機能を実装する前に、ブラウザ互換性セックス。

2019 年現在、ほとんどのモバイル ブラウザーはすでに新しい HTML5 機能をサポートしていますが、互換性のないブラウザーもまだいくつかあります。実際のアプリケーションでは、Modernizr ライブラリを使用して、ブラウザが新しい HTML5 機能をサポートしているかどうかを確認できます。

2. 実装手順

1. 構成環境

Vue をインストールする前に、Node.js と NPM をインストールする必要があります。インストールが完了したら、コマンド ライン ツールを開き、次のコマンドを実行して Vue-cli をインストールします。

npm install -g vue-cli

インストールが完了したら、次のコマンドを使用して新しい Vue プロジェクトを作成できます。

vue init webpack my-project

ここで、「my-project」はユーザーが定義できるプロジェクト名です。次に、コマンドラインに表示される手順に従って構成します。

2. 依存関係のインストール

Vue プロジェクトを作成した後、vue-audio-recorder や など、必要な依存関係をいくつかインストールする必要があります。アクシオス。まず、次のコマンドを使用して vue-audio-recorder をインストールする必要があります:

npm install vue-audio-recorder --save

次に、次のコマンドを使用して axios をインストールします:

npm install axios --save

上記の 2 つ この依存関係は、記録機能とアップロード機能を実装するために必須です。

3. コードの記述

環境構成と依存関係のインストールが完了したら、記録機能を実装するコードを記述する必要があります。まず、次のコードを Vue コンポーネントにインポートします。

import AudioRecorder from 'vue-audio-recorder'
import axios from 'axios'

次に、Vue コンポーネントに次の状態を定義します。

data() {
  return {
    audioSrc: '',
    audioName: ''
  };
}

このうち、audioSrc はリンク アドレスを表します。 audioName は録音ファイルの名前です。

次に、Vue コンポーネントに次のコードを記述して録音を実装します。

mounted() {
  this.audioRecorder = new AudioRecorder({
    onComplete: (blob)=>{
      // 上传录音文件
      this.uploadAudio(blob);
    },
  });
},
methods: {
  startRecord() {
    this.audioRecorder.start();
  },
  stopRecord() {
    return this.audioRecorder.stop()
        .then((blob) => {
          // 保存录音blob对象到变量中
          this.audioBlob = blob;
          // 设置录音链接地址
          this.audioSrc = URL.createObjectURL(blob)
        })
        .catch(() => {
          console.log('Media recording failed');
        });
  },
  uploadAudio(audioFile) {
    var formData = new FormData();
    formData.append("audio", audioFile, this.audioName);

    axios.post('/api/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }).then(response => {
      console.log(response.data);
      if (response.status == 200) {
        console.log("上传成功");
      } else {
        console.log("上传失败");
      }
    }).catch(() => {
      console.log("网络异常");
    })
  }
}

このうち、audioRecorder が録音オブジェクトで、onCompleteは録音が完了したことを示します。コールバック関数 startRecord は録音開始関数、stopRecord は録音停止関数、uploadAudio 関数は次の目的で使用されます。録音ファイルをアップロードします。

これまでで、録音機能の実装が完了しました。ユーザーは、Vue テンプレートに記録ボタンを追加し、ボタンの @click イベントで startRecord 関数を呼び出して記録を開始し、開始時に stopRecord 関数を呼び出すことができます。録音が終了します。録音を終了してアップロードします。

3. まとめ

上記の手順により、Vue の APP レコーディング機能を簡単に実装し、アップロードすることができます。 HTML5 の新機能と Vue フレームワークを使用すると、このタスクを簡単に実行できます。実装の鍵は、vue-audio-recorder ライブラリと axios 依存関係を使用して、プロセス全体をシンプルで楽しいものにすることです。

以上がVueを使ってAPPレコーディング機能とアップロード機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。