javascript - Audio player with album cover as background image - Stack Overflow

admin管理员组

文章数量:1341455

How can I make an audio player with album cover image as the background image such that all playing control buttons be on top of that image. I have used this

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

but it does not allow me to add an image, I have googled a lot with no success.

How can I make an audio player with album cover image as the background image such that all playing control buttons be on top of that image. I have used this

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

but it does not allow me to add an image, I have googled a lot with no success.

• javascript
• css
• html
• bootstrap-4

Share Follow asked Oct 25, 2017 at 12:19 RomanRoman 30311 gold badge55 silver badges1818 bronze badges 5

• 1 Hmmm. Div with background you want and audio tag positioned on top of image? – Gezzasa Commented Oct 25, 2017 at 12:21
• yes, something like that but I don't think if it is good idea to use div with background image! – Roman Commented Oct 25, 2017 at 13:01
• May I ask why div is a bad idea? – Gezzasa Commented Oct 26, 2017 at 5:16
• Thank you, finally the idea of putting div background worked fine. – Roman Commented Nov 1, 2017 at 16:16
• Haha, Glad I could help. I posted an answer if you'd like to mark it – Gezzasa Commented Nov 2, 2017 at 5:06

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You can do this:

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

You can position a div as relative, size it as you need and place the audio player inside the div as absolute.

https://jsfiddle/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/wp-content/uploads/2016/06/tree.jpg');
    background-size: cover;
    position: relative;
}

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

You can grab album cover from media tags of audio file using jsmediatags.

And then put it to div background.

Example - ID3 Reader

本文标签： javascriptAudio player with album cover as background imageStack Overflow