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问题的投票最多的答案：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文件现在应正确复制

如何在Ionic Angular中播放音频？

1 个答案: