vue に独自の録音を追加する方法

Vue に独自の録音を追加する方法

モバイル インターネットの普及に伴い、オーディオ録音は徐々に多くのアプリケーションの標準機能になってきました。たとえば、オーディオノートや語学学習などのアプリケーションにはすべて音声録音機能が必要です。 Vue フレームワークに独自の記録機能を追加することも非常に簡単です。以下では、Vue で独自の録音を追加する方法を紹介します。

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

Vue は、サードパーティの依存関係をインストールすることで記録機能を実装します。 「recorder」というライブラリの中国語名を使用し、npm 経由でインストールできます。

npm install Record-vue

2. 録音コンポーネントを追加します

次に、録音コンポーネントを Vue に追加する必要があります。この録音コンポーネントを使用すると、音声を簡単に録音し、録音された音声をブラウザのストレージに保存できます。次のコードを見てみましょう。

  <div>
    <button @click="start">开始录制</button>
    <button @click="stop">停止录制</button>
    <audio ref="audio"></audio>
  </div>
</template>

<script>
import Record from 'record-vue';

export default {
  name: 'RecordComponent',

  components: {
    Record
  },

  data() {
    return {
      mediaRecorder: null,
    }
  },

  methods: {
    start() {
      this.mediaRecorder = this.$refs.recorder.getMediaRecorder();
      this.mediaRecorder.start();
    },

    stop() {
      this.mediaRecorder.stop();
    }
  },

  mounted() {
    this.mediaRecorder = this.$refs.recorder.getMediaRecorder();

    this.mediaRecorder.ondataavailable = (blob) => {
      const audio = this.$refs.audio;
      audio.src = URL.createObjectURL(blob);
    }
  }
}
</script>```

三、使用录音组件

通过上面的代码，我们定义了一个包含开始录制、停止录制和音频播放的录音组件。现在，我们只需要在需要使用录音的组件中引入录音组件，然后使用它即可。例如，我们可以在下面的代码中使用录音组件：

dc6dce4a544fdca2df29d5ac0ea9906b

<RecordComponent />

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
「@/components/RecordComponent.vue」から RecordComponent をインポート;

デフォルトをエクスポート {
名前: "App",
コンポーネント: {

RecordComponent,

},
};
2cacc6d41bbb37262a98f745aa00fbf0`

この記録コンポーネントを別の Vue コンポーネントのサブコンポーネントとして使用し、ボタンをクリックして記録機能を開始します。録音中 終了したら録音を停止します。もちろん、実際のアプリケーションでは、必要に応じて調整できます。

4. 概要

この記事では、Vue に独自の記録機能を追加する手順を紹介します。 Vue で録音機能を実装するには、サードパーティのライブラリを使用し、録音コンポーネントを追加して、録音が必要な場所に導入する必要があります。ここで、Vue に独自の記録機能を追加して、Vue について詳しく学ぶことができます。

以上がvue に独自の録音を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。