Showing posts with label nick chapman. Show all posts
Showing posts with label nick chapman. Show all posts

Wednesday, April 8, 2015

GPL vs MIT | a very rough comparison for those familiar with Creative Commons Licenses

So I googled GPL vs MIT for some reason or another and read a couple of stacker overflow "discussion" and scanned a few reference links and have come up with this, which may help anyone familiar with Creative Commons licenses.

  • GPL ~= CC BY-SA (Credit the work of others, Share-Alike. If derivative work is distributed to others, software must use same license.)
  • MIT ~= CC BY (Credit the work of others. Derivative works can use alternate licensing.)

Notes

On the CC site, they recommend not using their licenses for software, even though the Gnu licensing site states it as an option of other licenses don't fit the author's licensing needs.

Links

Google Auto Backup | high processor utilization

Google Auto Backup, Quit Making my Fans go Crazy!

I use Google Auto Backup at the reduced (2048x) resolution for an unlimited quantity tertiary backup. I already keep things saved and saved at full resolution, but it is hard to say "no" to another level of backup with minimum hassle. Plus, the auto-awesome animations (animated gif files) are actually usable pretty often, even if they aren't as honed as when I spend 30 minutes to create one myself.

Back to the topic, lots of times Google Auto Backup's process hangs or something and pegs out one core of my processor at max utilization for an indefinite period. I feel like it prevents the machine from sleeping, which is a pain. My cooling fans sporadically spin way faster to cool the processor which is working so hard...it is just a noisy mess. I'm not alone in this problem, it seems (https://productforums.google.com/forum/#!topic/picasa/8l5p8I6Ilu8). In the past, I've just killed the process and manually restarted it when I needed or restarted the computer to get it going again. That gets the job done, but I've often wished for a more elegant solution.

A More Elegant Solution

I can't make any promises, but in 1 of 1 test scenario, the following "fixed" the issue for me, albeit temporarily [i only upload pictures to my computer every few days]:

  • right-click the auto backup icon in your system tray
  • selct the 'view failed uploads' option
  • select 'retry'
  • assuming the retry is successful, you should see an immediate drop in processor usage, I hope

That's it. Let me know if this does't work for you. I'm writing this on memory (I don't have a "failed uploads" option in my right-click context menu because I have no failed uploads, currently. If you don't have failed uploads, but are seeing high processor utilization by the Google Auto Backup process, I've given bad advice or you have a different problem. Either way, I'd like to know.

Thanks for reading!

Friday, November 28, 2014

Lossless MKV to MP4 (thanks, ffmpeg)

Update

The following all still applies and is sound advice, but you can perform a simple container switch (I think the technical term is demux and remux) or lossless conversion (no re-encode) using VLC, which is pretty common among people who want to view media. I won't re-invent the wheel, and you can google "mkv to mp4 vlc" to see videos on how to do this, but you are basically opening VLC and choosing file>convert/save, then picking the source file (mkv) and clicking convert/save, then select the 'tools' by the profile dropdown and set 'encapsulation' to mp4/mov, and audio and video to 'keep original.' Then just click save and set your destination file and do it.

Keep in mind that mp4 files are, arguably, a little more well received as apple devices can play them and they are a little more friendly for web streaming. That said, I prefer the mkv container as it allows multiple subtitle tracks and allows various codecs such as . The mp4 container, I believe, is only supposed to work with older mpeg or avc/h.264 encoded video and AAC encoded audio.

And soon enough we can re-visit with HEVC/VP9/Daala thoughts...

A long time ago, I wanted to "extract" my video and audio from a mkv and put them into a html5 video friendly .ogv file/container. I wrote about it here.

This is a little more of an update to that post than a new idea, but I was dissapointed at the search results when I googled "lossless mkv to mp4" and hope this may be of some assistance. It probably won't. Here's hope.

It really isn't bad. If you want to be thorough, install MediaInfo and verify the audio code and video codec are compatible. I'm not sure what mp4 accepts, but AVC/h.264 for video and aac for audio seem to be the most common codecs. Technically, you could copy the video and recode the audio if that was needed for your situation. The code would need little modification.

Install ffmpeg. Get the package for your OS (i'm using Windows), then extract it. It doesn't have to install, so pay attention to where you extract to.

Next, open cmd (search from the start-menu search) and browse to where you extracted ffmpeg. Try using 'tab' to auto complete from cmd. It saves tons of time. Tab multiple times to cycle through potential completions.

Type the following, using the video (full location input and output --fun, I know!) for input.mkv and the name you want as output.mp4: C:\videdit\ffmpeg\bin>ffmpeg -i c:\Users\nchapman\Videos\christianeatingwackyburger.mkv -codec copy c:\Users\nchapman\Videos\newchristianeatingwackyburger.mp4

Hope this helps! You can use -acodec mp3 -vcodec copy or something crazy if you prefer.

Also, you can encode all files in a directory by saving this to a .bat file (then, drag a .mkv file onto it):
for %%a in ("*.mkv") do ffmpeg.exe -i "%%a" -vcodec copy -acodec copy "%%~na .mp4" pause

Source (last comment)

Monday, August 11, 2014

I Replaced my Old Nikon D70 with a Used Nikon D3100

But, Why?

I had two Nikon D70 cameras which, over the past couple of years, became increasingly unusable. Both had been purchased second-hand on ebay in 2005 or 2006 at reasonable prices. One came with a 18-70mm and the other a 28-80mm and a 70-300mm. I prefer the 18mm, despite the distortion, for the wider angles it provides on my DX sensor, so rarely used the 28mm zoom. 2 years ago, I was given a 50mm 1.8 and LOVE it!

First Camera

I shot the transit of venus in late 2012 with a 70-300mm and not enough filters and, seemingly, damaged my shutter. The camera stopped working properly shortly after, so that is my best guess. It still shoots up to 1/60th of a second shutter speed, but nothing higher (just black images) and has trouble syncing with the flash (related)...etc, so very limited in use (only high aperture shooting up to 1/60th frames per second -- fine for tripod landscape shooting, I guess).

Second Camera

The other has no excuse other than the wear and tear I exposed it to for the past 8 years. I use my cameras to get shots, which means on the beach, in the ocean, whilst raining, etc. Sometimes my kids run around and use them as bludgeoning devices. All the cameras get in return is a lens/sensor cleaning occasionally and maybe a UV filter on the lenses to offer some type of safeguard (well, I use lens caps when I can). One day, half-way through shooting my son at the park, it made a chunking noise (much slower and louder than the usual mirror flip/shutter release speed) and seemed to fail mid mirror flip. Since then it flashes 'Err' on the display and won't successfully shoot at all.

Hello New Old D3100

I bought a D3100 just in time for vacation. Literally, it arrived the day before we left. I really like it. I kinda want a 18-55 VR lens that usually comes with them, but may get it separately later. I have almost all positive things to say. There is a slight learning curve which reading reviews and the guide will help alleviate, but I was able to do most everything I wanted immediately and with one less rotating dial than I was used to (for aperture/f-stop adjustments, you use the rear dial when on aperture priority or hold a button and rotate the rear dial when on other modes that allow aperture adjustments -- the D70 has a rear for the shutter and front for the aperture). The ISO can easily be adjusted during shooting, too. My only complaints are as follows:
  • *No IR receiver -- doesn't work with my cheap remote
  • Internal flash doesn't work as commander for my SB600 -- I don't use this feature often, but like being able to play around with it occasionally
  • *Doesn't auto-focus with my 50mm/1.8 or 70-300mm -- pretty much only lenses with a m/ma selector ON THE LENS can be auto-focused by this camera. This was an oversight on my part, and was clearly documented.
  • The video doesn't seem to auto-focus. It is supposed to be less than impressive auto-focusing, anyway. I'll revisit this, but it is worth a mention.
  • One other thing? I think so.
I was looking for a replacement, but enjoy these new features:
  • Video. It isn't great, but (like smart-phone video) nice to have in a crunch!
  • Higher ISO. I used to hate shooting over 400, but this isn't bad up to 1600 and the higher modes are way better than unusable pictures, even if they aren't ideal. I was able to get no-flash shots of my dad and brother gigging which were, at least, fun for later review that I never would have been able to get with my D70.
  • Distortion Control -- I've read that it works well, but haven't verified.
  • ADR (Automatic Dynamic Range?) -- also reportedly good, but I'll write if I disagree.
*I didn't know about these differences when I purchased, though they were clearly documented had I looked a little harder.

Good Change

I'm thinking of getting a new old D90 or another, higher end, replacement for my second failed camera that will address my complaints above. I only need two cameras for the rare occasion when my wife and I shoot simultaneously, so won't miss the features at that point. My only complaint, then, will be juggling two types of batteries. I think both will use SD cards for storage rather than the old CF cards my D70 bodies used.

Better Reviews

http://www.kenrockwell.com/nikon/d3100.htm

Sunday, December 22, 2013

Site Streamer // Sometimes, you just want to stream!

Site Streamer

Sometimes...you just want to stream

The other day, I wanted to listen to the songs available for download from a band's site but downloading them, then adding to my media player seemed like to much work. Strange, because I usually prefer to download -- eventually the tracks end up on my phone and I listen to them in my car. Today, I wanted to listen to them now and the process of downloading each, naming appropriately, then listening to all seemed daunting.

I should develop a website to do this for me!

Instead of spending a few minutes to work this out myself, I decided the more time-effective solution was to spend hours developing a website to do it for me. Of course!

Luckily, I already had the building blocks: 1) [bandcamp downloader] a site that parsed bandcamp pages and made the songs available for download, naming them appropriately and 2) [jPlaylister] a site that creates jPlayer playlists from a local folder's contents.

