在 Angular 4 中播放声音

Posted 2023-03-22

【中文标题】在 Angular 4 中播放声音

【英文标题】：Play sound in Angular 4

【发布时间】：2017-12-06 14:24:23

【问题描述】：

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

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

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

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

【问题讨论】：

scotch.io/tutorials/…

【参考方案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 以允许自动播放声音。

【讨论】：

我找到了这个可能的解决方案，并且可以毫无问题地为我工作***.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();