생각의 흐름
splice 사이트를 보면 음향의 파형이 사운드에 맞게 그려져 있다. 그래서 내 생각엔 파일을 업로드 할 때 한번 재생시켜보고, 해당 파형을 분석 후에 이미지파일로 저장하는 것 같다는 생각을 했고(물론 추측일 뿐이다.), 소리 파일을 파형으로 전환하는 것을 한번 해보고 싶었다.
근데 파일을 어떻게 해도 재생이 안돼서 일단 업로드와 재생 문제부터 한번 해결해보자는 결론에 도달.
미리 프로젝트 세팅을 하고 화면띄우는 것 까지 해둬서 파일 업로드 및 재생에 필요한 컨트롤러 클래스와 테스트용 JSP를 만들어줬다. (사실 인텔리제이에서 작업하고 싶어서 꽤나 애를 먹었는데 이 과정을 포스팅하겠다는 생각을 못해서 기록이 없다 ㅠㅠ)
package com.example.blackbirdlofi.controller;
import jakarta.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
@Controller
public class FileUploadController {
private static final String UPLOAD_DIR = "uploads/";
@GetMapping("/usr/home/test")
public String showTestPage() {
return "usr/home/test"; // "WEB-INF/jsp/usr/home/test.jsp" 페이지를 렌더링
}
@PostMapping("/upload")
public String uploadFile(@RequestParam("file") MultipartFile file, Model model, HttpServletRequest request) {
if (file.isEmpty()) {
model.addAttribute("message", "파일을 선택해주세요.");
return "usr/home/test";
}
try {
String uploadDirPath = request.getServletContext().getRealPath("/") + "uploads/";
File uploadDir = new File(uploadDirPath);
if (!uploadDir.exists()) {
uploadDir.mkdirs();
}
String fileName = file.getOriginalFilename();
File dest = new File(uploadDirPath + fileName);
file.transferTo(dest);
String fileUrl = request.getContextPath() + "/uploads/" + fileName;
model.addAttribute("fileUrl", fileUrl);
} catch (IOException e) {
e.printStackTrace();
model.addAttribute("message", "파일 업로드 중 오류가 발생했습니다.");
return "usr/home/test";
}
return "usr/home/test";
}
}그리고 JSP
<%--
Created by IntelliJ IDEA.
User: han-yeongsin
Date: 2024. 8. 29.
Time: 오전 11:29
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>WAV 파일 업로드 및 재생</title>
</head>
<body>
<h1>WAV 파일 업로드 및 재생</h1>
<form action="${pageContext.request.contextPath}/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file" accept=".wav" required/>
<button type="submit">업로드 및 재생</button>
</form>
<c:if test="${not empty fileUrl}">
<h2>업로드된 파일:</h2>
<audio controls>
<source src="${fileUrl}" type="audio/wav">
Your browser does not support the audio element.
</audio>
</c:if>
<c:if test="${not empty message}">
<p style="color:red;">${message}</p>
</c:if>
</body>
</html>챗 GPT를 고문시키고 조금씩 수정해서 얻은 결과였다.
화면 띄우는 것 자체가 안돼서 이래저래 애를 먹었었는데
문제의 정확한 원인은 파악하지 못했지만 JSP 단계에서 문제가 있다는 판단까지는 도달할 수 있었다. 그래서 강사님이랑 진행했던 코드를 찬찬히 살펴보았고<%@ page contentType="text/html;charset=UTF-8" %>이게 원인인 것을 알게되어 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>이렇게 수정해줬다. 그래서 해결을 해냈고 이게 문제라는 것이 정확해졌으니 이게 왜 문제였는가를 서술해보자면,
문제의 원인
인코딩 문제. 한글을 써뒀는데 UTF-8 설정을 잘못주고 있었다. 어쩐지 다 지우고 페이지만 로드할 때는 페이지 로딩이 잘 됐었다. 영어로 써두고 나중에 고쳤으면 꽤나 고생햇을 것 같다.
pageEncoding="UTF-8"의 필요성: JSP 파일 자체가 UTF-8 인코딩으로 작성되었음을 명확히 하여, 파일을 읽을 때 올바른 인코딩 방식이 적용되도록 한다. 이 속성이 설정되지 않으면 잘못된 인코딩 방식이 적용되어 JSP 파일이 올바르게 컴파일되지 않을 수 있다.
contentType와 pageEncoding의 차이점: contentType은 응답의 인코딩 방식을 설정하는 반면, pageEncoding은 JSP 파일 자체의 인코딩 방식을 설정한다. 둘 다 올바르게 설정되어야 JSP 페이지가 기대한 대로 동작한다.
비교해서 보면 pageEncoding 자체가 빠져있어서 한글 로딩 이슈라고 보면 될 것 같다.
아무튼간에 업로드 및 재생까지 성공을 시켰다. 화면상으로는
이렇게 나온다. 파일을 이미 업로드 한 상태고, 재생버튼을 클릭하면 소리도 잘 나온다.
이제는 다운로드까지 한번 구현해보면 될 것 같다.
'Coding History > project' 카테고리의 다른 글
| 로그인 기능 구현 (0) | 2024.09.03 |
|---|---|
| Spring Wav 파일 업로드 후 나의 생각. (firebase를 사용해서 파일 업다운로드) (0) | 2024.09.01 |
| Figma 작업 단계 (1) | 2024.08.30 |
| 스포티파이 for Developers 튜토리얼 번역 ( 5 ) (0) | 2024.08.29 |
| 스포티파이 for Developers 튜토리얼 번역 ( 4 ) (0) | 2024.08.29 |