It wasn't that bad, but spending the time to polish up the site enough for public use added another month of wait due to my busy schedule and recently rekindled gaming habit (a night or two a week for a couple of hours -- nothing serious).

Hello, World!

Meet Site Streamer. A site you can use to stream content from a place which normally just allows standard linked downloads.

You visit the site, paste in a website which has plainly linked downloadable (mp3, currently) audio content, and enjoy the stream. Hope this is convenient for someone!

Friday, August 9, 2013

Google Ignores Image Extensions

Or

Google Plays Image Extensions

Or

Google! It's a PNG, not a JPG

Or

Google Plus Summarizes Backed-Up Videos as Animated GIF

I noticed the other day while working on my Photo Feed Display project that PNG files in my Picasa Web Albums RSS Feed were not being processed correctly. I had JUST added PNG support, so I thought the error was probably in my code. As I dug deeper, I noticed that the images referenced in the RSS Feed had .jpg extensions, not .png extension. I thought this was probably intentional since .jpg (for photo) often provide better results for a given file size. I thought that Google was doing me a favor, making .jpg thumbnails of my .png files for ease of use. I'll take it. But, I was mistaken. Even though the RSS Feed explicitely listed the media with a .jpg extention, they were still PNG files.

Here's what I've found -- Google ignores image extensions. Presumably, they do this because web browsers also ignore image extensions (for widely supported image formats)*. For example, my Picasa Web Album RSS Feed lists the following image source:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOVLZF7VkKst4rpB4E-NlcNHicnRIccdr4JPCUZFJbAITNU6BZbW9XnfQ4n_kY6RzGVuW7i_loHu0dNKZ_jpfa0Re51RxFrgohXcZ3n6wK6zxgBv_ixQeAwaZNlQNxUGixaTRpUFVqCsN8/s288/tourniquet%252520news%252520page.jpg

