[vue.js] audio file upload

 

audio tag upload

오디오 tag 업로드 구현하기

기본적으로 오디오 태그는 controls 이용하면, 위 그림과 같이 내장된 툴이 생성된다.

 <audio class="player" controls ref="player">
     <source src="" ref="source"> 
 </audio>

기본적으로 파일 업로드를 위해서는 Input Tag를 이용하여 업로드를 구현해야한다.

<input type="file" id="soundFileInput" class="soundFileInput" 
       accept="audio/*"
       @change="onAudioSelected" />  

위와 같이 input tag 를 작성했으면, 업로드를 위해서 change 이벤트를 이용해 구현하자.

 onAudioSelected(e){
       const uploadSound = event.target.files[0];
       
       const audioSrc = window.URL.createObjectURL(uploadSound);
       
       this.$refs.source.src = audioSrc;
             
       this.$refs.player.load(); //업로드완료 후 파일로딩
       
       event.target.value =''; //다른거 업로드할때를 위해 초기화
      }
    },

업로드를 하면, audio tag 안에 source를 가져와 src 에다가 주소값으로 변환한 audioSrc를 넣어주고,

Audio 태그에 load 시켜주면 끝난다.

초기화해야할 경우는 아래와 같이 src를 초기화해주고 똑같이 load 시켜주면 된다.

 this.$refs.source.src = '';
 this.$refs.player.load();

 

참고자료 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/audio