So fügen Sie Ihre eigene Aufnahme in Vue hinzu

So fügen Sie Ihre eigene Aufnahme in Vue hinzu

Mit der Popularität des mobilen Internets ist die Audioaufnahme nach und nach zu einer Standardfunktion vieler Anwendungen geworden. Beispielsweise erfordern Anwendungen wie Audionotizen und das Erlernen von Sprachen alle Sprachaufzeichnungsfunktionen. Es ist auch sehr einfach, eine eigene Aufnahmefunktion im Vue-Framework hinzuzufügen. Im Folgenden stellen wir Ihnen vor, wie Sie Ihre eigene Aufnahme in Vue hinzufügen.

1. Abhängigkeiten installieren

Vue implementiert die Aufzeichnungsfunktion durch die Installation von Abhängigkeiten von Drittanbietern. Wir können den chinesischen Namen der Bibliothek namens „Recorder“ verwenden und ihn über npm installieren:

npm install record-vuenpm install record-vue

二、添加录音组件

接下来我们需要在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
import RecordComponent from "@/components/RecordComponent.vue";

export default {
name: "App",
components: {

RecordComponent,

},
};
2cacc6d41bbb37262a98f745aa00fbf0`

2 Fügen Sie die Aufnahmekomponente hinzu

Als nächstes müssen wir die Aufnahme hinzufügen Mit dieser Aufnahmekomponente in Vue können Sie ganz einfach Audio aufnehmen und das aufgenommene Audio im Browserspeicher speichern. Schauen wir uns den folgenden Code an:

rrreee

dc6dce4a544fdca2df29d5ac0ea9906b

rrreee

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2🎜🎜3f1c4e4b6b16bbbd69b2ee476dc4f83a
import RecordComponent from „@/components/RecordComponent . vue";🎜🎜Standard exportieren {
Name: „App“,
Komponenten: {🎜rrreee🎜},
};
2cacc6d41bbb37262a98f745aa00fbf0` 🎜 🎜Wir verwenden diese Aufnahmekomponente als untergeordnete Komponente einer anderen Vue-Komponente, starten dann die Aufnahmefunktion durch Klicken auf eine Schaltfläche und stoppen die Aufnahme, wenn die Aufnahme endet. Natürlich können Sie es in der tatsächlichen Anwendung an Ihre eigenen Bedürfnisse anpassen. 🎜🎜4. Zusammenfassung🎜🎜In diesem Artikel werden die Schritte zum Hinzufügen Ihrer eigenen Aufnahmefunktion in Vue vorgestellt. Um die Aufnahmefunktion in Vue zu implementieren, müssen Sie eine Bibliothek eines Drittanbieters verwenden, dann die Aufnahmekomponente hinzufügen und sie dort einführen, wo die Aufnahme erforderlich ist. Jetzt können Sie versuchen, Ihre eigene Aufnahmefunktion in Vue hinzuzufügen und mehr über Vue zu erfahren. 🎜

Das obige ist der detaillierte Inhalt vonSo fügen Sie Ihre eigene Aufnahme in Vue hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!