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

三、使用录音组件

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

<RecordComponent />

<script> <br>「@/components/RecordComponent.vue」から RecordComponent をインポート;</p><p>デフォルトをエクスポート {<br> 名前: "App",<br> コンポーネント: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>RecordComponent,</pre><div class="contentsignin">ログイン後にコピー</div></div><p>},<br>};<br></script>`

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

4. 概要

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

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