SweetAlert는 사용자에게 아름답고 직관적인 경고창을 제공하는 JavaScript 라이브러리입니다. 기본적으로 경고창이 나타날 때 소리 효과를 제공하지만, 기본 설정에서는 소리가 한 번만 재생됩니다. 하지만, SweetAlert를 통해 경고 메시지에 반복적인 소리를 추가하는 방법이 있습니다. 이번에는 SweetAlert의 소리 반복 기능을 구현하는 방법을 알아보겠습니다.

Step 1: SweetAlert 설치

먼저, SweetAlert를 사용할 수 있도록 프로젝트에 설치해야 합니다. SweetAlert는 npm을 통해 설치할 수 있습니다. Terminal 또는 Command Prompt를 열고 다음 명령을 실행하세요:

npm install sweetalert

Step 2: SweetAlert 경고창 생성

SweetAlert 경고창을 생성하기 위해 다음과 같이 JavaScript 코드를 작성합니다:

import swal from 'sweetalert';

swal("소리 반복 기능", "SweetAlert 소리 반복 기능을 구현하세요.", "warning");

위 코드는 SweetAlert를 사용하여 경고 메시지가 있는 경고창을 생성하는 예시입니다. “소리 반복 기능”이 경고창의 제목이고, “SweetAlert 소리 반복 기능을 구현하세요.”이 경고 메시지입니다. 마지막으로 “warning”은 경고 아이콘을 나타냅니다.

Step 3: 소리 반복 기능 추가

이제 SweetAlert의 기본 설정에서 소리가 한 번만 재생되는 것을 수정하여 반복적으로 소리가 재생되도록 설정하겠습니다. 다음과 같이 JavaScript 코드를 추가해주세요:

import swal from 'sweetalert';

swal({
  title: "소리 반복 기능",
  text: "SweetAlert 소리 반복 기능을 구현하세요.",
  icon: "warning",
  button: "닫기",
  timer: 3000,
  onOpen: () => {
    const audioElement = new Audio('sound/alert.mp3');
    audioElement.loop = true;
    audioElement.play();
  },
  onClose: () => {
    const audioElement = document.querySelector('audio');
    audioElement.pause();
    audioElement.currentTime = 0;
  }
});

위 코드에서 onOpen 콜백 함수는 경고창이 열릴 때마다 소리를 반복적으로 재생합니다. onClose 콜백 함수는 경고창이 닫힐 때 소리를 중지하도록 설정합니다. timer 속성은 경고창이 자동으로 닫히는 시간을 설정합니다. 예제 코드에서는 3초 후에 경고창이 자동으로 닫히도록 설정하였습니다.

위 코드에서 경고 소리로 ‘alert.mp3’ 파일을 사용하고 있습니다. 이 파일은 프로젝트 내에서 적절한 경로에 위치해야 합니다.

이제 SweetAlert를 사용하여 경고창을 생성하고, 반복적인 소리를 추가할 수 있습니다. 소리 반복 기능을 원하지 않는 경우에는 onOpen과 onClose 콜백 함수를 제거하면 됩니다.

참고 자료

• SweetAlert GitHub 페이지