CODEWITHSUNDEEP
htmlplayback
Jim
Jim

Reputation: 482

Embedding audio files in html with album artwork

So I am embedding the music like so (testing in firefox),

<object width="300" height="20">
        <param name="src" value="music/Furrow.mp3">
        <param name="autoplay" value="false">
        <param name="controller" value="true">
        <param name="bgcolor" value="#FFFFFF">
        <embed src="music/Furrow.mp3" autostart="false" loop="false" width="300" height="42" controller="true" bgcolor="#FFFFFF">

When I load my html pages, there is a little VLC type player, which is perfect. However I have an issue, the player looks like this when i take my mouse off the player,

https://i.sstatic.net/ogGMT.jpg

How can I change the orange cone + black background to have lets say, album artwork or a picture?

Thanks

PS this might not be the best way to add music, but I am just trying to work out the album artwork for now

Upvotes: 1

Views: 2470

Answers (2)

Thomas Gensou
Thomas Gensou

Reputation: 76

To begin with, should know your source code, perhaps a picture to absolute position for the cone icon in CSS.

ps : JW player offers solutions with playlist and album art, always with flash player. http://www.longtailvideo.com/jw-player/download/

Upvotes: 0

ibi0tux
ibi0tux

Reputation: 2629

The way your doing it is using a default plugin provided by your browser. In your case, this is VLC, but this depends on the client media plugin.

What you have to do is using a custom media player (you know have choice between flash, html5, or so ...), and manage the artwork by your own.

Look at existing solution such as subsonic, ampache ... Example screenshot form subsonic : there is a little embed flash player, and playlist + artwork is handled with javascript.

Upvotes: 1

Related Questions