Having trouble getting help?
Contact Support
Contact Support
Play an audio before open the toast in React Toast component
29 Aug 20238 minutes to read
Here below sample demonstrates to playing audio background while opening Toast. Here we have included audio play codes into beforeOpen event Function.
If you want to stop the audio after displaying Toast use
open
event in Toast. please check the Toast Eventsapi's
for further customization.
[Class-component]
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
import './App.css';
class App extends React.Component {
toastInstance;
timeOutDelay = 600;
position = { X: 'Right', Y: 'Bottom' };
toastCreated() {
this.toastInstance.show();
}
toastShow() {
const audio = new Audio('https://drive.google.com/uc?export=download&id=1M95VOpto1cQ4FQHzNBaLf0WFQglrtWi7');
audio.play();
setTimeout(() => {
this.toastInstance.show();
}, this.timeOutDelay);
}
btnClick() {
this.toastShow();
}
render() {
return (<div>
<ButtonComponent cssClass="e-primary" onClick={this.btnClick = this.btnClick.bind(this)}> Show Toast </ButtonComponent>
<ToastComponent ref={toast => this.toastInstance = toast} title='Matt sent you a friend request' content='Hey, wanna dress up as wizards and ride our hoverboards?' position={this.position} created={this.toastCreated = this.toastCreated.bind(this)}/>
</div>);
}
}
;
export default App;
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
import './App.css';
class App extends React.Component<{}, {}> {
public toastInstance: ToastComponent;
public timeOutDelay: number = 600;
public position = { X: 'Right', Y: 'Bottom' };
public toastCreated(): void {
this.toastInstance.show();
}
public toastShow() {
const audio: HTMLAudioElement = new Audio('https://drive.google.com/uc?export=download&id=1M95VOpto1cQ4FQHzNBaLf0WFQglrtWi7');
audio.play();
setTimeout(
() => {
this.toastInstance.show();
}, this.timeOutDelay);
}
public btnClick(): void {
this.toastShow()
}
public render() {
return (
<div>
<ButtonComponent cssClass="e-primary" onClick={this.btnClick = this.btnClick.bind(this)}> Show Toast </ButtonComponent>
<ToastComponent ref={toast => this.toastInstance = toast!} title='Matt sent you a friend request' content='Hey, wanna dress up as wizards and ride our hoverboards?' position={this.position} created={this.toastCreated = this.toastCreated.bind(this)} />
</div>
);
}
};
export default App;
[Functional-component]
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
import './App.css';
function App() {
let toastInstance;
let timeOutDelay = 600;
let position = { X: 'Right', Y: 'Bottom' };
function toastCreated() {
toastInstance.show();
}
function toastShow() {
const audio = new Audio('https://drive.google.com/uc?export=download&id=1M95VOpto1cQ4FQHzNBaLf0WFQglrtWi7');
audio.play();
setTimeout(() => {
toastInstance.show();
}, timeOutDelay);
}
function btnClick() {
toastShow();
}
return (<div>
<ButtonComponent cssClass="e-primary" onClick={btnClick.bind(this)}> Show Toast </ButtonComponent>
<ToastComponent ref={toast => toastInstance = toast} title='Matt sent you a friend request' content='Hey, wanna dress up as wizards and ride our hoverboards?' position={position} created={toastCreated.bind(this)}/>
</div>);
}
export default App;
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
import './App.css';
function App(){
let toastInstance: ToastComponent;
let timeOutDelay: number = 600;
let position = { X: 'Right', Y: 'Bottom' };
function toastCreated(): void {
toastInstance.show();
}
function toastShow() {
const audio: HTMLAudioElement = new Audio('https://drive.google.com/uc?export=download&id=1M95VOpto1cQ4FQHzNBaLf0WFQglrtWi7');
audio.play();
setTimeout(
() => {
toastInstance.show();
}, timeOutDelay);
}
function btnClick(): void {
toastShow()
}
return (
<div>
<ButtonComponent cssClass="e-primary" onClick={btnClick.bind(this)}> Show Toast </ButtonComponent>
<ToastComponent ref={toast => toastInstance = toast!} title='Matt sent you a friend request' content='Hey, wanna dress up as wizards and ride our hoverboards?' position={position} created={toastCreated.bind(this)} />
</div>
);
}
export default App;