How do play an audio file on a button click using HTML and JavaScript?
Question
This code only returns a volume icon and a link property, doesn't play audio file:
function playSound() { var sound = document.getElementById("audio"); sound.play(); }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="name"> My name is <div> <a><i class="fa fa-volume-up" style="font-size:24px" onclick="playSound()"></i></a> </div> Basiyath Zubair <audio id="audio" src="./audio/name.mp3"></audio> </div>
2 answers
solution1
1 2019-10-16 08:05:55
If you assign the correct URL to the src attribute ofaudio , it will work, eg
function playSound() { var sound = document.getElementById("audio"); sound.play(); }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="name"> My name is <div> <a><i class="fa fa-volume-up" style="font-size:24px" onclick="playSound()"></i></a> </div> Basiyath Zubair <audio id="audio" src="https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3"> Your browser does not support the <code>audio</code> element. </audio> </div>
solution2
0 2019-10-16 08:11:42
Try this, it may work for you
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>Click the buttons to play or pause the audio.</p>
<button onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button>
<script>
var x = document.getElementById("myAudio");
function playAudio() {
x.play();
}
function pauseAudio() {
x.pause();
}
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Using a JavaScript function in an HTML <area> to play audio on click
Play/Pause Audio Button Using HTML5 And JavaScript
Play/pause audio button using HTML5 and JavaScript
select image and and play an audio by clicking the button using html and javascript
Play HTML audio on button click on mobile
Play audio from javascript in HTML5 WITHOUT a file - using buffer
HTML 5 play audio file on click mobile devices
How to play an audio file that reacts to an input variable in HTML/JavaScript?
How to toggle audio play() pause() with a button click?
how to hide and play audio tag on a button click
Related Tags