在Angular 4中播放声音

Question

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

由于我想在某些操作上播放，我无法使用HTML音频标记和javascript的音频（）

我只想播放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

l = [1, 2, 3, 1, 5, 1]
for i in range(l.count(1)):
    l.remove(1)
print(l)  # [2, 3, 5]

app.component.html

@ViewChild('audioOption') audioPlayerRef: ElementRef;

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

Answer 4

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

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

sound.play();

Answer 5

Asmon代码很好，但我认为真正的问题是Google Chrome政策已更新，在此页面https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio上您可以找到答案。总之，重点应该放在此。

Chrome的自动播放政策很简单：

始终允许静音的自动播放。

在以下情况下，允许自动播放声音：

用户已与域互动（单击，点击等）。

在桌面上，已经超过了用户的“媒体参与指数”阈值，这意味着该用户以前曾播放有声视频。

在移动设备上，用户已[将网站添加到主屏幕中。]

顶部框架可以将自动播放权限委派给其iframe，以允许自动播放声音。

Answer 6

第1步npm install-保存咆哮声

第2步从组件中的咆哮中导入咆哮

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

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

         sound.play()

Answer 7

playSound(sound) {
    sound = "../assets/sounds/" + sound + ".mp3";
    sound && ( new Audio(sound) ).play()
  }

如果您需要此方法可重用，则sound是文件名。