But wait! I get the same image in my browser if I remove the file at all:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOVLZF7VkKst4rpB4E-NlcNHicnRIccdr4JPCUZFJbAITNU6BZbW9XnfQ4n_kY6RzGVuW7i_loHu0dNKZ_jpfa0Re51RxFrgohXcZ3n6wK6zxgBv_ixQeAwaZNlQNxUGixaTRpUFVqCsN8/s288/

Or, I can see a larger variant by removing the last bit:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOVLZF7VkKst4rpB4E-NlcNHicnRIccdr4JPCUZFJbAITNU6BZbW9XnfQ4n_kY6RzGVuW7i_loHu0dNKZ_jpfa0Re51RxFrgohXcZ3n6wK6zxgBv_ixQeAwaZNlQNxUGixaTRpUFVqCsN8/

...it must default to the original size or a larger variant or something.

It is Still a PNG

This is all good and dandy, but, while not stated (or incorrectly stated), the file is still a PNG. My Photo Feed Display generates thumbs of photos using a PHP function imagecreatefromjpeg() and fails when referencing any of the links above as the source image. Further, it works when I use the (similar) function, imagecreatefrompng().

Why This Matters

If you are just viewing files in a browser, it shouldn't (since the extensions are ignored -- see my proof below, by the asterisk -- by web browsers). If you are processing the files, it very well may.

I Thought this post Concerned GIF files, Too...

Oh yeah! It does. A week after discovering the previous information, I was viewing my Google Automatic Backup files on Google Plus and noticed it had converted a video into (what I assumed was) an animated GIF file. Awesome! I love those. This time, when I right-clicked to copy the image URL, I noticed that it didn't have an extension. I thought it may be some fancy code that uses multiple JPG files, changing the displayed JPG a few times per second using javascript, which would be fine but wouldn't allow me to link to a summary of the video as an animated GIF would. Nope, true animated GIF file, despite the lack of extension. The same logic as above, as far as a scaled down version, applies. For example:

https://lh3.googleusercontent.com/krJiBTc-61AznapjS1u4nON7BC6crcwtStAHTYYE7_8=w369-h207-p-no

...shows a animated GIF summarizing the video clip. Similarly, but somewhat less intuitively, removing the "=w369-h207-p-no" (width, height, progressive[?], interlaced[?]) shows a larger version:

https://lh3.googleusercontent.com/krJiBTc-61AznapjS1u4nON7BC6crcwtStAHTYYE7_8

Lastly, when I 'inspect element' for a (presumed) animated GIF on my Google Plus page, I get the following source image:

https://lh4.googleusercontent.com/-xS4TzDbCnIU/UgPbWW5PUpI/AAAAAAAAEcE/iUV1gyNyJlY/s122-c/VID_20130806_174425.m4v

