CODEWITHSUNDEEP
javascripthtmlaudiovideo
Haris ur Rehman
Haris ur Rehman

Reputation: 2663

JavaScript player that can play MP3 and show background image?

I am working on a website in which I am displaying audio/video content. For videos I am using HTML5 video tag. However, in case of audio, I need to play the audio as well as show an image in the audio player. Is there any html5/javascript player that supports showing of image in the player while playing audio content? 

<audio controls>
<source src="http://hcmaslov.d-real.sci-nnov.ru/public/mp3/Cranberries/Cranberries%20'Dreams'.mp3" type="audio/mpeg">
</audio>


<img src="https://upload.wikimedia.org/wikipedia/en/thumb/d/dc/Everybody_else_is_doing_it_so_why_can%27t_we_%28album_cover%29.jpg/220px-Everybody_else_is_doing_it_so_why_can%27t_we_%28album_cover%29.jpg">

Upvotes: 0

Views: 1059

Answers (1)

zer00ne
zer00ne

Reputation: 43930

<video> and <audio> tags are almost identical, <video> tags have no trouble playing audio files. Use the poster attribute to display an image.

Demo

<video controls autoplay poster='https://upload.wikimedia.org/wikipedia/en/thumb/d/dc/Everybody_else_is_doing_it_so_why_can%27t_we_%28album_cover%29.jpg/220px-Everybody_else_is_doing_it_so_why_can%27t_we_%28album_cover%29.jpg'>
<source src="http://home.saske.sk/~slavo/Audio/FOLK/Cranberries/The%20Cranberries%20-%20No%20Need%20To%20Argue/10%20-%20The%20Cranberries%20-%20Dreaming%20My%20Dreams.mp3" type="audio/mpeg">
</video>

Upvotes: 2

Related Questions