[Vue.js] 토스트 팝업시 오디오 재생 가능? 브라우저의 자동 재생 정책은 안가능!

1. 토스트 팝업시 오디오 자동 재생 기능 작동 안 됨!

토스트 팝업시에 오디오 경고 알림이 자동적으로 재생되는 기능을 적용하였다. 하지만 mp3 오디오 파일은 재생되지 않았고 콘솔에 다음과 같은 에러만 출력되었다.

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

이 에러는 브라우저의 자동 재생 정책 때문에 발생하는 것이다. 최근의 브라우저는 사용자 상호작용 없이 자동으로 오디오 및 비디오를 재생하는 것을 제한하고 있다고 한다. 따라서 사용자의 상호작용이 있을 때만 자동으로 재생을 허용한다.

작성한 자바스크립트 코드는 아래와 같다.

// 오디오 파일 재생
fncSoundPlay(fileName) {
  // 정적 파일에 접근하기 위해 require 함수 사용
  const audio = new Audio(require(`@/assets/sound/${fileName}`));
  audio.load();
  audio.volume = 1;
  audio.play();
},

 

2. 사용자의 상호작용이 있어야 오디오 재생 가능

이 문제를 해결하려면 사용자의 상호작용 후에 오디오를 재생하도록 코드를 변경해야 한다. 예를 들어, 사용자가 페이지를 로드하거나 버튼을 클릭하는 등의 상호작용을 한 후에 오디오를 재생하도록 할 수 있다.

예를 들어, 페이지 로드 후에 오디오를 재생하고자 한다면 Vue.js의 `mounted` 라이프사이클 훅을 사용할 수 있다. 아래의 코드는 페이지가 로드되고 사용자가 페이지 어딘가를 클릭할 때 오디오를 재생하도록 한다. 사용자의 상호작용 후에 재생을 시도하므로 자동 재생 정책에 부합하게 된다.

// 오디오 파일 재생(클릭 이벤트 발생시 재생)
mounted() {
  this.fncSoundPlay('오디오 파일.mp3');
},
methods: {
  fncSoundPlay(fileName) {
    // 정적 파일에 접근하기 위해 require 함수 사용
    const audio = new Audio(require(`@/assets/sound/${fileName}`));
    audio.load();
    audio.volume = 1;

    // 사용자 상호작용 후에 오디오를 재생
    // 예: 페이지 로드 후에 재생하려면 다음과 같이 사용자 상호작용을 감지하고 호출
    document.addEventListener('click', () => {
      audio.play().catch(error => {
        console.error('오디오 재생에 오류가 발생했습니다:', error);
      });
    });
  },
},

 

3. Electron을 사용해 데스크톱 애플리케이션으로 변환하면 자동 재생 가능!

Electron을 사용하면 웹 애플리케이션을 데스크톱 애플리케이션으로 변환할 수 있다. Electron은 Chromium 기반의 브라우저 엔진을 사용하여 웹 기술(HTML, CSS, JavaScript)을 사용하여 데스크톱 애플리케이션을 개발할 수 있도록 해준다.

데스크톱 애플리케이션으로 변환할 때, 일반적으로 웹 브라우저의 자동 재생 정책과 관련된 문제는 크게 신경 쓰지 않아도 된다고 한다. Electron은 로컬 파일 시스템에 접근하고 로컬 리소스를 자유롭게 재생할 수 있는 환경을 제공하므로, 소리 재생과 관련된 문제는 발생하지 않는다고 한다.