Java(Spring)와 JavaScript(vue.js)로 서버단 Mp3파일 클라이언트로 보내 재생하기 - 2.JavaScript

# 앞선 글

Java(Spring)와 JavaScript(vue.js)로 서버단 Mp3파일 클라이언트로 보내 재생하기 - 1.Java

https://meotlog.tistory.com/40

Java(Spring)와 JavaScript(vue.js)로 서버단 Mp3파일 클라이언트로 보내 재생하기 - 1.Java

#본론

 구현하는 흐름은 다음과 같다.

첫째, 자바(서버)에서 파일을 읽어들인다.

둘째, 해당 파일을 통신가능하게 인코딩한다.

셋째, 클라이언트에서 해당 파일을 받는다.

넷째, 해당 파일을 재생하기위해 디코딩한다.

다섯째, 재생한다.

3. 클라이언트에서 해당 파일을 받는다 -2 (서버와 통신하기 위해 ajax를 활용한다.) &디코딩한다. & 재생한다.

//fileSrc는 DB에서 읽어온 파일의 경로를 UI에서 클릭했을 시 보내주는 파라미터이다.
function setAudio(fileSrc){
	var v = this;
				
  $.ajax({
      type : 'post',
      url : '/cusvoice/cusvoice/audio', 
      dataType : json, 
      data : {fileSrc : fileSrc},
      success : function(res) { 
      
      //Controller에서 통신해 받아온 값을 base64인코딩을 해제한다.
      const data = v.base64ToArrayBuffer(res.audio);

	  //base64인코딩을 해제한 바이너리data를 변수에 담는다.
      const uInt8Array = new Uint8Array(data);
      
      // Blob Object 를 생성한다.
      const blob = new Blob([uInt8Array], {type: 'audio/mp3'});
      
      //blob으로 만든 객체를 재생시키기 위해 url로 주소를 만들어 객체에 담는다.
      const url = URL.createObjectURL(blob);
      
      //해당 주소를 audio객체를 만들어 소스에 넣고 플레이시킨다.
      const audio = new Audio();
      audio.src = url;
      audio.play();
      }
  })

}


//base64 인코딩을 해제하기 위한 함수
function base64ToArrayBuffer(base64){
	//인코딩 해제해 바이너리 스트링으로 받기
    const binary_string = window.atob(base64);
    //해당 길이가 필요해 변수에 적재
    const len = binary_string.length;
    //??이부분 ~ 밑에 루프가 이해가 잘 되지 않는다.
    const bytes = new Uint8Array(len);

    for (var i = 0; i < len; i++) {
    	bytes[i] = binary_string.charCodeAt(i);
    }

    return bytes.buffer;
}

 

# 여담

파일을 바이너리로 변환해서 그걸 다시 base64로 인코딩한다는건 통신과 컴퓨터일반에 대한 기본지식을 가지고 있어야 떠올릴 수 있는 해결방법 이었다. 그렇기 때문에 오늘도 컴퓨터와 통신과 같은 이론지식의 갈고닦음이 필요함을 깨닳았다.