Album artwork
Thought Forms
Industry

Last.fm Now Playing Widget

A jQuery plugin for showing the currently playing track on Last.fm.

View on GitHub

Using Last.fm Now Playing Widget

Requirements

The plugin requires jQuery, we recommend using the latest version. You also need to have a Last.fm API key.

Installation

  1. Add Required Scripts

    Make sure you include jQuery before adding the plugin at the bottom of your HTML document

    <script src="/scripts/vendor/jquery.js"></script>
    <script src="/scripts/plugins/lastfmnowplaying.js"></script>
  2. Add a Template

    Add a template into your HTML document as in the example below. This can appear anywhere on your web page and can contain any markup you'd like. The template makes use of a number of custom tags surrounded by {}'s. Each template must have it's own ID.

    <script type="text/template" id="lastFmWidget">
    	<div>{ track.artist }</div>
    	<div>{ track.title }</div>
    	<div>{ track.album }</div>
    	<img src="{ track.image.medium }">
    </script>

    Here is a full list of available tags:

    { track.artist }
    The track's artist
    { track.title }
    The title of the track
    { track.album }
    The album the track belongs to
    { track.url }
    A URL to track information on Last.fm
    { track.image.small }
    A 34 x 34px image of the track's artwork
    { track.image.medium }
    A 64 x 64px image of the track's artwork
    { track.image.large }
    A 126 x 126px image of the track's artwork
    { track.image.extralarge }
    A 300 x 300px image of the track's artwork
  3. Call Widget

    The widget is called using the following in your main JavaScript file.

    $('#lastFmWidget').lastfmNowPlaying({
    	apiKey: 'YOUR-API-KEY',
    	members: ['YOUR-LASTFM-USERNAME']
    });

    Be sure to update the apiKey and members options with your own information.

Template Examples

Here are a few examples of different templates for the plugin. You can write whatever code you like for the template, the only requirement is a unique ID for the template and your desired combination of custom tags.

A jQuery plugin by DevTeam Inc. We have nothing to do with Last.fm