I'm attempting to create a customized audio player, but I've encountered an error: "cannot read property 'play' of null". After some research, I discovered that this could be due to the function being called before the ID exists. However, it seems strange because the property should exist once the play button is clicked. Since this is my first time creating a custom audio player, I might be completely off track here. Can anyone help me figure out how to make this work? My goal is to have a song play when a button is clicked. Here's what I currently have:
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 this is the only other SO discussion I found but honestly it's different from what i'm facing.
Thanks for reading.