EDIT #1 with connexo’s solution

Within the following HTML, I want to click in the parent 'li' to play the child 'audio'

The problem is noted in the alert calls within the JS; i.e., trying to compare a HTMLLIElement with a HTMLAudioElement.

How can I successfully do that?

HTML:

I have several:

<li>
    text here<br>
    <audio controls preload="auto">
    <source src="aSong.mp3">
    </audio>
</li>

JS:

$('li:has(audio)').on("click", function(evt) {

    var m, theSongInArray,
    //  thisSong = $(this)[0];  // HTMLLIElement
    //  now a HTMLAudioElement thanks to connexo
        $thisLI = $(this);
        thisSong = $thisLI.find('audio')[0];  

    // itsAllSongs defined elsewhere    
    for (m=0; m < itsAllSongs.length; m++)
    {
        //  HTMLAudioElement
        theSongInArray = itsAllSongs[m];
 
        if (thisSong == theSongInArray)
        {
            if ( thisSong.paused )
                thisSong.play();
            else
            {
                thisSong.pause();
                thisSong.currentTime = 0;
            }
        }
    }

});

Note: connexo's solution is perfect - but now I have a new problem =

My intent above, which connexo has solved, was to be able to click anywhere within 'li:has(audio)' and have the toggling effect between .play() and .pause() .. and it now does that.

BUT, now the anywhere within 'li:has(audio)' seems to not include the play icon of:

If I click on the slider, the progress bar, the time-stamp, or anywhere else on the long <audio> control it works great, but not on the play icon on the far left of the above control.

SUPER wierd - this 2nd challenge goes away (I can then click just on the play icon) if I remove:

$('li:has(audio)').on("click", function(evt) {

})

Hopefully, connexo has another brilliant solution.

EDIT #2 = solution of the current problem:

Now, I can click on either the li area surrounding the <audio> element, or on just the <audio> element itself. As a matter of interest, when I click on just the play icon of <audio>, the song will play and, if I click on the position slider, the slider will move without playing/pausing the song itself:

/*  
    alert(evt.target);   // = HTMLLIElement, or HTMLAudioElement
*/

if (evt.target.id.length == 0)      
    thisSong = $(this).find('audio')[0];   // HTMLLIElement -> HTMLAudioElement
else   // >= 3, e.g., = "SSB" or "AIRFORCE"
    thisSong = $(this)[0];   // [object HTMLAudioElement]