web-dev-qa-db-fra.com

Jouer le son dans Angular 4

Je travaille sur un Electron app with Angular 4. Je veux jouer du son sur une action spécifique. Existe-t-il un module ou un code pour cela? Il peut se trouver dans le angular 4 ou si electron fournit un service pour cela, il devrait également fonctionner

Comme je veux le jouer sur une action, je ne peux pas utiliser les balises audio HTML et audio () de javascript.

Je veux seulement jouer un son de 2-3 secondes, donc aucune autre fonctionnalité n'est nécessaire.

Il peut s'agir d'un électron ou Angular 4 n'importe lequel d'entre eux peut fonctionner ...

angularaudioelectron
27
hardiksa

vient de faire cela dans un projet je travaille (angulaire 4) et cela a fonctionné

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

assurez-vous que le chemin est correct et fait référence à un audio existant

45
Nelson Bwogora

Selon le commentaire de Robin, j'ai vérifié ce lien que nous pouvons utiliser en utilisant l'objet audio () dans le fichier ts comme ceci:

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

updated: J'ai eu le même problème et utilisé la référence ViewChild avec ElementRef pour résoudre ce problème.

app.component.ts

@ViewChild('audioOption') audioPlayerRef: ElementRef;

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

app.component.html

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

Vous pouvez essayer d'utiliser howler.js
Vous pouvez l'installer dans votre projet avec npm install --save howler et jouer un son comme celui-ci:

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

sound.play();
4
Aaron Shappell

Le code Asmon est bon, mais je pense que le vrai problème, c'est que la stratégie Google Chrome a été mise à jour, sur cette page https://developers.google.com/web/updates/2017)./09/autoplay-policy-changes # webaudio vous pouvez trouver la réponse En résumé, l'accent devrait être mis sur ceci.

Les règles de lecture automatique de Chrome sont simples:

  • La lecture automatique en sourdine est toujours autorisée.
    • La lecture automatique avec son est autorisée si:
  • L'utilisateur a interagi avec le domaine (cliquez, appuyez sur, etc.).
  • Sur le bureau, le seuil d’indice d’engagement du média de l’utilisateur a été dépassé, ce qui signifie que l’utilisateur a déjà lu une vidéo avec son.
  • Sur le mobile, l'utilisateur a [ajouté le site à son écran d'accueil].
  • Les cadres supérieurs peuvent déléguer à leurs iframes l'autorisation de lecture automatique afin d'autoriser la lecture automatique du son.
    • 1
    Norberto Quesada
    playSound(sound) {
    sound = "../assets/sounds/" + sound + ".mp3";
    sound && ( new Audio(sound) ).play()
  }

    Où sound est le nom du fichier si vous souhaitez que cette méthode soit réutilisable.

    0
    gildniy