Why mp3url variable is not consoling after clicking the jQuery event

Question

I would like to display "mp3Url" variable outside of the jquery click event. Actually is it possible or not from below code snippet? I saw many articles but not working.

<script>

var mp3Url;
        
// NOW I CLICK album-poster TO GET CURRENT SONG ID
$(".album-poster").on('click', function(e){

    mp3Url = $(this).attr('data-mp3');

});

//console.log( mp3Url );

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    listFolded: true,
    audio: [
            {
                name: 'Invisible Beauty',
                artist: 'Artist',
                url: mp3Url, // Here is the variable
                cover: 'photo.jpg'
            },
    ]
        
});

</script>

Answer 1

try this, before mp3Url did not exist in the context of declaring the APlayer not

var ap;
$(".album-poster").on('click', function(e){
    var mp3Url = $(this).attr('data-mp3');
    ap = new APlayer({
        container: document.getElementById('aplayer'),
        listFolded: true,
        audio: [
            {
                name: 'Invisible Beauty',
                artist: 'Artist',
                url: mp3Url, // Here is the variable
                cover: 'photo.jpg'
            },
        ]
    });
});