Play sound in Angular 4

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

As per Robin's comment, i have checked that link we can use it using the audio() object in the ts file like this:

this.audio = new Audio();
this.audio.src = "../../../assets/sounds/button_1.mp3";
this.audio.load();
this.audio.play();

updated: I had the same problem and used ViewChild reference with ElementRef to solve this.

app.component.ts

@ViewChild('audioOption') audioPlayerRef: ElementRef;

onAudioPlay(){
  this.audioPlayerRef.nativeElement.play();
}

app.component.html

   <audio #audioOption>
       <source src='../*.mp3' type="audio/mp3">
   </audio>

You could try using howler.js
You can install it to your project with npm install --save howler and play a sound like this:

var sound = new Howl({
  src: ['sound.mp3']
});

sound.play();

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.

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:

Muted autoplay is always allowed.

Autoplay with sound is allowed if:

User has interacted with the domain (click, tap, etc.).

On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously play video with sound.

On mobile, the user has [added the site to their home screen].

Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.

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();
}