Не могу прочитать свойство 'play' из null - PullRequest
Новая
       12

Не могу прочитать свойство 'play' из null

0 голосов
/ 03 апреля 2019

Итак, я пытаюсь создать собственный аудиоплеер. Достаточно просто, верно? Это то, что я подумал, но потом я получаю эту ошибку "не могу прочитать свойство 'play' of null". Я читал об этом, и я узнал, что одной из возможностей может быть то, что функция вызывается до того, как 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: Невозможно прочитать свойство 'play' со значением null это единственное другое SO-обсуждение, которое я нашел, но, честно говоря, оно отличается от того, с чем я сталкиваюсь.

Спасибо за чтение.

1 Ответ

1 голос
/ 03 апреля 2019

Шаблон доступен в виде крючка 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();
    }
  }
}
...