navigationend - Reproducir sonido en Angular 4

router events subscribe angular 4

Question

Estoy trabajando en una Electron app con Angular 4. Quiero reproducir sonido en alguna acción específica. ¿Hay algún módulo o código para eso? Puede estar en el ángulo 4 o si un electrón proporciona algún servicio para eso también debería funcionar.

Como quiero reproducirlo en alguna acción, no puedo usar la etiqueta de audio HTML y el audio () de JavaScript.

Solo quiero reproducir el sonido de 2-3 segundos, por lo que no se necesitan otras funcionalidades.

Puede ser de electron o angular 4 cualquiera de ellos puede funcionar ...

Answer 1

Acabo de hacer esto en un proyecto estoy trabajando (angular 4) y funcionó

playAudio(){
let audio = new Audio();
audio.src = "../../../assets/audio/alarm.wav";
audio.load();
audio.play();
}
this.playAudio();

Asegúrese de que la ruta sea correcta y haga referencia a un audio existente

Answer 2

El código de Asmon es bueno, pero creo que el problema real es que se actualizó la política de Google Chrome, en esta página https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio Puede encontrar la respuesta. En resumen, el enfoque debe estar en esto.

Las políticas de reproducción automática de Chrome son simples:

La reproducción automática silenciada siempre está permitida.

Se permite la reproducción automática con sonido si:

El usuario ha interactuado con el dominio (clic, toque, etc.).

En el escritorio, el umbral del índice de compromiso de medios del usuario se ha cruzado, lo que significa que el usuario ha reproducido previamente el video con sonido.

En el móvil, el usuario ha [agregado el sitio a su pantalla de inicio].

Los fotogramas principales pueden delegar el permiso de reproducción automática a sus iframes para permitir la reproducción automática con sonido.

Answer 3

Puedes intentar usar howler.js
Puedes instalarlo en tu proyecto con npm install --save howler y reproduce un sonido como este:

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

Answer 4

Según el comentario de Robin, he comprobado ese enlace, podemos usarlo usando el objeto audio () en el archivo ts como este:

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

Answer 5

actualizado: tuve el mismo problema y usé la referencia de ViewChild con ElementRef para resolver esto.

app.component.ts

@ViewChild(''audioOption'') audioPlayerRef: ElementRef;
onAudioPlay(){
this.audioPlayerRef.nativeElement.play();
}

app.component.html

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