JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script><input type="button" value="Click me" onclick="swalFnc()">

<audio id="myAudio">
  <source src="https://file-examples.com/wp-content/uploads/2017/11/file_example_OOG_5MG.ogg" type="audio/ogg">
  <source src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_5MG.mp3" type="audio/mp3">

</audio>

CSS

.swal-warning {
  background-color: #DD6B55;
  color: white;
}

JavaScript

let aud = document.getElementById("myAudio");
function swalFnc() {

  aud.play();

  swal({
    title: "Are you sure?",
    text: "You will not be able to recover this imaginary file!",
    type: "warning",
    buttons: {
      cancel: {
        visible: true,
        text: 'No, cancel plx!',
        closeModal: false
      },
      confirm: {
      	visible: true,
        text: 'Yes, delete it!',
        cancelModal: false,
        dangerMode: true,
        className: 'swal-warning'
      }
    }
  }).then(function(isConfirmed) {
    if (isConfirmed === null) {
      aud.pause();
    }
  });
}