Play sound in Angular 4

Question

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...

https://scotch.io/tutorials/build-a-music-player-with-angular-2-electron-i-setup-basics-concepts — Robin Dijkhof, Jul 03 '17 at 10:43

score 113 · Accepted Answer · edited Sep 16 '18 at 13:09

113

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

edited Sep 16 '18 at 13:09

Amnon

2,212
1
19
35

answered Nov 02 '17 at 04:30

Nelson Bwogora

2,225
1
18
21

I am getting error - he play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission. – Feb 22 '21 at 22:25
sorry, its firefox setting issue. Had to enable – Feb 22 '21 at 22:35
It isn't works on IOS, Maybe you know answer https://stackoverflow.com/questions/73625851/how-to-play-audio-in-safari-ios-angular – Adam Sep 10 '22 at 15:01

score 51 · Answer 2 · edited Sep 16 '18 at 16:08

51

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

edited Sep 16 '18 at 16:08

Amnon

2,212
1
19
35

answered Jul 04 '17 at 06:32

hardiksa

1,477
1
14
19

How to change volume in this method? – carte Jan 20 '20 at 12:08
1

@carte // set the volume at 50% this.audio.volume = 0.5; this.audio.load(); this.audio.play(); – jignesh kumar Apr 24 '21 at 09:29

score 34 · Answer 3 · edited Sep 16 '18 at 15:26

34

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>

edited Sep 16 '18 at 15:26

Amnon

2,212
1
19
35

answered Dec 21 '17 at 18:42

Renato Francia

803
1
12
23

2

From angular this was the only solution that worked for me – San May 14 '19 at 17:23
Is there any way to do it dynamically ? I mean replacing src by a variable – Nitneq Nov 05 '19 at 11:30
1

the angular way , you can either do [src]='"path_to_to_your_audio"' or src='{{path_to_your_audio}} then in your component assign the path_to_to_your_audio dynamically – Nelson Bwogora May 14 '20 at 20:03

score 10 · Answer 4 · edited Sep 17 '18 at 08:20

10

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

edited Sep 17 '18 at 08:20

Amnon

2,212
1
19
35

answered Jul 29 '17 at 17:58

Aaron Shappell

133
7

2

Howler handles audio on mobile browsers too as this needs to be 'unlocked' by user interaction. Solved me issue !! – Smiter Oct 24 '18 at 09:13
It's not working! I have this message: howler.js:2432 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio – A. Morel Aug 29 '19 at 17:39

score 9 · Answer 5 · answered Nov 06 '19 at 21:21

9

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

answered Nov 06 '19 at 21:21

Prakash R

91
1
1

AndyNope · Answer 6 · 2022-03-08T10:12:34.640

6

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

edited Mar 08 '22 at 10:12

answered Dec 07 '21 at 08:13

AndyNope

427
6
12

I don't see why use a service if you do all the logic (both the loading and the playing) inside the playAudio() method. The method should be then called loadAndPlay() – Amc_rtty Oct 16 '22 at 08:37

score 4 · Answer 7 · answered Apr 20 '19 at 00:37

4

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.

answered Apr 20 '19 at 00:37

gildniy

3,528
1
33
23

score 3 · Answer 8 · answered Nov 05 '18 at 17:32

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.

I find this possible solution and work for me without problems https://stackoverflow.com/questions/50490304/audio-autoplay-not-working-in-chrome — Norberto Quesada, Nov 06 '18 at 05:16

Play sound in Angular 4

8 Answers8

Linked

Related