After loading the page, the first song does not play when you click it

[repcsi]

Hello James,

First of all let me tell you that I liked your tutorial and I learned a lot, however this format of code (OO style) is still a little bit hard for me to understand / work with, so I was not able to correct it, I'm still just on the functional part of javascript. Mostly I'm struggling to see and understand the different attributes that are in the code in different places. I also checked your "how to debug javascript" video, but with parcel running I don't really see the source, it's just mixed in with all the other stuff.

But let me get back on the issue:

So I found a bug that if you load up the page and try to start the first song it will not play.
I think the reason is this if statement:
in "setEventListener()"
const isCurrentAudio = audioItem.getAttribute('href') == (this.currentAudio && this.currentAudio.getAttribute('href'));
which will be true, contrary to the fact that nothing is playing when you start the page, so when the handler of the audio plays it will think that the song is already playing (I'm guessing not 100% sure).
If you click on the song again to pause it will barf up a bit unhandled exception:
localhost/:1 Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause(). https://goo.gl/LdLk22

I also found out that this is the line where you propagate the currentAudio object:
in "createPlayListElements()":
this.currentAudio = this.audioElements[0];

So if you load up the page and click any other song it will start just fine, but not with the first one. I also tried changing the currentAudio object to a different object and I could recreate the issue when I first clicked that song first.