[javascript] SweetAlert의 알림 소리 설정 옵션

24 Nov 2023

SweetAlert는 자바스크립트로 작성된 사용자 친화적인 대화상자 라이브러리입니다. 이 라이브러리를 사용하여 사용자에게 메시지를 표시할 때 소리 효과를 추가할 수 있습니다. SweetAlert의 알림 소리 설정 옵션을 알아보겠습니다.

소리 사용하기

SweetAlert에서 알림 소리를 사용하려면 SweetAlert 스크립트 파일 다음에 Howler.js 라이브러리 파일을 추가해주어야 합니다.

<script src="sweetalert.min.js"></script>
<script src="howler.min.js"></script>

SweetAlert에서 알림 소리를 활성화하고 설정하기 위해서는 sound 옵션을 사용합니다. 아래의 예제 코드를 참고해주세요.

swal({
  title: "알림",
  text: "작업이 완료되었습니다.",
  icon: "success",
  sound: "path/to/sound/file.mp3"
});

위의 예제 코드에서 sound 옵션에 알림 소리 파일의 경로를 지정합니다. 이 경로는 실제로 사용하고자 하는 소리 파일의 경로로 변경되어야 합니다.

SweetAlert는 다양한 종류의 알림 소리를 지원하며, 사용자 정의 소리 파일을 사용할 수도 있습니다. Howler.js 라이브러리를 사용하여 MP3, WAV, OGG 등의 오디오 파일을 재생할 수 있습니다.

SweetAlert에서 기본으로 제공하는 알림 소리를 사용하려면 아래와 같이 swal 함수 호출 전에 swal.setDefaults 함수를 사용하여 기본 소리 파일의 경로를 설정해야 합니다.

swal.setDefaults({
  sound: "path/to/sound/file.mp3"
});

swal("알림", "작업이 완료되었습니다.", "success");

swal.setDefaults 함수를 사용하여 기본 소리를 설정하면, swal 함수를 호출할 때마다 별도로 소리 파일의 경로를 지정할 필요가 없습니다.