Artwork support in Volumio 1.4

Hi,

i’m a happy user of Volumio for the past few months. I have been playing around, tweaking a bit, having a lot of fun with Volumio on my Cubox and my Raspberry Pi.
Now i would like to bring my little contribution to the community.
I have been working before summer on adding a feature that may seem a detail for some but that make the whole difference in term of WAF and as such could be a deal breaker for others :wink:
I worked to add support for artworks to Volumio :nerd:
You may wonder what is the benefit of artwork support into Volumio ? Let’s share some screenshots to give you an idea :

1) Artwork in the Web UI

IMG_0019.jpg

2) Artwork in the responsive Web UI on mobile

IMG_0618.jpg

IMG_0020.jpg

It is always nice to see the artwork of the song being played in the browser even if i am wondering if in the responsive version of the UI it brings that much value. Anyway these are just examples of what can be done.
But the next use cases (and the true reason why i have started to wrork on this project) make more sense to me. I barely use Volumio’s web UI, i am a big fan of MPD clients on mobile. And with such clients, i find that seeing the artworks is helpful while browsing when we are looking for some music to listen.

2) Artwork in MPDroid on Android

Screenshot_2014-10-09-16-15-42.png
Screenshot_2014-10-09-16-16-06.png
Screenshot_2014-10-09-16-18-17.png
Screenshot_2014-10-09-16-20-56.png

2) Artwork in MPod on Iphone

IMG_0616.jpg
IMG_0617.jpg

2) Artwork in MPad on Ipad

IMG_0018.jpg
IMG_0019.jpg
IMG_0020.jpg
IMG_0619.jpg
big.jpg

sooo what must i change to have album artworks?

Awesome!!! Share share share!!! :mrgreen: :mrgreen: :mrgreen:

Hi,

i’m glad that you guys seem to be interested by this feature !
I will share more information (and questions for you Michelangelo) during the weekend.

esseki

I’m also excited about this! Looks like a great improvement :sunglasses:

Hi,

