Search results

Play an audio before open the toast

The following sample demonstrates how to play an audio in background while opening the toast by including audio play codes into the beforeOpen event function.

To stop the audio after displaying the toast, use the open event in toast. For further customization, check the Toast Events APIs.

Source
Preview
index.ts
index.html
import {Toast} from '@syncfusion/ej2-notifications';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

let toast: Toast = new Toast({
    title: 'Matt sent you a friend request',
    content: 'You have a new friend request yet to accept',
    position: { X: 'Right', Y: 'Bottom' }
    beforeOpen: onBeforeOpen
});
toast.appendTo('#element');

document.getElementById('show_toast').onclick = () => {
  toast.show();
}

function onBeforeOpen(e: ToastBeforeOpenArgs): void {
  let audio: HTMLAudioElement = new Audio('https://drive.google.com/uc?export=download&id=1M95VOpto1cQ4FQHzNBaLf0WFQglrtWi7');
  audio.play();
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Toast</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Toolbar Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class='row'> <button class="e-btn" id="show_toast"> Show Toast</button> </div>
        <div id='element'></div>
    </div>
</body>

</html>