Question

因此，我要尝试创建一个自定义音频播放器。很简单吧？那就是我的想法，但是然后我得到了这个错误“无法读取null的属性'play'”。我正在阅读它，并且我了解到一种可能是在ID存在之前调用该函数？但对我而言，这没有意义，因为当用户单击播放时，该属性确实存在。我以前从未创建过自定义音频播放器，因此在这里可能会出错，但是我想知道如何使它正常工作。我想单击一个按钮来播放一首歌。这是我到目前为止所拥有的

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "app";
  audioPlayer = <HTMLMediaElement>document.getElementById("myAudio");

  constructor() {}

  ngOnInIt() {}

  start() {
    this.audioPlayer.play();
  }
}

app.component.html

<div class="container-fluid">
  <div class="row row1">
    <div class="col-sm-12 col-md-12 col-lg-12 text-center mb-3">
      <img src="../assets/tour.jpg" class="img-fluid" />
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12 text-center">
      <p class="audio-title">Dark Queen - Lil Uzi vert</p>
      <button class="btn btn-success" id="play" (click)="start()">play</button>
      <button class="btn btn-primary" id="pause">pause</button>
      <audio id="myAudio" class="audio" controls>
        <source src="../assets/darkqueen.mp3" type="audio/mpeg" />
      </audio>
    </div>
  </div>
</div>

Uncaught TypeError: Cannot read property 'play' of null，这是我发现的唯一的其他SO讨论，但老实说，这与我所面临的不同。

感谢阅读。

Answer 1

该模板位于ngAfterViewInit挂钩中。不在构造函数或ngOnInit中。

但是最好使用@ViewChild()：

<audio class="audio" controls #myAudio>
  <source src="../assets/darkqueen.mp3" type="audio/mpeg">
</audio>

export class AppComponent {
  @ViewChild('myAudio')
  audioPlayer?: ElementRef<HTMLMediaElement>;

  start() {
    if (this.audioPlayer) { // if statement needed for strict typescript
      this.audioPlayer.nativeElement.play();
    }
  }
}

无法读取null的属性“播放”

1 个答案: