<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"full"
, "compact"
or "minimal"
, the "full"
mode will be used. Example:document.querySelector("#album-02").render("Steve Vai", "Passion and Warfare", "full");
document.getElementById("#album-02").render("Steve Vai", "Passion and Warfare", "full");
$("#album-02").get(0).render("Steve Vai", "Passion and Warfare", "full");
getData()
– Get the stored current DTO, received from Last.Fm. Example:document.querySelector("#album-02").getData();
document.getElementById("#album-02").getData();
$("#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!
© 2006 - 2023 Martin Ivanov