notification with sound

by pj_js15

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries@main/toasty.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries@main/toasty.js"></script>
<div class="page-content page-container" id="page-content">
  <div class="padding">
    <div class="row container d-flex justify-content-center"> 
    <button type="button" id="successtoast" class="btn btn-success btn-icon-text"> 
    <i class="fa fa-check btn-icon-prepend"></i>Sample notification</button> 
    
    <!--
    <button type="button" id="infotoast" class="btn btn-info btn-icon-text"> <i class="fa fa-check btn-icon-prepend"></i>Toast Notification info</button> <button type="button" id="warningtoast" class="btn btn-warning btn-icon-text"> <i class="fa fa-check btn-icon-prepend"></i>Toast Notification warning</button> <button type="button" id="errortoast" class="btn btn-primary btn-icon-text"> <i class="fa fa-check btn-icon-prepend"></i>Toast Notification error</button> 
    -->
    
    </div>
  </div>
</div>

CSS

body {
    background: #eee
}

.btn {
    margin-right: 0.5rem !important
}

.btn {
    font-size: 0.875rem;
    line-height: 1;
    font-weight: 400;
    padding: .7rem 1.5rem;
    border-radius: 0.1275rem
}

.container {
    margin-top: 100px
}

.toast {
    transition: 0.32s all ease-in-out
}

.toast-container--fade {
    right: 0;
    bottom: 0
}

.toast-container--fade .toast-wrapper {
    display: inline-block
}

.toast.fade-init {
    opacity: 0
}

.toast.fade-show {
    opacity: 1
}

.toast.fade-hide {
    opacity: 0
}

JavaScript

$(document).ready(function() {

//success toast



var options = {
autoClose: true,
progressBar: true,
enableSounds: true,
sounds: {

info: "https://res.cloudinary.com/dxfq3iotg/video/upload/v1557233294/info.mp3",
// path to sound for successfull message:
success: "https://res.cloudinary.com/dxfq3iotg/video/upload/v1557233524/success.mp3",
// path to sound for warn message:
warning: "https://res.cloudinary.com/dxfq3iotg/video/upload/v1557233563/warning.mp3",
// path to sound for error message:
error: "https://res.cloudinary.com/dxfq3iotg/video/upload/v1557233574/error.mp3",
},
};

var toast = new Toasty(options);
toast.configure(options);





$('#successtoast').click(function() {

toast.success("An order has been created.");

});

$('#infotoast').click(function() {

toast.info("This toast notification with sound");

});

$('#warningtoast').click(function() {

toast.warning("This toast notification with sound");

});

$('#errortoast').click(function() {

toast.error("This toast notification with sound");

});

});