프레임워크
NuxtJS에서 오디오 출력을 위해서
<audio> 태그를 사용하였으나
인코딩에 따른 파싱 에러가 발생하였습니다. 이 경우 해결 방법을 간략히 알아봅니다.
# NuxtJS Audio 태그 사용시 에러 해결 방법
audio 태그를 사용하여 음성을 출력하려고 했으나 에러가 발생했습니다. 제일 먼저 에러의 로그를 확인해보니 원인은
NuxtJS에서 사용되는 Webpack의 트랜스파일링 과정에서 에러였습니다. 좀 더 확인해보니 음성 파일을 /assets 경로에 추가하여 사용하였는데 이 부분이 문제였습니다. assets에 저장된 static 파일을 그냥 사용하지 않기 때문이었죠.
해결 방법은 Webpack을 사용하지 않고 불러오면 해결될 수 있었습니다. 가장 먼저 /assets에 위치한 음성 파일(mp3 또는 wav) 등을 /static으로 이동해서 사용하면 해결됩니다. 이 때 주의할 부분은 nuxt에서 /statics 경로를 따로 지정할 필요 없다는 부분이죠. 즉 아래와 같습니다.
( O ) /static/my-sound.wav
( X ) /my-sound.wav
간단하게 해결되었습니다. 이제 해결 과정을 순서대로 정리하면 아래와 같습니다.
- <audio /> 태그 사용시 Webpack이 사용되면서 인코딩 에러 발생
- 사용된 src의 경로가 nuxtjs 앱의 /assets를 바라보고 있어 변경이 필요
- /assets에서 사용한 경로를 /statics으로 변경하기 위해 파일을 이동
- 정상적으로 잘 동작 확인
여기까지 에러 해결 과정은 끝입니다.
! audio 태그 자동재생 autoplay 사용하기
추가로 위의 이슈는 잘 동작했는데
<audio>의
autoplay인 자동재생이 동작하지 않았습니다. 앱에 들어올 때 자동으로 재생되게 하려고 했지만 잘 되지 않았죠. 이 경우 <video> 태그와 동일하게
muted 어트리뷰트를 사용하니 동작하더군요. 자동재생이 필요한 경우 이렇게 해결할 수 있습니다. 하지만 muted는 소리가 나지 않으므로 어떻게 할까요?
결국 muted 방법이 아니라면 자동으로 스크립트를 재생하도록 아래와 같이 마운트 시점에 자동재생 코드를 작성할 수도 있겠습니다. 아래 코드를 봐주세요.
<template>
<audio ref="audioEle">
<source src="/my-sound.mp3" />
</audio>
</template>
<script>
import { onMounted, ref } from 'vue';
export default {
setup() {
const audioEle = ref(null)
onMounted(() => {
audioEle.value.play()
})
}
return {
audioEle
}
}
</script>
스크립트를 사용하여 자동재생 하도록 만든 간략한 코드입니다. 자동재생되도록 onMounted() 라이프사이클 내부에 ref를 사용하여 엘리먼트를 가져온 후 play() 메소드를 수행한 방법입니다.
audioEle.value.play()
음성 파일을 muted되지 않고 사용하려면 위와 같이 play() 메소드를 사용하여 마운트 시점에 자동으로 재생되도록 설정이 필요할 수 있겠습니다.
여기까지 nuxtjs에서 발생한 audio 태그 에러의 해결 방법과 자동재생 autoplay 방법을 같이 알아보았습니다.