$(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("This toast notification with sound"); }); $('#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"); }); });
Script Copy url Copy url with Tag
Bootstrap CSS https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css copy copy script
Bootstrap JS https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js copy copy script
Jquery https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js copy copy script

Related Snippets

view all snippets
Latest snippets
About this snippet

Bootstrap 4 Toast notification with sound - Toasty snippet is created by BBBootstrap Team using Bootstrap 4.0.0, Javascript 3.2.1. This snippet is free and open source hence you can use it in your project.Bootstrap 4 Toast notification with sound - Toasty snippet example is best for Bootstrap notification, responsive.A great starter for your new awesome project with 1000+ Font Awesome Icons, 4000+ Material Design Icons and Material Design Colors at BBBootstrap.com.

Join BBBootstrap community

Contribute an awesome snippet to help other developer and designers