Javascript

All posts tagged Javascript

Love it or hate it. Those are the only two terms I hear from people about iTunes. This article isn’t going to debate the pro’s and con’s of using iTunes. No matter which camp you are in, there is one undeniably missing feature – library statistics. With statistics generated from your library, you can learn a few things about yourself. I’ve used a couple of tools in the past, and even tried some different library management software that include some basic statistics. None kept my attention for various reasons ranging from size, ease of use, Java requirements, or simply not enough detail. This article explores the implementation of a standalone statistics generator that meets my needs.

To create this application, which I have called iStats, I had only a few requirements:

Must be pleasing to look at (nice colorful graphs).

Must be quick (short run time).

Must be easy to invoke (as easy as launching a program).

With that in mind, I thought about writing it in several different languages. In the end I decided that simpler was better, so why not write it in Javascript which can be encapsulated in a single html file. This would allow double clicking the html file to launch it. At the same time, I could brush up on my Javascript, learn about HTML5, and learn a charting library.

That most difficult part of the entire project was learning chart.js and configuring the graphs. While the documentation is good, there is room for improvement in a few areas. The CSS, Javascript, and HTML5 code are all enclosed in a single html file: “iStats.html”. This file has a reference to pull in chart.js and list.js.

The application once launched:

Use the “Choose file” button to open a native file selector. Locate and select the iTunes library XML file (“iTunes Music Library.xml” on a Mac):

Once selected, the application then processes the file, and updates the Document Object Model (DOM – https://www.w3schools.com/js/js_htmldom.asp) with the graph data. You won’t see any screen updates. This is due to how Javascript works within the browser. Any changes in the DOM are rendered in the browser window when the Javascript completes.

Reading a file in the local file system from the browser via Javascript was a bit tricky. This relies on the Javascript FileReader (https://developer.mozilla.org/en-US/docs/Web/API/FileReader) object. If your browser doesn’t support the API call (or its disabled), then iStats won’t work. It uses the FileReader readAsText method to read the XML file, then parses it one line at a time.

Once processing is complete, about 10 seconds for my library of 6,700 songs, the page is rendered. At the top are three list sections. These were generated into the DOM using the “list.js” library. The first (leftmost) column are the overall library statistics. The second (middle) column are the statistics related to play counts. The third (right) column are statistics related to skip counts. The lists are ordered such that related items are on the same row:

The remainder of the page is consumed by graphs. A few examples follow. At the bottom of this article is a PDF of an entire iStats page where you can see all the graphs, and the iStats source code.

Notice the call out here. Hovering over a bar on the graph shows the exact value:

This happens to be the last graph of the page. It shows a timestamp of when the page was generated:

To use iStats, simply extract the linked zip file. To make things easy, a copy of chart.js and list.js is included (distributed via MIT License), but you should download them yourself. For your own sanity, review the Javascript source in the “iStats.html” file so you can see there is no funny business going on. It reads the XML file, and updates the html page DOM, thats it.

The code could stand to be tightened up. There is plenty of room for code re-use. I got it to the point where it does what I want and works, but I haven’t cleaned it up. iStats is being released under the Simplified BSD License. Feel free to use, modify and improve.