Question

如何制作带有专辑封面图像的音频播放器作为背景图像，以便所有播放控制按钮位于该图像的顶部。我用过这个

<audio controls = 'controls'>
    <source src='' type= 'audio/mp3'>
</audio>

但它不允许我添加图像，我搜索了很多但没有成功。

Answer 1

您可以使用jsmediatags从音频文件的next(matcher)抓取专辑封面。

然后把它放到div背景中。

示例 - ID3 Reader

Answer 2

您可以将div定位为相对位置，根据需要调整大小，并将音频播放器置于div中作为绝对值。

https://jsfiddle.net/os2yd6x3/1/

<div class="audioPlayer">
  <audio controls = 'controls'>
    <source src='' type= 'audio/mp3'>
  </audio>
</div>

.audioPlayer {
    width: 500px;
    height: 300px;
    background-image: url('http://arbordayblog.org/wp-content/uploads/2016/06/tree.jpg');
    background-size: cover;
    position: relative;
}

.audioPlayer audio{
  position: absolute;
  bottom: 0;
  width: 100%
}

Answer 3

您可以这样做：

<video controls poster='img/album/png'>
    <source src='' type= 'audio/mp3'>
</video>

有册页盖子的音频播放器当背景图象

3 个答案: