Can't reach my audio src to play it with jQuery

Question

I'm doing a test and i want to start a mp3 file with jQuery, i tried many options and it seems that i can't achieve to do it :

Here is my html :

 <td><span class="btn btn-sm btn-success btn_player" href="http://www.uscis.gov/files/nativedocuments/Track%2093.mp3" id="player">
                        <audio id="audio" controls style="display:none"><source src='http://www.uscis.gov/files/nativedocuments/Track%2093.mp3'></audio>
                        <i class="fad fa-play">
                        </i></span></td>

as you can see i tried many options

my Jquery code :

$('.btn_player').click(function(event) {
event.preventDefault();
console.log('button audio player clicked');
document.getElementById("audio").play;
});

The btn click action the console.log but don't play any file

here is a test page to see my problem

$('.btn_player').click(function(event) {
event.preventDefault();
console.log('button audio player clicked');
document.getElementById("audio").play;
});

.test {
background-color: green;
width: 2rem;
}

<div class='test'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="btn btn-sm btn-success btn_player" href="http://www.uscis.gov/files/nativedocuments/Track%2093.mp3" id="player">play me
                            <audio id="audio" controls style="display:none"><source src='http://www.uscis.gov/files/nativedocuments/Track%2093.mp3'></audio>
                            <i class="fad fa-play">
                            </i></span></div>

Answer 1

$( document ).ready(function() {
    $('.btn_player').click(function(event) {
    event.preventDefault();
    console.log('button audio player clicked');
    document.getElementById("audio").play();
    });

    });

.test {
background-color: green;
width: 2rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <div class='test'>

<span class="btn btn-sm btn-success btn_player" href="http://www.uscis.gov/files/nativedocuments/Track%2093.mp3" id="player">play me
                            <audio id="audio" controls style="display:none"><source src='http://www.uscis.gov/files/nativedocuments/Track%2093.mp3'></audio>
                            <i class="fad fa-play">
                            </i></span></div>

Missing play()

$( document ).ready(function() {
$('.btn_player').click(function(event) {
event.preventDefault();
console.log('button audio player clicked');
document.getElementById("audio").play();
});

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class='test'>

play me