在Angular 4中播放声音

Question

我正在Electron app使用Angular 4.我希望在某些特定动作上播放声音.那有什么模块或代码吗？它可以是角4或者如果电子提供一些服务,它也应该工作

由于我想在某些动作上播放它,我无法使用HTML音频标签和javascript的audio()

我只想播放2-3秒的声音,因此不需要其他功能.

它可以是电子或角度4,它们中的任何一个都可以工作......

Answer 1

刚刚在一个正在工作的项目中做了这个(角4)并且它起作用了

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

确保路径正确并引用现有音频

Answer 2

根据Robin的评论,我检查了链接,我们可以使用ts文件中的audio()对象来使用它,如下所示:

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

Answer 3

更新:我有同样的问题,并使用ViewReild引用与ElementRef来解决这个问题.

app.component.ts

@ViewChild('audioOption') audioPlayerRef: ElementRef;

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

app.component.html

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

Answer 4

第 1 步 npm install --save 咆哮

步骤 2 从组件中的 Howler 导入 Howl

步骤3：在功能块内添加以下代码

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

         sound.play()

Answer 5

您可以尝试使用howler.js
您可以将其安装到您的项目中npm install --save howler并播放如下声音：

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

sound.play();

Answer 6

角 13：

创建服务：

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

然后在你的组件中：

[...]

import { AudioService } from '../services/audio.service';
[...]

  constructor(
    private audioService: AudioService
  ){
    // Here or anywhere else
    this.audioService.playAudio();
}