웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > vue

[NuxtJS] audio 태그 에러 발생시 해결 방법 및 autoplay 사용하기

Last Modified : 2023-02-17 / Created : 2023-02-17
2,317
View Count
프레임워크 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 방법을 같이 알아보았습니다.

Previous

[NuxtJS] 특정 페이지의 컴포넌트에만 전역 스타일 적용하기, global style

Previous

[Nuxtjs] useFetch() 파라미터 및 쿼리스트링 변경시 다이나믹한 refresh 방법