【问题标题】: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,然后使用topleft值,例如

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-06-21
    • 1970-01-01
    相关资源
    最近更新 更多