使用angular 9播放歌曲

Question

我正在尝试在angular中实现一个带有进度条的播放-暂停歌曲。我的音频播放器是这样的：

<div id="audioPlayer" [class]="playerClass">

  <!-- Begin | Audio Player Progress -->
  <div id="progress-container">
    <input type="range" class="amplitude-song-slider">
    <progress class="audio-progress audio-progress--played amplitude-song-played-progress"></progress>
    <progress id="myProgress" class="audio-progress audio-progress--buffered amplitude-buffered-progress" #myProgress></progress>
  </div>
  <!-- End | Audio Player Progress -->

  <!-- Begin | Audio -->
  <div class="audio">
    <div class="song-image"><img data-amplitude-song-info="cover_art_url" [src]="song?.cover_art_url" alt=""></div>
    <div class="song-info pl-3">
      <span class="song-name d-inline-block text-truncate" data-amplitude-song-info="name"></span>
      <span class="song-artists d-block text-muted" data-amplitude-song-info="artist"></span>
    </div>
  </div>
  <!-- End | Audio -->

  <!-- Begin | Audio Controls -->
  <div class="audio-controls">
    <div class="audio-controls--left d-flex mr-auto">
      <button class="btn btn-icon-only amplitude-repeat"><i class="ion-md-sync"></i></button>
    </div>
    <div class="audio-controls--main d-flex">
      <button class="btn btn-icon-only amplitude-prev"><i class="ion-md-skip-backward"></i></button>
      <button class="btn btn-air btn-pill btn-default btn-icon-only amplitude-play-pause" (click)="play(song)">
        <i class="ion-md-play"></i>
        <i class="ion-md-pause"></i>
      </button>
      <button class="btn btn-icon-only amplitude-next"><i class="ion-md-skip-forward"></i></button>
    </div>
    <div class="audio-controls--right d-flex ml-auto">
      <button class="btn btn-icon-only amplitude-shuffle amplitude-shuffle-off"><i class="ion-md-shuffle"></i></button>
    </div>
  </div>
  <!-- End | Audio Controls -->

  <!-- Begin | Audio Info -->
  <div class="audio-info d-flex align-items-center pr-4">
        <span class="mr-4">
            <span class="amplitude-current-minutes" ></span>:<span class="amplitude-current-seconds"></span> /
            <span class="amplitude-duration-minutes"></span>:<span class="amplitude-duration-seconds"></span>
        </span>
    <div class="audio-volume dropdown">
      <button class="btn btn-icon-only" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i [class]="volumeIcon"></i>
      </button>
      <div class="dropdown-menu dropdown-menu-right volume-dropdown-menu">
        <input type="range" class="amplitude-volume-slider" value="100" (change)="changeVolumeIcon($event)">
      </div>
    </div>

    <!-- Song options -->
    <app-song-options [icon]="'la-ellipsis-v'" [song]="song"></app-song-options>

    <button class="btn btn-icon-only" (click)="openPlaylist()"><i class="ion-md-musical-note"></i></button>
  </div>
  <!-- End | Audio Info -->

</div>
<!-- End | Audio Player -->

我不知道angular中的音频是如何工作的。你能帮我吗？我在网上搜索了一下，找到了ngx- audio -player，但并不需要完整的音频播放器。我只需要在angular中播放音频。

谢谢大家！

Answer 1

这是在angular中播放音频的最简单的代码

在html中

<button  (click)="play()"></button>

在ts文件中

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

Answer 2

添加[audio](https://www.w3schools.com/html/html5_audio.asp)标签，给它一个源码。

<audio #myAudio>
  <source src="https://www.w3schools.com/jsref/horse.ogg" type="audio/ogg">
  <source scr="https://www.w3schools.com/jsref/horse.mp3" type="audio/mpeg">
</audio>
<button (click)="myAudio.play()" >Play audio</button>

StackBlitz DEMO