how do i fix my pause and play button not working when clicked? [closed] - html

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 days ago.
Improve this question
im trying to make a song player for my project and i encountered a problem where my button doesnt work when clicked, how do i fix this?
heres the coding i followed from a youtube video:https://youtu.be/JtrFzoL1joI 19:01
`<audio controls id="song">
<source src="DOOR S ELEV SONG.mp3" type="audio/mpeg">
</audio>
<br>
<center>
<input type="range" value="0" id="progress"></input>
<br>
<br>
<br>
<div class="controls">
<div><i class="fa-solid fa-backward"></i> </div>
<div onclick="playPause()"><i class="fa-solid fa-play" id="ctrlIcon"></i> </div>
<div><i class="fa-solid fa-forward"></i> </div>
</div>
</div>
</div>
</div>
<script>
let progress = document.getElementById("progress");
let song = document.getElementById("song");
let ctrlIcon = document.getElementById("ctrlIcon");
song.onloadedmetadata =function(){
progress.max=song.duration;
progress.value=song.currentTime;
}
function playPause(){
if(ctrlIcon.classlist.contains("fa-pause")){
song.pause();
ctrlIcon.classlist.remove("fa-pause");
ctrlIcon.classlist.add("fa-play");
}
else{
song.play();
ctrlIcon.classlist.add("fa-pause");
ctrlIcon.classlist.remove("fa-play");
}
}
</script>`