Comment ajouter votre propre enregistrement dans vue

Comment ajouter votre propre enregistrement dans Vue

Avec la popularité de l'Internet mobile, l'enregistrement audio est progressivement devenu une fonctionnalité standard de nombreuses applications. Par exemple, des applications telles que les notes audio et l’apprentissage des langues nécessitent toutes des fonctions d’enregistrement vocal. Il est également très simple d'ajouter votre propre fonction d'enregistrement dans le framework Vue. Ci-dessous, nous expliquerons comment ajouter votre propre enregistrement dans Vue.

1. Installer les dépendances

Vue implémente la fonction d'enregistrement en installant des dépendances tierces. Nous pouvons utiliser le nom chinois de la bibliothèque appelé "recorder" et l'installer via npm :

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 Ajoutez le composant d'enregistrement

Ensuite, nous devons ajouter l'enregistrement. composant dans Vue, ce composant d'enregistrement vous permet d'enregistrer facilement de l'audio et de sauvegarder l'audio enregistré dans le stockage du navigateur. Jetons un coup d'œil au code suivant :

rrreee

dc6dce4a544fdca2df29d5ac0ea9906b

rrreee

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2🎜🎜3f1c4e4b6b16bbbd69b2ee476dc4f83a
importer RecordComponent depuis "@/components/RecordComponent . vue";🎜🎜export par défaut {
nom : "App",
composants : {🎜rrreee🎜},
};
2cacc6d41bbb37262a98f745aa00fbf0` 🎜 🎜Nous utilisons ce composant d'enregistrement comme composant enfant d'un autre composant Vue, puis démarrons la fonction d'enregistrement en cliquant sur un bouton et arrêtons l'enregistrement à la fin de l'enregistrement. Bien entendu, dans l'application réelle, vous pouvez l'ajuster en fonction de vos propres besoins. 🎜🎜4. Résumé🎜🎜Cet article présente les étapes pour ajouter votre propre fonction d'enregistrement dans Vue. Pour implémenter la fonction d'enregistrement dans Vue, vous devez utiliser une bibliothèque tierce, puis ajouter le composant d'enregistrement et l'introduire là où l'enregistrement est nécessaire. Maintenant, vous pouvez essayer d'ajouter votre propre fonction d'enregistrement dans Vue et en savoir plus sur Vue. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!