Solution 1 :

Something as simple as this?

<img src="some_image.jpg" />
<audio controls
   src="some_audio.mp3">
   Your browser does not support the <code>audio</code> element.
</audio>

This will display whatever image with an audio track underneath. If you’d like some sort of dynamic interaction with the img+audio you will need to use javascript. I can give an example if that’s the case.

Problem :

I want to display an image with an audio attachment like an mp3 file. What’s the best way to make this work in html5?

Comments

Comment posted by Pranil Dasika

This links to the audio file and makes it clickable to play. I was looking for something which can make the audio file clickable to play below the image, not as a link on the image. Thanks for the answer.

Comment posted by Dustin English

In that case you should use the

Comment posted by Pranil Dasika

The intention was to have an audio file describing the object in the image. This seems to be a reasonable way to achieve it using html.

By