Asked • 05/03/19

How to add audio to a HTML image?

I'm still new to all this, but I'm trying to add audio mp3 sound to an HTML image, which is played when clicked on. How can I do this right? I've already tries a few things, like the '<audio>' tag, or installing java-based stuff, like soundmanager2, however none of them seems to work. The problem is, that I don't know how to use them properly. I'm using dreamweaver CS6, in which there should be an option "behaviour"--> play sound, but it's not there, so I'm lost with all this.

1 Expert Answer

By:

Gabriel F. answered • 10/30/19

Tutor
5.0 (85)

Full Stack Software Developer and Mentor

See tutors like this
See tutors like this

You could try something like this:


<!DOCTYPE HTML>
<html>
<head>
<title>Toggle Audio</title>
</head>
<body>

<script>
function togglePlay(){
var audio = document.getElementById('audio');
if (!audio.paused && audio.duration > 0) {
audio.pause();
} else {
audio.play();
}
}
</script>

<img src="https://miro.medium.com/max/1784/1*LMeN7c8posQaB9PuPh5kCA.png" alt="sound waves" onclick="togglePlay()">
<audio id="audio" src="http://s1download-universal-soundbank.com/wav/1071.wav" ></audio>
</body>
</html>
Upvote • 0 Downvote
More
Report

Still looking for help? Get the right answer, fast.

Ask a question for free

Get a free answer to a quick problem.
Most questions answered within 4 hours.

OR

Find an Online Tutor Now

Choose an expert and meet online. No packages or subscriptions, pay only for the time you need.