Embed An Mp3 Music File Onto An Image

Good afternoon, I have am image and I want to embed the MP3 file associated with the image into/onto the image, instead of having the MP3 under the image. Is this at all possible.

Solution 1:

Create a "container" div and, inside it, insert your image and an audio element (containing at least a source and a warning message for browsers that don't support it).

Give the "container" the same height of the image, assign the audio element "relative" position, then play with top and left values, e.g.:

.audio-container {
  height: 320px;
}
.audio-containeraudio {
  position: relative;
  top: -40px;
  left: 10px;
}

<divclass="audio-container"><imgsrc="http://www.battiato.it/wp-content/themes/battiato/images/about.jpg"><br><audiocontrols><sourcesrc="http://www.battiato.it/wp-content/uploads/mp3/joe/1-leoncavallo.mp3"type="audio/mpeg">
      Your browser does not support the audio element.
  </audio></div>