HTML5에서 src 속성으로 원시 바이너리 데이터 활용하기

오디오 파일이 데이터베이스에 저장되어 있고, 이 파일을 애플리케이션에서 blob 또는 바이너리 형태로 사용해야 하는 경우를 생각해 볼 수 있습니다. 오디오 소스가 세션 정보에 따라 동적으로 결정된다면, ${sessionScope.user.music} 표현식을 통해 해당 바이너리 데이터를 반환받을 수 있습니다.

이렇게 가져온 오디오 파일을 HTML5의 <audio> 태그로 재생하려면 data:audio/mp3;base64 형식의 데이터 URI(Data URI)가 잘 작동합니다.

데이터 URI란?

데이터 URI 스킴은 외부 파일 요청 없이 리소스를 직접 인라인으로 포함할 수 있게 해주는 방식입니다. 서버 측에서 바이너리 데이터를 Base64로 인코딩한 뒤 src 속성에 넣어주면, 브라우저가 이를 자동으로 디코딩하여 정상적으로 재생하거나 표시합니다. 세션 기반으로 매번 변경되는 미디어 소스를 처리할 때 특히 유용합니다.

이미지 태그에서의 활용 예시

이미지의 경우 <img> 태그를 다음과 같이 사용합니다:

<img src="data:image/gif;base64,소스" width="30" height="25" alt="My Image">

오디오 태그에 적용하기

마찬가지로 오디오도 <audio> 태그에 data:audio/mp3 형식의 데이터 URI를 사용하면 됩니다. 이를 통해 데이터베이스나 세션에 저장된 원시 바이너리 데이터를 별도의 임시 파일 생성 과정 없이 곧바로 웹 페이지에서 재생할 수 있습니다.