Как воспроизвести аудио в Ionic Angular?

Question

Мне известно о решении 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?

Answer 1

Если вы хотите воспроизвести аудио с использованием HTML-элемента, вы должны сначала добавить его в тело вашего html. Если вам нужно полное решение для машинописного текста, вы можете воспользоваться ответом, получившим наибольшее количество голосов, на этот другой вопрос stackoverflow: Воспроизвести звук в формате Angular 4

Очень простой способ проверить это. Создайте пустой файл index.html в папке. Поместите файл WAV с именем audio.wav в ту же папку. Теперь откройте index.html в браузере. Затем откройте DevTools и запустите этот скрипт:

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

Ваш WAV-файл теперь должен быть правильно воспроизведен