...but, it is clearly not a .m4v (even though it probably links to one). When I remove the last part, I still get the animated GIF (this time, with 'play' overlay):

https://lh4.googleusercontent.com/-xS4TzDbCnIU/UgPbWW5PUpI/AAAAAAAAEcE/iUV1gyNyJlY/s122-c/

Or, I can take more off the end to get a larger version:

https://lh4.googleusercontent.com/-xS4TzDbCnIU/UgPbWW5PUpI/AAAAAAAAEcE/iUV1gyNyJlY/

In Conclusion

Hope this helps someone!

-

References

* I haven't researched this, but I'm pretty sure it is true.

Sunday, January 22, 2012

Bandcamp Downloader

Summary

I made a downloader for Bandcamp (/SoundCloud). Check it out: http://bcdlr.yaheard.us / http://bandcampdownloader.yaheard.us

2013.05.17 Update:

I just took the site down. I may rename/appropriate it for SoundCloud usage only since it does that fairly well, too. The BandCamp portion has been removed. See the site for details and participate in the survey there.

2012.03.17 Update:

Just added -- basic SoundCloud support. Because SoundCloud hosts user uploads, however, naming is much less likely to be (as) accurate.

Detail

I like Bandcamp.  It is a clean site that straight-links offsite to a band's page of choice, enables streaming and purchase, makes use of HTML5, and has an impressive variety of music.

While I have a smartphone, I only have 100MB/month for my data.  I pay $30/month...give me a break.  So, I use a 16GB SD card to keep (some) music with me.  I'm also very much "try before you buy".  If I've bought the last 2 CDs by a band, I can do a blind buy...but otherwise, I want to know I'll listen regularly before I shell out my money.  I'm still hesitant of digital only purchases (i know, right?); even though the first thing I do when I get a CD is rip it (to .ogg).

So, I made a bandcamp downloader.  Because Bandcamp makes use of HTML5 (maybe flash fallback, for older browser support?) to play their audio, their source links are pretty much out and the open.  At first, I parsed through some source code to download the songs I wanted to listen to on my commute.  I rarely get the chance to listen at my house...sitting in front of my computer.  However, I was dissapointed that there was not an easier way.

I found a few pages that had bookmarlets, extensions, and js scripts to do the task...but they seemed a little more difficult then I prefer my user experiences to be, and some were browser-dependent.

