[Vue] audio player 사용

vue에서 audio 파일을 재생하는 것은 아주 간단하다.

 

1.

vuetify에서 제공하는 v-btn 컴포넌트를 사용하였지만 div에 click event를 넣어줘서 해도 상관 없다.

오디오 소스를 입력하고 자바스크립트로 동작시켜주면 버튼을 눌렀을 때 음성이 나온다.

pause()를 통해 정지시킬 수도 있다.

            <v-btn
              @click="
                play(
                  'http://www.hochmuth.com/mp3/Boccherini_Concerto_478-1.mp3'
                )
              "
            >

   play(sound) {
      var audio = new Audio(sound);
      audio.play();
    },

 

2.

라이브러리를 활용하면 조금 더 사용성 있는 화면을 만들 수 있다.

github.com/wilsonwu/vuetify-audio?ref=madewithvuejs.com

wilsonwu/vuetify-audio

을 따라해보자.

 

 

 

방법1과 2를 통해 만든 화면