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

# 서론

 브라우저에서 곧바로 내 로컬 파일에 있는 Mp3를 재생시키는 기능을 구현하려고 하니 Chrome에서는 정책상 불가능했다. 방법에 대해 고민하다 지인에게 파일을 서버단에서 읽어 클라이언트로 보내 재생하라는 조언을 들었고 기능을 구현해 작성해 놓고자 한다.

#본론

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

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

둘째, 해당 파일을 통신가능하게 변환한다.

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

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

다섯째, 재생한다.

1. 자바에서 파일을 읽어들인다 (playAudio메소드) & 해당 파일을 통신가능하게 변환한다(fileToString메소드)

// 읽어들이는 파일을 컨트롤러를 통해 보내기 위해 적재하는 메소드
public LinkedHashMap playAudio(HashMap param) throws Exception{
		
        		//파일을 파일객체에 넣는다/
			File file = new File("C://sample4.mp3");
            
            		//읽은 파일을 아래[fileToString] 메소드를 통해 String으로 변환한다.
			String base64 = fileToString(file);
            
            		//Map형태의 result에 담는다.
			LinkedHashMap result = new LinkedHashMap();
			result.put("audio", base64);
			
			return result;
			
	}
	
// 파일 읽어들이는 메소드
@SuppressWarnings("resource")
public String fileToString(File file) throws IOException {
		
        //필요한 객체들을 세팅한다.
        //스트링으로 최종변환한 값을 담는 객체
	    String fileString = new String();
        //읽은 파일을 인풋 스트림으로 활용하기 위한 객체
	    FileInputStream inputStream =  null;
        //읽은 스트림을 바이트배열로 만들기 위한 객체
	    ByteArrayOutputStream byteOutStream = null;

		//파일을 인풋 스트림 객체에 넣는다.
        inputStream = new FileInputStream(file);
        byteOutStream = new ByteArrayOutputStream();
        int len = 0;
        //바이트 배열임시생성 (왜 1024인지는 모른다 안다면 댓글부탁 드립니다.)
        byte[] buf = new byte[1024];

		//읽어들인 스트림이 False(-1)이 아닐때까지 루프를 돌린다.
        while ((len = inputStream.read(buf)) != -1) {
        	//byte배열로 데이터를 입출력하는기 위해 읽어들인다. 
             byteOutStream.write(buf, 0, len);
             
        }
		
        //바이트배열에 읽은 스트림을 넣는다.
        byte[] fileArray = byteOutStream.toByteArray();
        
        
        Encoder encoder = Base64.getEncoder();
        byte[] encoderResult = null;
        //읽어들인 바이트배열을 통신을위한base64로 인코딩해서 바이트배열에 넣는다.
        encoderResult = encoder.encode(fileArray);
        
        //해당 바이트 배열을 스트링으로 변환한다.
        fileString = new String(encoderResult);
	    
	    return fileString;

	}

 

2. 클라이언트에서 해당 파일을 받는다 -1 (클라이언트와 통신하기 위한 controller를 만든다)

	@ResponseBody
	@RequestMapping(value = "/cusvoice/audio", method = RequestMethod.POST)
	public LinkedHashMap getAudio(@RequestBody LinkedHashMap param) throws Exception{
    	//위에 스트링으로 만들어준 객체를 답변을 위한 해쉬맵 객체에 넣어
        //프론트로 보내기 위해 적재
		return customerService.playAudio(param);
	}

 

계속

https://meotlog.tistory.com/41?category=966502 

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

# 여담

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