Customizable Modern Toast Notification With Sounds – Toasty.js

<link href="dist/toasty.min.css" rel="stylesheet">
<script src="dist/toasty.min.js"></script>

var toast = new Toasty();
 
// this show an informational message:
toast.info("Here is some information!");
 
// show a successful message:
toast.success("You did something good!");
 
// show a warning message:
toast.warning("Warning! Do not proceed any further!");
 
// and this a error message:
toast.error("Something terrible happened!");

// the main Toasty function:
var toast = new Toasty({
    // STRING: name of the CSS transition that will be used to show and hide the toast:
    transition: "slideUpDownFade"
});
 
// register the new transition using public method:
toast.transition("slideUpDownFade");
 
// and run the first message with this new transition:
toast.info("You have been registred a new scale transition correctly.");

var options = {
    // STRING: main class name used to styling each toast message with CSS:
    // .... IMPORTANT NOTE:
    // .... if you change this, the configuration consider that you´re
    // .... re-stylized the plugin and default toast styles, including css3 transitions are lost.
    classname: "toast", 
    // STRING: name of the CSS transition that will be used to show and hide the toast:
    transition: "fade",
    // BOOLEAN: specifies the way in which the toasts will be inserted in the html code:
    // .... Set to BOOLEAN TRUE and the toast messages will be inserted before those already generated toasts.
    // .... Set to BOOLEAN FALSE otherwise.
    insertBefore: true,
    // INTEGER: duration that the toast will be displayed in milliseconds:
    // .... Default value is set to 4000 (4 seconds). 
    // .... If it set to 0, the duration for each toast is calculated by message length.
    duration: 4000,
    // BOOLEAN: enable or disable toast sounds:
    // .... Set to BOOLEAN TRUE  - to enable toast sounds.
    // .... Set to BOOLEAN FALSE - otherwise.
    // NOTE: this is not supported by mobile devices.
    enableSounds: false,
    // BOOLEAN: enable or disable auto hiding on toast messages:
    // .... Set to BOOLEAN TRUE  - to enable auto hiding.
    // .... Set to BOOLEAN FALSE - disable auto hiding. Instead the user must click on toast message to close it.
    autoClose: true,
    // BOOLEAN: enable or disable the progressbar:
    // .... Set to BOOLEAN TRUE  - enable the progressbar only if the autoClose option value is set to BOOLEAN TRUE.
    // .... Set to BOOLEAN FALSE - disable the progressbar. 
    progressBar: false,
    // Yep, support custom sounds for each toast message when are shown
    // if the enableSounds option value is set to BOOLEAN TRUE:
    // NOTE: The paths must point from the project's root folder.
    sounds: {
        // path to sound for informational message:
        info: "./dist/sounds/info/1.mp3",
        // path to sound for successfull message:
        success: "./dist/sounds/success/1.mp3",
        // path to sound for warn message:
        warning: "./dist/sounds/warning/1.mp3",
        // path to sound for error message:
        error: "./dist/sounds/error/1.mp3",
    },
 
    // callback:
    // onShow function will be fired when a toast message appears.
    onShow: function (type) {},
 
    // callback:
    // onHide function will be fired when a toast message disappears.
    onHide: function (type) {},
 
    // The placement where prepend the toast container:
    prependTo: document.body.childNodes[0]
};
 
// using the main Toasty function:
var toast = new Toasty(options);
// or this public method:
toast.configure(options);