David Slack - Web developer

Creating What I'm listening to

On the bottom right of this website is a small list entitled "What I'm listening to". What it does is very simple, any time I listen to a track on my phone or PC then that track, artist, album and album cover is added to the list all linked up to listen to it on last.fm.

Read on if you want to know how to do this on your own site because it's very simple!

By the way, if you find a better way to do this or update the script to be better then comment below.

 

First, get yourself a last.fm account as that is what we'll be using to get the track from your place of listening to the web. Now install the software anywhere you listen to music so on your PC, phone, shoe, eye, what ever. There is a version for most things including Windows and Android.

Now get yourself an api key here

Now, to add it to Drupal:

  1. Open your FTP programme (I used Dreamweaver)
  2. Upload the attached file (lastfm.js) to your javascript folder (/js)
Now you have the file on your server you need to connect it to your Drupal theme.
Thanks to Engage Interactive for the jQuery file, I've only changed it a bit.
  1. Log in to your Drupal site
  2. Go to your admin page like example.com/admin
  3. Click Blocks on the top right
  4. Click the 'Add New' tab at the top
  5. Under 'Imput format' select PHP code
  6. Add in the code below, but change YOUR USERNAME to your last.fm username and YOUR API KEY to your api key

{syntaxhighlighter brush: as3;fontsize: 100; first-line: 1; }<script type="text/javascript" src="/js/lastfm.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('div#lastfm').lastFM({ username: 'YOUR USERNAME', apikey: 'YOUR API KEY', number: 3, artSize: 'medium', noart: 'images/noartwork.gif', onComplete: function(){ //Done } }); }); </script> <div id="lastfm"> <dl> <dt class="lfm_art"> <a href="#"></a> </dt> <dd class="lfm_song"></dd> <dd class="lfm_artist"></dd> <dd class="lfm_album"></dd> </dl> </div> {/syntaxhighlighter}

Comments

Dave is it possible to create animated images using dreamweaver?I am not that much aware  in that application.I hope you can give me some advice.

Dave's picture

Hi Andrea, Fireworks is the place you want to go for animated gifs. Unless you know Flash because you can output you Flash animations as animated Gifs. You could also look into animating SVGs or the new HTML5 canvas.
Let me know what you go with Smile

I do websites, me

I can say that minkyu is so cool. Thanks for the helpful post.

Add new comment

Latest content

There are lots of developers out there with varying degrees of experience and expertise, some mid level, some junior and some senior. Some...
First thoughts are Symfony is ace!Only been using Symfony for 1 project but the amount of coding it has saved has been worth the time spent...
The Lost and Found website was built by myself (David Slack) and designed by Arm & Eye.The site was created to promote a bar and...

Social networks

Contact me here or catch me on one of
the social networks below


What I'm listening to

My blog

Wednesday, 2 August, 2017 - 06:56
There are lots of developers out there with varying degrees of experience and expertise, some mid level, some junior and some senior. Some developers...
Tuesday, 5 March, 2013 - 09:49
First thoughts are Symfony is ace!Only been using Symfony for 1 project but the amount of coding it has saved has been worth the time spent learning...
Monday, 3 December, 2012 - 10:07
As a web developer and web designer I need to take into account everything on a site from SEO, marketing, usability across devices, the look and feel...

Recent comments

Try this on your mobile

Use your QR reader to read this

You should be able to use this right from the screen

Latest tweets

Calendar

M T W T F S S
 
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
10
 
11
 
12
 
13
 
14
 
15
 
16
 
17
 
18
 
19
 
20
 
21
 
22
 
23
 
24
 
25
 
26
 
27
 
28
 
29
 
30
 
 
 

You are here

Back to top

Copyright David Slack - Web developer