it-swarm.com.de

Spielen Sie den Ton in Angular 4

Ich arbeite an einem Electron app with Angular 4. Ich möchte Sound für eine bestimmte Aktion abspielen. Gibt es ein Modul oder einen Code dafür? Er kann in angular= 4 sein oder wenn electron dafür einen service anbietet, sollte es auch funktionieren

Da ich es bei bestimmten Aktionen abspielen möchte, kann ich das HTML-Audio-Tag und audio () von Javascript nicht verwenden

Ich möchte nur den Ton von 2-3 Sekunden abspielen, damit keine anderen Funktionen benötigt werden.

Es kann ein Elektron sein oder Angular 4 jedes von ihnen kann funktionieren ...

27
hardiksa

habe das gerade in einem Projekt gemacht (Winkel 4) und es hat funktioniert

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

stellen Sie sicher, dass der Pfad korrekt ist und auf ein vorhandenes Audio verweist

45
Nelson Bwogora

Laut Robins Kommentar habe ich den Link überprüft, den wir mithilfe des audio () -Objekts in der ts-Datei wie folgt verwenden können:

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

aktualisiert: Ich hatte das gleiche Problem und verwendete ViewChild-Referenz mit ElementRef, um dieses Problem zu lösen.

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

Versuchen Sie es mit howler.js
Sie können es mit npm install --save howler In Ihr Projekt installieren und einen Sound wie diesen abspielen:

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

sound.play();
4
Aaron Shappell

Der Asmon-Code ist gut, aber ich denke, dass das eigentliche Problem darin besteht, dass die Google-Richtlinie Chrome auf dieser Seite aktualisiert wurde https://developers.google.com/web/ updates/2017/09/autoplay-policy-changes # webaudio Sie finden die Antwort Zusammenfassend sollte der Fokus darauf liegen.

Die Autoplay-Richtlinien von Chrome sind einfach:

  • Die automatische Wiedergabe ist immer stummgeschaltet.
  • Autoplay mit Ton ist zulässig, wenn:
  • Der Benutzer hat mit der Domain interagiert (klicken, tippen usw.).
  • Auf dem Desktop wurde der Schwellenwert für den Media Engagement Index des Benutzers überschritten, was bedeutet, dass der Benutzer zuvor Video mit Ton abgespielt hat.
  • Auf Mobilgeräten hat der Benutzer [die Site zu seinem Startbildschirm hinzugefügt].
  • Top-Frames können die Autoplay-Berechtigung an ihre Iframes delegieren, um das Autoplay mit Sound zu ermöglichen.
  • 1
    playSound(sound) {
        sound = "../assets/sounds/" + sound + ".mp3";
        sound && ( new Audio(sound) ).play()
      }
    

    Wobei sound der Dateiname ist, wenn diese Methode wiederverwendbar sein soll.

    0
    gildniy