I wanted to give you more information about my work.
The overal idea is not from me. I found it on Berrie’s blog, in an article called “Cover art in MPoD and MPaD” (http://www.katoemba.net/makesnosenseatall/2011/03/05/cover-art-in-mpod-and-mpad/comment-page-1/). The most interesting part was hidden in the comments related to this post. Yan shared a ruby script “that extracts the cover art from FLAC-file,ALAC-file,MP3-file,OGG-file.” After playing for a while with this Ruby based solution (i fixed some bugs and improved Yan’s script) and struggling with each new version of Volumio when i had to reinstall the stack necessary to run this script, i decided to rewrite it in PHP which is the language used for the server side development of Volumio’s UI.

Let me try to explain how it works :

  • The PHP script receives the path to the song played by MPD.
  • It will look, in the folder containing the song, for an artwork file called “Folder.xxx” or “Cover.xxx”. If such a file is found, its binary content will be returned.
  • If no file is found, it will browse the songs contained in the folder and look for an artwork contained in the meta information of the song.
  • If no artwork is found in songs, a placeholder can be returned.

Here is a short compatibility list based on the tests i have conducted for my own needs :

  • jpg and png image file formats are supported
  • mp3, AAC and ALAC music file formats are supported
  • ID3 tags are supported up to version 2.4.0

That’s it for the basic. From a technical standpoint now :

  • The PHP script has one dependency non satisfied with a fresh Volumio 1.4 install : PECL Imagick (http://pecl.php.net/package/imagick). This library is required to convert the image binaries into jpeg as png (or any other image file format) is not supported by the MPD client mobile apps (Mpod or Mpad). @Michelangelo : would it be possible to include this library in the next releases of Volumio ?
  • The script i wrote is called “artwork.php”. @Michelangelo : this is not a fancy name and i am open to any suggestion, mainly if there is a naming convention to follow.
  • The script relies heavily on a PHP library called getID3() (http://www.getid3.org). This library allows to extract the artwork included in the meta info of the song files. @Michelangelo : getID3() requires PHP 5.3 minimum, i guess this should not be an issue. Considering that this library is distributed under the GPL licence, is it possible to include it directly in Volumio ? There is a section related to this question on their site and the answer seems to be positive.
  • I have modified some code in Volumio 1.4 :
    “/etc/nginx/nginx.conf” : to create a rewrite rule redirecting to “artwork.php”
    “/var/www/_player_engine.php” : to add the path to the song being played by MPD
    “/var/www/templates/indextpl.html” and “/var/www/js/player_lib.js” : to display the artwork of the song being played in the “Playback” screen of the Web UI. Those two last modifications are more anecdotical and i did them to show how easy it is to display an artwork when the path to a song in the library is known. i.e. :
<img src="http://volumio.local/artwork/music/path/to/song/Folder.jpg">

It means that artworks could easily be added almost anywhere in Volumio’s UI (in the “Library” or “Browse” screens).

Even if my scripts works reliably for a couple of months now, in my install, i don’t consider it as 100% finished. Here is what could be worked on or what i have in mind for possible future versions :

  • more robust tests.
  • test more images or song file formats (i.e. FLAC)
  • add some cache to write on disk (in a “Folder.jpg” file) the artworks extracted from the songs. This would lower the latency to render the artwork next time the song is played.
  • transfer the song files partially (the first bytes only) when searching for artworks in meta info. This would lower the latency to render the artwork, specially with big ALAC or FLAC files, saving some network traffic.
  • add some settings for artwork management in Volumio settings screens.
  • improve the way artworks are rendered. I have worked on some nice full CSS animated transition effect that i would like to apply when changing song.
  • this list can grow with suggestions from the community

Tomorrow i will work on sharing my code for people to test this feature and for Michelangelo to review it.

Good night :slight_smile:

Great job! :wink: Can’t wait to see it

A few things:

  • it looks like you’re using the latest release as a base for your code, but there was some changes in the current development version that is on github ; JS files have been renamed, and what you’ve written in “player_lib.js” will have to be moved to either “volumio.playback.js” or “volumio.api.js”. I guess it’s not a big deal.

  • I’ll like to use your scripts from the library (and/or browse), but I fear it will slow it down a lot, knowing it’s already quite slow to load. So maybe a solution would be to have a “light” version of your script that won’t look in files metadata. Of course if we implement a cache for artworks, it solves the problem. But that’s for a future step anyway, maybe not for now :slight_smile:

  • if you want to add a new setting you’ll have to use the updates system, since the database is not in GIT anymore. Everything is explained here: volumio.org/wiki/index.php?title … stem_files

@ esseki: great work! :slight_smile:

@ michelangelo: if you include this feature in the next version, please add a function to enable and disable the artwork feature.

Hi,

to people willing to test how the feature works, i have created a Github repository to share my work : https://github.com/esseki/Volumio-WebUI.
I have pushed the code that should allow you to display an artwork (for test purpose). See commits :

A disclaimer to non developers first : do not expect to make it work. My work is still in a state that makes it not easily deployable to people non familiar with development, PHP or bash. I hope that one day this feature will be available in Volumio without requiring any install.

To people not afraid to get their hands dirty :

  • don’t forget to install PECL Imagick. The easiest way to do it is using the following command :

sudo apt-get install php5-imagick But if you have added Jessie’s repositories, it may install php 5.6.

You should now be able to display an artwork building a URL following this pattern :

http://volumio.local/artwork/music/path/to/song.xxx

for example on my setup :

http://192.168.100.15/artwork/music/NAS%2FMusic%20Tib%2F16%20Horsepower%2FLow%20Estate%2F01%20Brimstone%20Rock.m4a

The path after “artwork/music/” corresponds to the path in MPD library as displayed in the bottom left corner in the “Browse” tab of Volumio.
Don’t forget to Urlencode the path to the song.

To see artworks you need either :

  • an image called “Folder.jpg” in the folder containing the song passed via the URL : “NAS/Music Tib/16 Horsepower/Low Estate/Folder.jpg” in my example
  • or an artwork embedded in the meta tag of your song : “NAS/Music Tib/16 Horsepower/Low Estate/01 Brimstone Rock.m4a” in my example

I’ll test it soon, thanks!

Just a FYI : i have updated several time my previous post since it has been initially published.
Don’t hesitate to read it again in case you are looking for more details.

Hi esseki,
I’m trying to test it, the URL is working fine it shows the cover :slight_smile: but nothing is displayed on the playback view => is it because your master branch doesn’t include JS changes? (i cloned your fork)

Hi jotak,

have a look at : https://github.com/esseki/Volumio-WebUI/commit/e0918ae1b82d5b005b3b86491ff7e6e1ef4cc480

I have just pushed tonight a new version compatible with the last version of Volumio’s code. It is not based anymore on Volumio 1.4.
FYI, I have forked Volumio’s official repository and i keep mine up to date with the official repo by merging regularly into my fork.

Pull my repo again and the cover will show now in the Playback screen :wink:
I have to work on a bit of CSS now, to make it look a bit nicer.

I will then focus on your suggestion first (they should be really easy to implement)

And later i will work on the improvements i have listed in my post from October the 11th.

I have just added a round shape to the artwork in the Playback tab.

Capture d’écran 2014-10-17 à 01.05.42.jpg

See : https://github.com/esseki/Volumio-WebUI/commit/3ebeca20e8fb537bb01473fcbf7b2556a7391ee2

That’s just a suggestion what can be done in term of design with a bit of CSS.

I have just added a CSS transition effect.
See : github.com/esseki/Volumio-WebUI … 36592f1738
I need to improve it for the transition to start when artwork has been retrieved and not before.

Hi Jotak,

I have just released a new version of my script that allows to define its behavior. See : https://github.com/esseki/Volumio-WebUI/commit/4cfb6de5b83d089cb229a6a7d1b3bcd8b601b18b

[code]/***********************************

GET PARAMETERS ACCEPTED :
- mode :
* ‘cover’ : look for a ‘Folder.jpg’ file in the folder of the song passed to the script
* ‘song’ : look for an artwork in the metadata of the song passed to the script
* ‘folder’ : look for an artwork in the metadata of all the songs stored in the folder of the song passed to the script
* novalue : try ‘cover’, if fail then try ‘song’, if fail then try ‘folder’
- cache :
* ‘off’ : don’t store and restore in APC the artworks of the last songs passed to the script
* novalue : store and restore in APC the artworks of the last songs passed to the script

ie : http://volumio.local/artwork/music/NAS%2FMusic%20Tib%2F2080%2FThe%20Backup%20-%20EP%2FFolder.jpg?mode=folder&cache=off

***********************************/[/code]

I am working on it :wink: That’s indeed the only way to improve drastically latency when artworks need to be displayed by saving precious seconds in network transfers. We should agree on a folder where this cache will be stored. I will need as well Michelangelo to make the necessary to set the proper rights and ownership to this cache folder for my script to be allowed to write in it.

Already done :

  • improve the way artworks are rendered. I have worked on some nice full CSS animated transition effect that i would like to apply when changing song.
  • display a placeholder when no artwork is found
  • allow to parameter the behavior of the script to choose how it will look for artworks

Still to be done :

  • more robust tests (i will need some help from beta testers).
  • test more images or song file formats (i.e. FLAC).
  • add some cache to write on disk (in a “Folder.jpg” file) the artworks extracted from the songs. This would lower the latency to render the artwork next time the song is played.
  • transfer the song files partially (the first bytes only) when searching for artworks in meta info. This would lower the latency to render the artwork, specially with big ALAC or FLAC files, saving some network traffic.
  • add some settings for artwork management in Volumio settings screens.

Nice, well done! I’ve just tested it, and I didn’t notice any problem. I would just personally modify a bit the CSS, to show borders (I’ve seen that you put borders in a first time, then remove them… probably it’s nice or not depending on the displayed picture?)

And I would also reduce a bit its size so that it’s more or less the same as volume & seeker knobs. We must see what’s most people preference…

Here’s what I had with a few CSS changes (borders “3px solid #273b4f”, size 200px)
Screenshot - 20102014.png

Would it be possible to place it between the knobs? I think this will look a bit more finished off!
Offcourse this would be different for phone-users :confused:

Hi,

a new update tonight with a lot of enhancements (browsers compatibility, placeholder during loading, spin animation finished) and stuff cleaned.

I agree and i have reduced the size of the cover and put back a border around it.

See commit : https://github.com/esseki/Volumio-WebUI/commit/1baaa5eaaa2f487d6fb98ad2239ea1990acc85fa