将 MP3 音乐文件嵌入到图像中

【问题标题】：Embed an MP3 music file onto an image将 MP3 音乐文件嵌入到图像中
【发布时间】：2016-06-05 17:22:17
【问题描述】：

下午好，

我有一个图像，我想将与图像关联的 MP3 文件嵌入到图像中/到图像中，而不是将 MP3 放在图像下。

这可能吗？

亲切的问候

加里

<!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>

【问题讨论】：

所以您希望音频控件位于图像内？
在img标签中使用javascript onclick事件并创建音频播放函数

标签： html mp3 embed audio

【解决方案1】：

创建一个“容器”div，并在其中插入您的图像和一个audio element（至少包含一个source 和一个警告消息，用于不支持它的浏览器）。

给“容器”相同的图像高度，分配audio元素“相对”position，然后使用top和left值，例如：

.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>

【讨论】：