I'm working on an Electron app with Angular 4. I want to play sound on some specific action. Is there any module or code for that? It can be in the angular 4 or if electron is providing some service for that it should also work
As I want to play it on some action I can't use the HTML audio tag and audio() of javascript
I only want to play the sound of 2-3 seconds so no other functionalities are needed.
It can be of electron or Angular 4 any of them can work...
just did this in a project am working (angular 4) and it worked
playAudio(){
let audio = new Audio();
audio.src = "../../../assets/audio/alarm.wav";
audio.load();
audio.play();
}
this.playAudio();
make sure the path is correct and references an existing audio
step 1 npm install --save howler
step 2 import Howl from howler in component
step3 : inside the functional block add below code
let sound = new Howl({
src: ['sound.mp3']
});
sound.play()
playSound(sound) {
sound = "../assets/sounds/" + sound + ".mp3";
sound && ( new Audio(sound) ).play()
}
Where sound is the file name if you need this method to be reusable.
Angular 13:
Create a service:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class AudioService {
constructor() { }
playAudio(): void {
const audio = new Audio();
audio.src = '../../../assets/audio/alert.wav';
audio.load();
audio.play();
}
}
Then in your component:
[...]
import { AudioService } from '../services/audio.service';
[...]
constructor(
private audioService: AudioService
){
// Here or anywhere else
this.audioService.playAudio();
}
The Asmon code is good, but I think that the real problem is that the Google Chrome policy was updated, on this page https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio you can find The answer In summary, the focus should be on this.
Chrome's autoplay policies are simple: