Search results

Play an audio before open the toast in ASP.NET Core Toast control

22 Oct 2021 / 1 minute to read

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.

tagHelper
controller.cs
Copied to clipboard
<div class="control-section" style="width:400px;margin:0 auto;">
    <ejs-toast id="element" title="Matt sent you a friend request" content="You have a new friend request yet to accept" beforeOpen="onBeforeOpen">
        <e-toast-position X="Right" Y="Bottom"></e-toast-position>
    </ejs-toast>
    <div class="row">
        <ejs-button id="show_toast" content="Show Toast" cssClass="e-btn"></ejs-button>
    </div>
</div>
<script type="text/javascript">
    setTimeout(
        () => {
            var toastObj = document.getElementById('element').ej2_instances[0];
            toastObj.target = document.body;
            toastObj.show();
        }, 1000);
    function onBeforeOpen(e) {
        let audio = new Audio('https://drive.google.com/uc?export=download&id=1M95VOpto1cQ4FQHzNBaLf0WFQglrtWi7');
        audio.play();
    }
    document.getElementById("show_toast").addEventListener('click', function () {
        var toastObj = document.getElementById('element').ej2_instances[0];
        toastObj.show();
    });
</script>
Copied to clipboard
public class HomeController : Controller
{

    public ActionResult Index()
    {
        return View();
    }
}