jQuery Plugin To Get Recent Track Form Last.fm - ghostfm
File Size: | 54.7 KB |
---|---|
Views Total: | 615 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.