如何在 Ionic Angular 中播放音频？答案

【问题标题】：How do I play Audio in Ionic Angular?如何在 Ionic Angular 中播放音频？
【发布时间】：2019-10-17 06:11:23
【问题描述】：

我知道 NativeAudio 解决方案，但我想知道是否可以通过 Angular 完全做到这一点。

到目前为止，我有一些东西，但它并没有真正起作用：

import { Injectable } from '@angular/core'

@Injectable({
  providedIn: 'root',
})
export class AudioService {

  audio: HTMLAudioElement

  constructor() {
    this.audio = new Audio()
  }

  playScan = async () => {
    this.audio.src = './sound4_selfservice_scan_item.wav'
    this.audio.load()
    await this.playAudio()
  }

  playIssue = async () => {
    this.audio.src = './sound3_checkin_denied.wav'
    await this.playAudio()
  }

  playAudio = () => this.audio.play()
}

在我的组件中：

@Component({
  selector: 'scan-retail-items',
  template: `
      <div class="app-container scan-item-component {{mode}} {{scanClass}}">
          <main-navigation [member]="handOffMember"
                           (onBackPressed)="onBackPressed($event)"></main-navigation>
          <div class="main-container -expanded">
                              <ion-button
                                      color="secondary"
                                      *virtualItem="let item"
                                      (click)="clickTestButton(item.upc)">{{item.name}}
                              </ion-button>
                          </ion-virtual-scroll>
                      </ion-content>
                  </div>
              </main-body>
              <status-icon mode={{mode}}></status-icon>
          </div>
      </div>
  `,
  styleUrls: ['./scan_retail_items.component.scss'],
})

export class ScanRetailItemsComponent implements OnInit, OnDestroy {


  constructor(private audio: AudioService) {
  }


  ngOnInit(): void {
  }

  clickTestButton = async (upc: string) => {
    console.log('Test Product Scan: ' + upc)
    this.addItemByUPC({ scanData: upc })
    await this.audio.playScan()
  }

点击按钮会调用clickTestButton，理论上它应该会播放声音，但它似乎并没有这样做。在我转向 Native Audio 之前，我做错了什么吗？

【问题讨论】：

标签： angular ionic-framework

【解决方案1】：

如果您想使用 HTML 元素播放音频，您应该首先将其添加到 html 的正文中。如果你想要一个完整的打字稿解决方案，你可以在另一个 stackoverflow 问题上关注投票最多的答案：Play sound in Angular 4

一个非常简单的测试方法。在文件夹中创建一个空的 index.html 文件。将名为 audio.wav 的 WAV 文件放在同一文件夹中。现在在浏览器中打开 index.html。然后打开 DevTools 并运行这个脚本：

let audio = new Audio();
audio.src = "./audio.wav";
audio.load();
audio.play();

您的 WAV 文件现在应该可以正确复制了

【讨论】：