After making my experiment, I ran across the following two solutions:

  1. Bandcamp Download (http://bandcampdownload.com/) is kinda similar to what I wanted to do...but excels more at entire album downloads because it compresses (to .tar.gz -- a linux format to scare off users after the server's done the downloading work, i guess) for a single download. It seems to be down alot, though.
  2. Offliberty (http://offliberty.com/) seems to grab A file from the referenced page.  Due to this, it works best on individual song pages.  It works on artist or album pages, but only grabs the first track, and the forced download doesn't name the download with artist/album/track information.  
I wanted something a little more obvious...and am glad my work wasn't totally pointless.

Here's the result...the Bandcamp Downloader (http://bandcampdownloader.yaheard.us / http://bcdlr.yaheard.us)

Saturday, November 12, 2011

Watching Multiple Folders with Songbird

The Problem

I finally made the switch from WinAMP to Songbird. I had tried it on a laptop, so wasn't too surprised...and liked most of what I saw. That is, until I realized I couldn't watch multiple folders. Oh no!!!

This would have been fine if I could watch the 'My Music' folder...but Songbird seems to disapprove of watching libraries. Something about file duplication issues...whatev.

The Fix

Shortcut (failed)

I first tried to make standard shortcuts (right-click > new shortcut) to the other folders I wanted to watch within the watched folder. No go.

Symlink (worked)

I had recently run into a problem on my Linux box that I had to utilize Symlinks to address. Why not try something like that for Windows?

I came across this link:

It showed how to, using an (elevated) command prompt, make a Symlink in Windows. This is only available for Vista or later. I successfully used it for Windows 7.

Using the following code for the 4 additional folders I wanted to include in my library, new Symlinks were created in my watched folder which allows Songbird to successfully see songs added to those places.

mklink /d c:\media\music\extra_folder d:\music
          [watched fol] [Symlink name][folder to watch]

This has to be run in an elevated command prompt:

A Visual


...they look like shortcuts, but they are Symlinks!

Conclusion

Symlinks seem to be the solution to only one available watch folder in Songbird. This was verified on Windows 7 and Songbird 1.10.1 (Build 2160). Presumably, the same idea would probably work in Linux.

Friday, September 30, 2011

Cloud Computing -- A Quick Look

I created this presentation for Granville Academy as a stand-in for my presence at the Grand Opening, 2011 event which will be held on October 1st. My wife helped me stay some of the excessive content and translate the native geek speak.

Although it is very concise, I'm very happy with the result!

Photos and Graphics by Nick Chapman
Editing by Melissa Chapman

Further Reading

Google explains far more eloquently than I can...and they do it with HTML5. *insert ooohhh...and ahhhh*
The 'web apps' section is also relevant. The whole booklet is actually a pretty informative read.

Wednesday, September 8, 2010

JPlayer Audio Playlist Generator (JPlayer Playlister)

The CD that launched 1000...lines of code

Update

[2014.11.23]
The new jPlaylister v0.70 was built on jPlayer 2.8.2, because 2.6 had some recent serious issues with mobile browsers. Fixing those and implementing a more mobile friendly theme for the fs/mobile mode.

[2014.08.31]
The new jPlaylister v0.68 adds support for auto-scrolling playlists and full-screen/mobile mode. Previous releases added playlist caching (a feature that significantly decreases load times on large playlists) and support for displaying album art, in case you missed them.

/update...resume original post

My brother sent me a CD full of MP3s when I was in Kuwait -- cut off from the internet -- and going into withdrawals from not being able to download music. It was a good mix and has turned me on to a few artists that I knew nothing about.

A week ago, my wife has to take my car for something and, realizing that my radio sucks (shhh...i didn't hook up the antennae so my radio-listening experience would be less than inviting), flipped down my sunvisor CD holder and picked the fabled blue cd from the small selection. She made it 20 tracks or so into the CD (love MP3 CDs..if only it had any type of anti-skip) before arriving home and not using my car again for as long as she lives if it was up to her.

I hop in the car the next morning and A Tribe Called Quest welcomes me to the drive to work. A nice way to start the day. I re-affirm my love for my wife due solely to this incident and decide to facebook about it later that day. I did (may have been the following day) and that was that, but someone mentioned that hearing the mix would be fun. All to eager to oblige, I start devising ways to make it happen. So what if I spend 30 hours on a project and only 2 people give a crap (me and me). I had made web pages that incorporated flash based audio players before...but that was before the up and coming HTML5, and the somewhat supported audio tag.

Let's get a web player

A quick internet search later and I see JPlayer, which looks familiar. I glance at the demos and one has a playlist -- perfect. It supports OGG Audio and MP3's via HTML5 and will fallback to Flash for unsupportive browsers, bras, or family members. Perfect.

Initial implementation (derived from the JPlayer with playlist demo) wasn't that bad. I took the demo code and just added the ability to automatically generate a playlist from all the files in a given location. I think it took me a couple of hours...taking snack breaks and probably food breaks and almost certainly bathroom, crying baby, and phlebotomy breaks.

I went to bed last night with a working player. In addition to deriving the playlist from the files at the location specified, I was also able to add the option of displaying filenames or ID3 information (via getID3 -- a PHP class)

I put a link on fb and probably got thousands of views.

Revisions / Additions

Tonight, I pushed back the list of things I need to do and worked more on this little project. At some point during the day, I had decided that the first song on the playlist was wearing on me. I usually paused within 5 seconds of loading the page, but it doesn't take much to wear a song out, for me. That's another reason I don't do the radio...20 songs on a loop with advertisements and lame DJs. No thanks. So I added the option to 'randomize' list via a clickable link on the page. It caused me to rewrite a fair amount of code. But, I am pretty happy with the turnout.

Current Situation

See 'Update' at the top of this article to link to the current version of JPlaylister. Thanks for your interest and support.

Saturday, April 17, 2010

Photo Feed (RSS/Atom) Display Widget

Flickr / Picasa / ZenPhoto / Plogger / Gallery2/3 Photo Feed (RSS/Atom) Widget

Check it Out!

Update

The HTML version seems to get way more interest than the PHP version, so I'm focusing development on that (the Widget). I just added a means to specify border color and size, in addition to the spacing which was added a while ago. I've also added a 'Widget Builder' to the site, so you can customize and embed with even less html knowledge than before. Hope you love it!

I want to display my most recent Flickr photos on another page of mine. Easy enough, right? There are plenty of widgets and code snippets displaying Flickr Photos in all sorts of creative ways.

Well, what if I want them formatted/styled a certain way?

Not as easy.

What if I want to display a Picasa Web Album Feed as well? And perhaps a ZenPhoto RSS Feed. Am I the only lame PHP coder who uses all of these Photo storage / display / socialization mediums?

I decided to create a widget. While the implementation is limited in how it can format your images (for html coders; PHP coders should have more advanced options soon), it does work with a large number of RSS Feeds -- provided the feed has items with images.

Demo




This is a simple widget call referencing my Flickr PhotoStream RSS Feed. The widget creates thumbnails of each of the most recent items and displays them in a row, linking back to each item's source page.

Options

While the straight HTML call is pretty limited, there are some options which can be requested such as the ability to specify thumbnail size, disable square thumbs (prevent standard cropping), and specify the number of photos to be displayed. (Updates have been made which allow spacing, border size and color, and limited link options to be specified)

PHP users will soon be able to request an array of information so the photos can be formatted in any way they see fit. [Visit the project page and post a comment if this would be useful -- so I know there is an interest] Alternately, they can download the source code and host it on their own server -- changing it as they see fit.

Limitations

The HTML Widget call can only return a row of images which link to their source. There is currently no fancy customization (aside the options mentioned) for this type of call. Likewise, currently iframes are the suggested way to implement/embed the widget.

Compatibility

The widget has been tested on Flickr, Picasa Web Album, ZenPhoto, Gallery2, Gallery3, Plogger, and various other (RSS/Atom) Feeds (the list keeps growing). It employs the use of SimplePie for the basic Feed parsing, then does some further work to create thumbnails of the pictures and link back to them.

Sunday, January 10, 2010

Last FM Widget Found

Dotaloc's Last.FM Recently Played Songs - Widget












Maybe it's just me, but I had the hardest time finding this thing. What thing? Oh, let me start from the beginning...

Skip straight to the code

Backstory


I signed up with last.fm, a music streaming/information aggregation and listening habit analyzation site a couple of years ago. I have a scrobbler running on my computer, and it sends information about what I play in winamp to last.fm. They take that information and compare it to what other people who listen to some of the same bands listen to...recommend other artists to you, stuff like that.

You don't have to scrobble to enjoy. I sometimes just go to the website, type in an artist I like, and listen to a 'station' last.fm creates based on the artist, and others they have determined are similar or listened to by people who like the artist. I've been turned on to a few bands this way...as information about the current band/song is displayed on the website or in the standalone player (great for bypassing streaming radio site blocks, which are sometimes implemented by employers/etc. in order to cut down on excessive bandwidth usage).

This services, or similar ones such as Pandora are not new to lots of people...but this is my blog and I will ramble if I want.

That said, what good is it to scrobble all day if you can't integrate with all these awesome social networking sites and show your fans what songs listen to via an interactive widget? Not much. I found one that I was able to put on my dog's myspace page a while back and was pretty happy with it. I don't have a myspace...or facebook...account. My wife handles that stuff.

I wanted that widget on my personal website, though...seems appropriate. I have personal information...links to pictures...information about important happenings in my life like my son being born on October 9th...and the likes. Why not tell the world what songs I'm listening to so people will have a chance to learn some amazing new bands thanks to my chronic listening and hard work. Exactly.

Situation


So I want that same type of thing...on my personal site. Shouldn't be hard...the 'widget' wasn't myspace specific. I googled something like 'last.fm widget'...which actually searched 'last.fm' for the word 'widget'. This didn't end up doing what I needed. Let me re-arrange my search terms...'widget last.fm'. This was what I wanted to do...but didn't show me what I wanted. Last.fm has some type of page that seems like it is supposed to offer the type of list i was looking for with themes and all of that, but it has been broken for at least two days...probably more. I don't like waiting. Even though they have an API (Application Program Interface)...accessing the information I want surely has been done loads of times...there is no reason for me to write brand new code to do this, even if I am able, when I can just use someone else's. No luck...there are some scripts that use the API and pull up some fancy information...but I just want the list of the most frequent songs I've scrobbled. Nothing. You try. See.

*facepalm*

I guess I can reference my, still working, myspace code. At this point, I didn't remember if I had access to the code or if it was a clickable option myspace had enabled or something. Nope...the code was listed plain as day when I went to edit my profile. The 'widget' links to the broken last.fm page...but actually works.

I took the code and put it on my page. It didn't fit my color scheme, so I dug through the code a little and changed some of the 'red' graphics to 'black'...hoping it'd work. It did.

Moral


I tried this the hard way and wasted a few hours of my life. Boo to that. Don't be like me. Attempt easiest solution first, especially if you can determine if it'll work or not within a few minutes.

Want the Widget for Yourself


Hopefully this'll help someone else. I'll provide the straight JavaScript first, then the php that I use.

JavaScript


replace 'dotaloc' with your last.fm username
<span style="font-style:italic;">replace 'dotaloc' with your last.fm username</span>
<style>table.lfmWidget346494d0b5f3a8b580d15b4053d6d02a td {margin:0 !important;padding:0 !important;border:0 !important;}table.lfmWidget346494d0b5f3a8b580d15b4053d6d02a tr.lfmHead a:hover {background:url(http://cdn.last.fm/widgets/images/en/header/chart/recenttracks_regular_red.png) no-repeat 0 0 !important;}table.lfmWidget346494d0b5f3a8b580d15b4053d6d02a tr.lfmEmbed object {float:left;}table.lfmWidget346494d0b5f3a8b580d15b4053d6d02a tr.lfmFoot td.lfmConfig a:hover {background:url(http://cdn.last.fm/widgets/images/en/footer/red.png) no-repeat 0px 0 !important;;}table.lfmWidget346494d0b5f3a8b580d15b4053d6d02a tr.lfmFoot td.lfmView a:hover {background:url(http://cdn.last.fm/widgets/images/en/footer/red.png) no-repeat -85px 0 !important;}table.lfmWidget346494d0b5f3a8b580d15b4053d6d02a tr.lfmFoot td.lfmPopup a:hover {background:url(http://cdn.last.fm/widgets/images/en/footer/red.png) no-repeat -159px 0 !important;}</style>
<table class="lfmWidget346494d0b5f3a8b580d15b4053d6d02a" cellpadding="0" cellspacing="0" border="0" style="width:184px;"><tbody><tr class="lfmHead"><td><a title="dotaloc: Recently Listened Tracks" href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lmxhc3QuZm0vdXNlci9kb3RhbG9jLw==" target="_blank" style="display:block;overflow:hidden;height:20px;width:184px;background:url(http://cdn.last.fm/widgets/images/en/header/chart/recenttracks_regular_red.png) no-repeat 0 -20px;text-decoration:none;"></a></td></tr><tr class="lfmEmbed"><td><object type="application/x-shockwave-flash" allowscriptaccess="never" allownetworking="internal" height="199" width="184" data="http://cdn.last.fm/widgets/chart/friends_4.swf">
<param name="allowScriptAccess" value="never">
<param name="allowNetworking" value="internal">
<param name="movie" value="http://cdn.last.fm/widgets/chart/friends_4.swf">
<param name="flashvars" value="type=recenttracks&amp;user=dotaloc&amp;theme=red&amp;lang=en&amp;widget_id=346494d0b5f3a8b580d15b4053d6d02a">
<param name="bgcolor" value="#d01f3c">
<param name="quality" value="high">
</object></td></tr><tr class="lfmFoot"><td style="background:url(http://cdn.last.fm/widgets/images/footer_bg/red.png) repeat-x 0 0;text-align:right;"><table cellspacing="0" cellpadding="0" border="0" style="width:184px;"><tbody><tr><td class="lfmConfig"><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lmxhc3QuZm0vd2lkZ2V0cy8/Y29sb3VyPXJlZCZhbXA7Y2hhcnRUeXBlPXJlY2VudHRyYWNrcyZhbXA7dXNlcj1kb3RhbG9jJmFtcDtjaGFydEZyaWVuZHM9MSZhbXA7ZnJvbT1jb2RlJmFtcDt3aWRnZXQ9Y2hhcnQ=" title="Get your own widget" target="_blank" style="display:block;overflow:hidden;width:85px;height:20px;float:right;background:url(http://cdn.last.fm/widgets/images/en/footer/red.png) no-repeat 0px -20px;text-decoration:none;"></a></td><td class="lfmView" style="width:74px;"><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lmxhc3QuZm0vdXNlci9kb3RhbG9jLw==" title="View dotaloc's profile" target="_blank" style="display:block;overflow:hidden;width:74px;height:20px;background:url(http://cdn.last.fm/widgets/images/en/footer/red.png) no-repeat -85px -20px;text-decoration:none;"></a></td><td class="lfmPopup" style="width:25px;"><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lmxhc3QuZm0vd2lkZ2V0cy9wb3B1cC8/Y29sb3VyPXJlZCZhbXA7Y2hhcnRUeXBlPXJlY2VudHRyYWNrcyZhbXA7dXNlcj1kb3RhbG9jJmFtcDtjaGFydEZyaWVuZHM9MSZhbXA7ZnJvbT1jb2RlJmFtcDt3aWRnZXQ9Y2hhcnQmYW1wO3Jlc2l6ZT0x" title="Load this chart in a pop up" target="_blank" style="display:block;overflow:hidden;width:25px;height:20px;background:url(http://cdn.last.fm/widgets/images/en/footer/red.png) no-repeat -159px -20px;text-decoration:none;"></a></td></tr></tbody></table></td></tr></tbody></table>


PHP


edit the variables accordingly. the colors should probably be plain html written out word colors (blue, green, red) for the best chance of them working. check the PHP out and you can probably fine-tune it to your liking.
//set lastfm widget color and widget hover color -- these should be very basic for the highest probability they will work as some reference graphics
$lfmwc='black';
$lfmwhc='black';

//right-float last.fm widget
$lastfmwidget='<div class="floatright" style="margin-top: 15px; border: 1px solid #222; ">'

//taken from old myspace widget -- can't find anymore
.'<style>table.lfmWidget346494d0b5f3a8b580d15b4053d6d02a td {margin:0 !important;padding:0 !important;border:0 !important;}table.lfmWidget346494d0b5f3a8b580d15b4053d6d02a tr.lfmHead a:hover {background:url(http://cdn.last.fm/widgets/images/en/header/chart/recenttracks_regular_'.$lfmwhc.'.png) no-repeat 0 0 !important;}table.lfmWidget346494d0b5f3a8b580d15b4053d6d02a tr.lfmEmbed object {float:left;}table.lfmWidget346494d0b5f3a8b580d15b4053d6d02a tr.lfmFoot td.lfmConfig a:hover {background:url(http://cdn.last.fm/widgets/images/en/footer/'.$lfmwhc.'.png) no-repeat 0px 0 !important;;}table.lfmWidget346494d0b5f3a8b580d15b4053d6d02a tr.lfmFoot td.lfmView a:hover {background:url(http://cdn.last.fm/widgets/images/en/footer/'.$lfmwhc.'.png) no-repeat -85px 0 !important;}table.lfmWidget346494d0b5f3a8b580d15b4053d6d02a tr.lfmFoot td.lfmPopup a:hover {background:url(http://cdn.last.fm/widgets/images/en/footer/'.$lfmwhc.'.png) no-repeat -159px 0 !important;}</style>
<table class="lfmWidget346494d0b5f3a8b580d15b4053d6d02a" cellpadding="0" cellspacing="0" border="0" style="width:184px;"><tr class="lfmHead"><td><a title="dotaloc: Recently Listened Tracks" href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lmxhc3QuZm0vdXNlci9kb3RhbG9jLw==" target="_blank" style="display:block;overflow:hidden;height:20px;width:184px;background:url(http://cdn.last.fm/widgets/images/en/header/chart/recenttracks_regular_'.$lfmwc.'.png) no-repeat 0 -20px;text-decoration:none;"></a></td></tr><tr class="lfmEmbed"><td><object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="199" width="184" data="http://cdn.last.fm/widgets/chart/friends_4.swf">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://cdn.last.fm/widgets/chart/friends_4.swf" />
<param name="flashvars" value="type=recenttracks&user=dotaloc&theme='.$lfmwc.'&lang=en&widget_id=346494d0b5f3a8b580d15b4053d6d02a" />
<param name="bgcolor" value="#FF6600'.x/*#d01f3c*/.'" />
<param name="quality" value="high" />
</object></td></tr><tr class="lfmFoot"><td style="background:url(http://cdn.last.fm/widgets/images/footer_bg/'.$lfmwc.'.png) repeat-x 0 0;text-align:right;"><table cellspacing="0" cellpadding="0" border="0" style="width:184px;"><tr><td class="lfmConfig"><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lmxhc3QuZm0vd2lkZ2V0cy8/Y29sb3VyPXJlZCZhbXA7Y2hhcnRUeXBlPXJlY2VudHRyYWNrcyZhbXA7dXNlcj1kb3RhbG9jJmFtcDtjaGFydEZyaWVuZHM9MSZhbXA7ZnJvbT1jb2RlJmFtcDt3aWRnZXQ9Y2hhcnQ=" title="Get your own widget" target="_blank" style="display:block;overflow:hidden;width:85px;height:20px;float:right;background:url(http://cdn.last.fm/widgets/images/en/footer/'.$lfmwc.'.png) no-repeat 0px -20px;text-decoration:none;"></a></td><td class="lfmView" style="width:74px;"><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lmxhc3QuZm0vdXNlci9kb3RhbG9jLw==" title="View dotaloc\'s profile" target="_blank" style="display:block;overflow:hidden;width:74px;height:20px;background:url(http://cdn.last.fm/widgets/images/en/footer/'.$lfmwc.'.png) no-repeat -85px -20px;text-decoration:none;"></a></td><td class="lfmPopup" style="width:25px;"><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lmxhc3QuZm0vd2lkZ2V0cy9wb3B1cC8/Y29sb3VyPXJlZCZhbXA7Y2hhcnRUeXBlPXJlY2VudHRyYWNrcyZhbXA7dXNlcj1kb3RhbG9jJmFtcDtjaGFydEZyaWVuZHM9MSZhbXA7ZnJvbT1jb2RlJmFtcDt3aWRnZXQ9Y2hhcnQmYW1wO3Jlc2l6ZT0x" title="Load this chart in a pop up" target="_blank" style="display:block;overflow:hidden;width:25px;height:20px;background:url(http://cdn.last.fm/widgets/images/en/footer/'.$lfmwc.'.png) no-repeat -159px -20px;text-decoration:none;"></a></td></tr></table></td></tr></table>'
//end div
.'</div>';


Conclusion


Contact me if you need any help. Contact info at http://nick.chapmanit.com or chapmanit.com.

References


To post code to blogger, I followed instruction here: http://thoughtsomething.blogspot.com/2008/11/display-html-javascript-code-in-blogger.html