How to click an image to play and audio in html?
How to click an image to play and audio in html?
1 answer
by
aubrey ,
3 months ago
@ryleigh
To make an image clickable to play an audio file in HTML, you can use the following code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html>
<html>
<head>
<title>Click Image to Play Audio</title>
</head>
<body>
<h1>Click the image below to play audio</h1>
<img src="image.jpg" alt="Play Audio" onclick="playAudio()">
<audio id="audio" src="audio.mp3"></audio>
<script>
function playAudio() {
var audio = document.getElementById("audio");
audio.play();
}
</script>
</body>
</html>
|
In this code, an image is displayed on the webpage and when the image is clicked, the playAudio() function is called which plays the audio file specified in the <audio> tag. Make sure to replace image.jpg and audio.mp3 with the actual path to your image and audio file.
Related Threads:
How to toggle pause/play audio with button click in pure javascript?
How to play audio file with vue.js?
How to change element html properties on click?
How to add an image to an html file?
How to convert image to tensor in javascript and html?
How to align a text and a image with bottom-line in html?