Angular 绑定HTML5的控件<；音频>；标记到角度中的自定义按钮

我的模板中有一个使用

标记的音频播放器，但我想使用我自己的播放器样式，因此我将该标记附带的实际本机音频播放器设置为隐藏

显示：无。然后我想将隐藏播放器的控件绑定到我自己定制的播放器。例如：

<audio src="{{recordingUrl}}" #audio></audio>

<!-- other html -->

<button (click)="startPlayer()">/button> <!-- this is my custom play button -->

我想做的事可能吗？如何将
标记的控件绑定到自定义按钮？
可以将本机音频播放器包装在角度组件中

组成部分
@组件({
moduleId:module.id，
选择器：“音频播放器”，
模板：`
相反

打圆圈
暂停\u循环\u轮廓
`
})
导出类AudioPlayerComponent实现AfterViewInit{
@Input（）公共src:string；
@Input（）公共自动播放：boolean=false；
@Input（）public showStateLabel:boolean=false；
公共audioStateLabel=‘音频样本’；
@Input（）公共音量：number=1.0；/*1.0的音量最大*/
@ViewChild（'audioElement'，{static:false}）public\u audioRef:ElementRef；
私人音频：HTMLEMedia元素；
公共构造函数（）{}
公共暂停（）：无效{
如果（本音频）{
this.audio.pause（）；
this.audioStateLabel='Paused'；
}
}
public get paused（）：布尔值{
如果（本音频）{
返回此.audio.paused；
}否则{
返回true；
}
}
公共游戏（）：无效{
如果（本音频）{
如果（this.audio.readyState>=2）{
这个.audio.play（）；
this.audioStateLabel='Playing…'
}
}
}
公共ngAfterViewInit（）{
this.audio=this.\u audioRef.nativeElement；
如果（本音频）{
this.audio.volume=this.volume；
this.audio.autoplay=this.autoplay；
}
}
}
this.audio=this.\u audioRef.nativeElement是我最终错过的东西。我已经走上了用自己的组件包装的路线，但却错过了那条线。谢谢大家!@void请参阅更新的答案，并将模板内联添加到组件中。要动态设置音频源，您需要绑定一个变量，如：
。这非常有用。谢谢，在播放音频时，如何显示实时更新的持续时间？我还想添加角材质滑块作为skeebar。请帮帮我
@ViewChild("audio", { static: true }) audio: any;
player: any = document.getElementById("audio");


startPlayer(){
    //neither of these work
    this.audio.play();
    this.player.play();
}

@Component({
  moduleId: module.id,
  selector: 'audio-player',
  template: `
  <audio #audioElement src="{{src}}">
    <p>Your browser does not support HTML5 audio. Here is a <a href="{{src}}">link</a> instead.</p>
  </audio>
  <span (click)="paused ? play() : pause()" class="icon-align-middle">
    <mat-icon *ngIf="paused" class="icon-size-30">play_circle_outline</mat-icon>
    <mat-icon *ngIf="!paused" class="icon-size-30">pause_circle_outline</mat-icon>
  </span>
  `
})
export class AudioPlayerComponent implements AfterViewInit {
  @Input() public src: string;
  @Input() public autoplay: boolean = false;
  @Input() public showStateLabel: boolean = false;
  public audioStateLabel = 'Audio sample';
  @Input() public volume: number = 1.0; /* 1.0 is loudest */

  @ViewChild('audioElement', { static: false }) public _audioRef:  ElementRef;
  private audio: HTMLMediaElement;

  public constructor() { }

  public pause(): void {
    if (this.audio) {
      this.audio.pause();
      this.audioStateLabel = 'Paused';
    }
  }

  public get paused(): boolean {
    if (this.audio) {
      return this.audio.paused;
    } else {
      return true;
    }
  }

  public play(): void {
    if (this.audio) {
      if (this.audio.readyState >= 2) {
        this.audio.play();
        this.audioStateLabel = 'Playing...'
      }
    }
  }

  public ngAfterViewInit() {
    this.audio = this._audioRef.nativeElement;
    if (this.audio) {
      this.audio.volume = this.volume;
      this.audio.autoplay = this.autoplay;
    }
  }
}