Воспроизведение песни с angular 9 - PullRequest
Новая
       1

Воспроизведение песни с angular 9

0 голосов
/ 19 апреля 2020

Я пытаюсь реализовать песню с паузой воспроизведения с индикатором прогресса в 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. Вы можете помочь мне ? Я сделал поиск по inte rnet и нашел ngx-audio-player, но мне не нужен полный аудиоплеер. Мне просто нужно, чтобы звук воспроизводился в angular.

Спасибо всем!

Ответы [ 2 ]

0 голосов
/ 19 апреля 2020

Добавьте тег <<a href="https://www.w3schools.com/html/html5_audio.asp" rel="nofollow noreferrer"> audio >, указав его источник. 

<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

0 голосов
/ 19 апреля 2020

это самый простой код для воспроизведения звука в angular

в html

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

в файле ts 

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