在 Angular 4 中播放声音答案

【问题标题】：Play sound in Angular 4在 Angular 4 中播放声音
【发布时间】：2017-12-06 14:24:23
【问题描述】：

我正在使用 Angular 4 开发 Electron app。我想在某些特定动作上播放声音。是否有任何模块或代码？它可以在角度 4 中，或者如果电子为此提供一些服务，它也应该可以工作

因为我想在某些动作上播放它，所以我不能使用 HTML 音频标签和 javascript 的 audio()

我只想播放 2-3 秒的声音，所以不需要其他功能。

它可以是电子或 Angular 4，它们中的任何一个都可以工作......

【问题讨论】：

scotch.io/tutorials/…

标签： javascript angular audio electron

【解决方案1】：

刚刚在一个正在工作的项目中做了这个（角度 4）并且它工作了

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

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

【讨论】：

我收到错误 - 在当前上下文中，用户代理或平台不允许他的播放方法，可能是因为用户拒绝了权限。
抱歉，Firefox 设置问题。必须启用

【解决方案2】：

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

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

【讨论】：

这个方法如何改变音量？
@carte // 将音量设置为 50% this.audio.volume = 0.5; this.audio.load(); this.audio.play();

【解决方案3】：

更新：我遇到了同样的问题，并使用 ViewChild 引用和 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>

【讨论】：

从角度来看，这是唯一对我有用的解决方案
有没有办法动态地做到这一点？我的意思是用变量替换 src
角度方式，您可以执行 [src]='"path_to_to_your_audio"' 或 src='{{path_to_your_audio}} 然后在您的组件中动态分配 path_to_to_your_audio

【解决方案4】：

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

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

sound.play();

【讨论】：

Howler 也在移动浏览器上处理音频，因为这需要通过用户交互“解锁”。解决了我的问题！
它不工作！我收到这条消息：howler.js:2432 AudioContext 不允许启动。它必须在页面上的用户手势之后恢复（或创建）。 developers.google.com/web/updates/2017/09/…

【解决方案5】：

步骤 1 npm install --save howler

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

step3 : 在功能块内添加以下代码

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

         sound.play()

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

Asmon 的代码不错，但我认为真正的问题是谷歌浏览器的政策更新了，在这个页面https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio 你可以找到答案总而言之，重点应该是这个。

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

始终允许静音自动播放。

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

用户与域进行了交互（点击、点击等）。

在桌面上，用户的媒体参与指数阈值已被超过，这意味着用户之前播放过有声视频。

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

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

【讨论】：

我找到了这个可能的解决方案，并且可以毫无问题地为我工作stackoverflow.com/questions/50490304/…

【解决方案8】：

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

[...]

  playAudio():void {
        this.audioService.playAudio();
}

【讨论】：