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 href="http://www.uscis.gov/files/nativedocuments/Track 93.mp3" id="player">
<audio id="audio" controls style="display:none"><source src='http://www.uscis.gov/files/nativedocuments/Track 93.mp3'></audio>
<i >
</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 href="http://www.uscis.gov/files/nativedocuments/Track 93.mp3" id="player">play me
<audio id="audio" controls style="display:none"><source src='http://www.uscis.gov/files/nativedocuments/Track 93.mp3'></audio>
<i >
</i></span></div>
CodePudding user response:
$( 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 href="http://www.uscis.gov/files/nativedocuments/Track 93.mp3" id="player">play me
<audio id="audio" controls style="display:none"><source src='http://www.uscis.gov/files/nativedocuments/Track 93.mp3'></audio>
<i >
</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