Vue 음악을 가져오는 방법

인터넷 기술의 지속적인 발전과 대중화로 인해 음악은 사람들의 일상생활에서 없어서는 안 될 부분이 되었습니다. 인기 있는 프런트엔드 프레임워크인 Vue는 음악 웹사이트 개발도 촉진합니다. 하지만 Vue를 사용하여 음악 웹사이트를 개발할 때 음악 파일을 가져오는 방법에 주의해야 합니다. 이 문서에서는 음악을 가져오는 몇 가지 일반적인 방법을 소개합니다.

1. src를 통해 오디오 파일 소개

Vue 구성 요소에서는 템플릿의 img 및 video 태그를 사용하여 이미지 및 비디오 파일을 소개할 수도 있습니다. 마찬가지로 템플릿의 audio 태그를 사용하여 오디오 파일을 소개할 수도 있습니다. .

코드 예:

<template>
  <div>
    <audio src="./audio/music.mp3"></audio>
  </div>
</template>

"./audio/music.mp3" 여기에는 현재 프로젝트의 오디오 폴더 아래에 music.mp3라는 오디오 파일이 있음을 나타내는 상대 경로가 있습니다. 실제 상황에 따라 자신만의 파일 경로와 파일 이름으로 수정하실 수 있습니다. 이 방법을 사용하면 Vue 구성 요소에서 오디오 파일을 가져와서 페이지에서 재생할 수 있습니다.

2. ES6 모듈식 구문을 사용하세요

Vue로 개발할 때 패키징과 빌드를 위해 webpack과 결합하는 경우가 많습니다. ES6의 모듈식 구문을 사용하여 오디오 파일을 모듈로 vue 구성 요소로 가져올 수 있습니다.

1. 파일 로더 설치

먼저 파일 로더를 설치해야 합니다. 설치하려면 터미널에서 다음 명령을 사용하세요.

npm install file-loader --save-dev

2. 새 audio.js 파일 만들기

src 디렉터리에 새 audio.js 파일을 만들고 그 안에 다음 코드를 작성하세요.

import music from "./audio/music.mp3";

export default {
  music
}

모듈형 구문 여기서는 ES6를 사용하여 music.mp3를 audio.js 파일로 가져오고, 내보내기 기본값을 통해 music이라는 변수를 내보냈습니다. 이러한 방식으로 music.mp3는 다른 구성 요소에서 가져와 사용할 수 있는 모듈 파일이 됩니다.

3. vue 구성 요소에 사용됨

오디오 파일을 사용해야 하는 vue 구성 요소에서는 import 문을 사용하여 오디오 파일을 도입할 수 있습니다.

<script>
import audio from '@/audio';

export default {
  name: "Music",
  data() {
    return {
      music: audio.music
    }
  }
}
</script>

<template>
  <div>
    <audio :src="music" controls>
      Your browser does not support the audio element.
    </audio>
  </div>
</template>

여기서 "@/audio"는 audio.js에 있음을 의미합니다. src 디렉터리의 파일 내보낸 콘텐츠입니다. :src를 사용하여 데이터를 바인딩하고 오디오 파일의 주소를 오디오 태그에 전달하여 페이지에서 오디오 파일을 재생합니다.

3. 타사 플러그인 사용

위 방법으로 오디오 파일을 가져오는 것이 번거롭다면 타사 플러그인 사용을 고려해 볼 수도 있습니다. 다음은 일반적으로 사용되는 몇 가지 Vue 오디오 플러그인입니다.

1. vue-audio: Vue.js를 사용하여 웹 페이지 오디오를 재생하는 플러그인을 만듭니다.

Github 주소: https://github.com/shershen08/vue-audio

2. vue-audio-player: 로컬 및 온라인 오디오 재생을 지원하는 Vue.js 기반 오디오 플레이어 플러그인입니다.

Github 주소: https://github.com/shawjia/vue-audio-player

3. vue-audio-recorder: Vue.js 오디오 레코더 플러그인, 오디오 녹음, 녹음된 오디오 재생 및 녹음 일시 중지 지원 , 녹음된 오디오 및 기타 기능을 삭제합니다.

Github 주소: https://github.com/grishkovelli/vue-audio-recorder

위 플러그인은 특정 필요에 따라 선택하여 사용할 수 있습니다.

요약:

이 기사에서는 src를 통한 오디오 파일 도입, ES6 모듈식 구문을 사용하여 오디오 파일 가져오기, 타사 플러그인 사용 등 Vue에서 오디오 파일을 가져오는 세 가지 일반적인 방법을 소개합니다. 음악 웹 사이트를 개발할 때 오디오 파일을 가져오는 적절한 방법을 선택하면 개발 효율성이 높아지고, 코드가 단순해지고, 사용자 경험이 향상될 수 있습니다.

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