Search code examples
htmlplayback

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

Solution

  • 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.