Version update at this new post: https://unfinishedbitness.info/2020/12/06/itunes-missing-feature-library-statistics-revised/
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.
The tools and resources I used:
- Atom editor – Very extensible, very easy to use. (https://atom.io)
- Javascript – Interprested programming language that runs within web browser (https://en.wikipedia.org/wiki/JavaScript) (https://www.w3schools.com/Js/)
- HTML5 – HyperText Markup Language (https://www.w3schools.com/html/html5_intro.asp)
- CSS – Cascading Style Sheets (https://www.w3schools.com/Css/)
- chart.js – Charting library (http://www.chartjs.org)
- list.js – List library (http://listjs.com)
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:
Example PDF of entire iStats output:
https://unfinishedbitness.files.wordpress.com/2018/05/istats-report.pdf
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.
Link to the zip file containing everything you need (hosted at Google Drive): iStats.zip
Version update at this new post: https://unfinishedbitness.info/2020/12/06/itunes-missing-feature-library-statistics-revised/
istat is genius but it’s possible to have TOP 20 artists ? (sorry for my english)
Thanks! And sure it can be done. Edit each function that builds the charts such that the loop is incremented to 20 or 5 or whatever you want. The functions building the charts are all named similar: StatBldCht*
Note the highlighted line below where you would change the max from 10 to whatever:
// Create top 10 Tracks chart
function StatBldChtTopTrk() {
var eChart = document.getElementById('cChartTopTrk');
var aTopNames = [], aTopPlays = [], iLp = 0;
// Sort artists by play count
aTracks.sort(function(a, b){ return b.fPlay - a.fPlay });
// Grab top 10
for (iLp = 0; iLp < 10; iLp ++) {
I built this with 10 in mind as thats what I was after. Increasing beyond ten may cause the graph colors to break, or appear the same beyond 10 because the code is written with an array of 10 colors. You could expand them, or alter them if you dont like the rainbow effect, by modifying the arrays. For 20, you would need 10 more array entries for both backgroundColor and borderColor. Again in each StatBldCht* function, look for this part of the code and modify:
backgroundColor: [
'rgba(227, 28, 28, 0.7)',
'rgba(235, 103, 25, 0.7)',
'rgba(246, 161, 16, 0.7)',
'rgba(246, 215, 1, 0.7)',
'rgba(154, 194, 30, 0.7)',
'rgba(0, 139, 89, 0.7)',
'rgba(12, 138, 182, 0.7)',
'rgba(51, 92, 163, 0.7)',
'rgba(87, 60, 142, 0.7)',
'rgba(181, 14, 144, 0.7)'
],
borderColor: [
'rgb(227, 28, 28)',
'rgb(235, 103, 25)',
'rgb(246, 161, 16)',
'rgb(246, 215, 1)',
'rgb(154, 194, 30)',
'rgb(0, 139, 89)',
'rgb(12, 138, 182)',
'rgb(51, 92, 163)',
'rgb(87, 60, 142)',
'rgb(181, 14, 144)'
],
Then you would want to change the text of the chart match the number of entries. Simply modify the line in each StatBldCht* function (bold here):
options: {
legend: { display: false },
title: { text: 'Top 10 Tracks (by Plays)' },
I know a lot of this code could be shared across functions making it quicker to modify. I didn’t want to put a ton of effort into the project. Note that I’ve also read that the XML file output will likely be deprecated by Apple in the future, making this useless. Very disappointing.
Thank you !!!
I’ve updated iStats to 1.4.0 which includes some new features including
– Top n results (1 – 10), and easier to modify
– Export library to CSV.
– Song durations extracted and total listening time calculated.
See post for details.
Though Apple Music no longer generates the XML by default. You can force an export using File > Library > Export Library… So iStats is useful again as it can read that output. I have an update complete (1.3.0) and nearly ready for publication that allows an export to CSV of the fields this utility generates stats for. The intent for the CSV output is so it can be ingested into data analysis tools such as Elasticsearch and Splunk. I will also be adding song duration metrics and total time listened in a future release.
Pingback: Apple Music (iTunes) Missing Feature – Library Statistics – Revised | Unfinished Bitness
Pingback: Splunking Apple Music Library | Unfinished Bitness