Having trouble getting help?
Contact Support
Contact Support
Play an audio before open the toast
21 Dec 20222 minutes 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.
NOTE
To stop the audio after displaying the toast, use the
Open
event in toast. For further customization, check the Toast Events APIs.
<div class="control-section" style="width:400px;margin:0 auto;">
@Html.EJS().Toast("element").Title("Matt sent you a friend request").Position(p => p.X("Right").Y("Bottom")).Content("You have a new friend request yet to accept").BeforeOpen("onBeforeOpen").Render()
<div class="row">
@Html.EJS().Button("show_toast").Content("Show Toast").CssClass("e-btn").Render()
</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>
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}