Embed a mjes player on footer

Question

I'm encountering difficulties implementing a MEJS audio player on my WordPress website. Although the player container is displaying correctly, the player itself is not appearing.

So here are the functions (first one is designed to generate a list of clickable tracks based on the provided product ID, it's the A1, A2, B1 etc elements before add to cart button):

function display_playlist_tracks($product_id) {
    $short_description = get_post_field('post_excerpt', $product_id);
    preg_match('/ids="([^"]+)"/', $short_description, $matches);
    if (!empty($matches[1])) {
        $track_ids = explode(',', $matches[1]);
        $playlist_tracks = '<div style="text-align: left;">';
        foreach ($track_ids as $track_id) {
            $track_name = get_the_title($track_id);
            // Find the position of the first dot or space
            $position = strpos($track_name, '.') !== false ? strpos($track_name, '.') : strpos($track_name, ' ');
            // Extract the characters up to this position
            $track_name_short = substr($track_name, 0, $position);
            // Build the HTML for each track
            $playlist_tracks .= '<span class="mp3-clickable" data-track-url="' . esc_url(wp_get_attachment_url($track_id)) . '">' . $track_name_short . '</span> ';
        }
        $playlist_tracks .= '</div>';
        echo $playlist_tracks;
    }
}

function add_custom_audio_player() {
    // Output the audio player container with its styling
    echo '<div id="audio-player-container" style="position: fixed; bottom: 0; left: 0; right: 0; background-color: #8cff27; padding: 10px; display: none;">';
    // Output the audio element with the appropriate class
    echo '<audio class="mejs__player"></audio>';
    echo '</div>';
}

// Hook the function to the wp_footer action
add_action('wp_footer', 'add_custom_audio_player');

And the script relative to it:

document.addEventListener('DOMContentLoaded', function () { var audioPlayer = document.querySelector('.mejs__player'); var audioPlayerContainer = document.getElementById('audio-player-container');

if (audioPlayer && audioPlayerContainer) {
    function displayAudioPlayer(trackUrl) {
        audioPlayer.src = trackUrl;
        audioPlayer.play();
        audioPlayerContainer.style.display = 'block';
    }

    document.querySelectorAll('.mp3-clickable').forEach(function (element) {
        element.addEventListener('click', function () {
            displayAudioPlayer(this.getAttribute('data-track-url'));
        });
    });
} else {
    console.error('Les éléments audioPlayer ou audioPlayerContainer ne sont pas trouvés dans le DOM.');
}

Here's the website: https://haunted-dancehall.com/

Any suggestions??

I've tried these codes and the player container is displaying correctly but the player itself is not appearing