问题
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.
Kind regards
Gary
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<img src="Logoghp.jpg" width="224" height="134" alt=""/><br>
<audio controls>
<embed src="Soul Train Easter 2016 Mke Vitti One Hour Mix Show.mp3" width="32" height="32"></embed>
</audio>
</body>
</html>回答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-container audio {
position: relative;
top: -40px;
left: 10px;
}<div class="audio-container">
<img src="http://www.battiato.it/wp-content/themes/battiato/images/about.jpg">
<br>
<audio controls>
<source src="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>来源：https://stackoverflow.com/questions/35584888/embed-an-mp3-music-file-onto-an-image