Vue에 자신의 녹음을 추가하는 방법

Vue에서 나만의 녹음을 추가하는 방법

모바일 인터넷의 인기로 인해 오디오 녹음은 점차 많은 애플리케이션의 표준 기능이 되었습니다. 예를 들어 오디오 노트, 언어 학습 등의 애플리케이션에는 모두 음성 녹음 기능이 필요합니다. Vue 프레임워크에 자신만의 녹음 기능을 추가하는 것도 매우 쉽습니다. 아래에서는 Vue에 자신만의 녹음을 추가하는 방법을 소개합니다.

1. 종속성 설치

Vue는 타사 종속성을 설치하여 녹화 기능을 구현합니다. "recorder"라는 라이브러리의 중국어 이름을 사용하고 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 녹음 구성 요소 추가

다음으로 녹음을 추가해야 합니다. Vue의 녹음 구성 요소인 이 녹음 구성 요소를 사용하면 오디오를 쉽게 녹음하고 녹음된 오디오를 브라우저 저장소에 저장할 수 있습니다. 다음 코드를 살펴보겠습니다.

rrreee

dc6dce4a544fdca2df29d5ac0ea9906b

rrreee

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2🎜🎜3f1c4e4b6b16bbbd69b2ee476dc4f83a
import RecordComponent from "@/comComponents/RecordComponent .vue";🎜🎜내보내기 기본 {
이름: "앱",
구성 요소: {🎜rrreee🎜},
};
2cacc6d41bbb37262a98f745aa00fbf0` 🎜 🎜이 녹음 구성 요소를 다른 Vue 구성 요소의 하위 구성 요소로 사용한 다음 버튼을 클릭하여 녹음 기능을 시작하고 녹음이 끝나면 녹음을 중지합니다. 물론 실제 적용에서는 필요에 따라 조정할 수 있습니다. 🎜🎜4. 요약🎜🎜이 글에서는 Vue에 나만의 녹음 기능을 추가하는 단계를 소개합니다. Vue에서 녹음 기능을 구현하려면 타사 라이브러리를 사용한 다음 녹음 구성 요소를 추가하고 녹음이 필요한 곳에 도입해야 합니다. 이제 Vue에 자신만의 녹음 기능을 추가하고 Vue에 대해 자세히 알아볼 수 있습니다. 🎜

위 내용은 Vue에 자신의 녹음을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!