jQuery Plugin To Get Recent Track Form Last.fm - ghostfm

File Size: 54.7 KB
Views Total: 601
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Get Recent Track Form Last.fm - ghostfm

The jQuery ghostfm plugin retrieves and displays last scrobbled Last.fm track from any user using AJAX/JSON and Last.fm API.

How to use it:

# NPM
$ npm install jquery.ghostfm --save

# Bower
$ bower install jquery.ghostfm

How to use it:

1. Create a custom container to display your last scrobbled track.

<div class="custom-container"></div>

2. Include jQuery library and the jQuery ghostfm plugin's script jquery.ghostfm.min.js at the bottom of the web page.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.ghostfm.min.js"></script>

3. Get a API key from Last.fm. If you don't have a developer account, you can create one here: https://www.last.fm/api/account/create. Documentation: https://www.last.fm/api/intro.

4. Initialize the plugin and insert your API key into the JavaScript.

new $.ghostfm({
  apiKey: 'API KEY',
  user: 'KTheListener', // user name
  container: '.custom-container' // container element
});

5. The basic CSS to style the plugin.

.ghostfm-container {
  display: inline-block;
  vertical-align: middle;
}

.ghostfm-container .ghostfm-img {
  margin-right: 0.5em;
  vertical-align: middle;
}

.ghostfm-container .ghostfm-links { vertical-align: middle; }

6. Add a custom CSS class to the Last.fm widget. Not the selector, just the class value.

new $.ghostfm({
  cssClass: ''
});

7. Customize the equalizer image.

new $.ghostfm({
  /**
   * Equalizer
   *     - src (String) source for equalizer image (base64/link), default provided
   *     - show (Boolean) show/hide the equalizer
   *
   * @type {Object}
   */
  eq: {
      src: _eq,
      show: true
  },
});

Change log:

2017-11-04

  • v1.1.4

This awesome jQuery plugin is developed by kunalnagar. For more Advanced Usages, please check the demo page or visit the official website.