CODEWITHSUNDEEP
javascriptcsshtmlbootstrap-4
Roman
Roman

Reputation: 303

Audio player with album cover as background image

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.

Upvotes: 4

Views: 10254

Answers (3)

Lixy
Lixy

Reputation: 213

You can do this:

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

Upvotes: 5

Gezzasa
Gezzasa

Reputation: 1453

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

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%
}

Upvotes: 3

Ivan Tilikin
Ivan Tilikin

Reputation: 103

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

And then put it to div background.

Example - ID3 Reader

Upvotes: 2

Related Questions