Custom HTML5 Tag to Show Your Favorite Music Albums on Your Website or Blog

Sometime ago I used Last.Fm’s REST API to show some of my favorite albums on my website. The current implementation is using JavaScript, CSS3, HTML5, PHP and client-side rendering and I’m pretty happy with it. However, I’ve always fancied a simple reusable HTML tag, which would be able to render my favorite music albums’ cover art, track listing, genres and info without the hassle of additional coding. So, here it is – my most recent experiment with HTML5 Web Components: X-CD-Info.

What it can do for you is to save you the nag of writing custom JavaScript, querying Last.Fm’s API then rendering the JSON and styling the result. All you need is:

[sourcecode language=”html”]
<acidjs-xcdinfo
    artist="Joe Satriani"
    album="Unstoppable Momentum">
</acidjs-xcdinfo>
[/sourcecode]

… And you will get this:

Or if you prefer a more compact rending, like:

[sourcecode language=”html”]
<acidjs-xcdinfo
    mode="compact"
    artist="Sepultura"
    album="Arise">
</acidjs-xcdinfo>
[/sourcecode]

Or… why not go really minimalist, and show the cover art only (of course, everyone knows that album):

[sourcecode language=”html”]
<acidjs-xcdinfo
    mode="minimal"
    artist="Sodom"
    album="Tapping the Vein">
</acidjs-xcdinfo>
[/sourcecode]

I love it, I really do, and I had real fun developing it. Moreover, apart from the tag itself, you have a couple of handy native JavaScript methods and HTML attributes:

HTML Attributes of the Tag

Any native HTML attribute (id, class, data-*, style, etc.) is supported, plus the component-specific:

• artist – Required artist name to search on Last.Fm.
• album – Required album name to search on Last.Fm.
• mode – Optional display mode of the component. The default mode is "full". "compact" and "minimal" are the other two options.

JavaScript Methods

Any native JavaScript method (document.getElementById, document.querySelector, element.setAttribute, element.removeAttribute etc.
as well as their jQuery or other libraries aliases), plus the component-specific:

• render(artist, album, mode) – Render album info in the queried acidjs-xcdinfo element. The mode parameter is optional and if not set to
  any of the "full", "compact" or "minimal", the "full" mode will be used. Example:
  • JavaScript:
    document.querySelector("#album-02").render("Steve Vai", "Passion and Warfare", "full");
    document.getElementById("#album-02").render("Steve Vai", "Passion and Warfare", "full");
  • jQuery:
    $("#album-02").get(0).render("Steve Vai", "Passion and Warfare", "full");
• getData() – Get the stored current DTO, received from Last.Fm. Example:
  • JavaScript:
    document.querySelector("#album-02").getData();
    document.getElementById("#album-02").getData();
  • jQuery:
    $("#album-02").get(0).getData();

In order to use X-CD-Info you will need to get an API key from Last.Fm. If you don’t have one already, get it here. It’s free, and Last.Fm rocks.

Sounds good? Check it and get it here. Find @wemakesitesnet on Twitter and let me know what you think.

Sharing the same interest towards HTML5 Web Components? Check my other experiments, related to that exciting technology. If you are interested in similar 3rd-party widgets or APIs make sure you check my IMDB Fetcher project.

Rock and Roll!