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

HTML5, CSS3 and JavaScript

The Fine Art of Web Development by Martin Ivanov

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:

x-cd-info-full

Or if you prefer a more compact rending, like:

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

x-cd-info-compact

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]

x-cd-info-minimal

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:

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:

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!

thumb

Categories and Tags
Links

© 2006 - 2018 Martin Ivanov