Record Player: Javascript style

Here is the general idea: I wanted to have a record player that looks nice, spins at the appropriate rpm, is able to display matching labels and where the tone arm tracks the playing song in real time – in other words – the record should end depending on the length of the song.  All of that should work without any interaction.

My husband, a semi-professional photographer, took nice pictures of the record player – I started the gimp work and removed the tone arm into a different image. The player sans arm was packed into the background of a <div>  and the tone arm image was loaded into a positioned canvas. But how to turn it ?

Just rotating around the central axis didn’t work. What about moving the rotating point to where it actually belongs? On top of the tone arm?

A little better, but the tone arm wouldn’t touch the record .. warped as it is. So I combined both methods by rotating it around the upper axis and rotating it a bit the other way around the central axis while sliding the whole image down – all in the appropriate steps.

Next was the record “movement”. That was easy. I created a “label less” record and rotated it in three parts to get 3 different images that could be displayed “block” or “none” in an interval loop.

The labels were a different story. I didn’t want to manually put each and every label in the correct perspective, turn a few degrees, put it into the correct perspective again and so on. It would also prevent me from automatically creating special labels for the website visitors. In other words – this would have to be done in “canvas” as well. It actually took three canvases to perform the necessary transformations, rotations and scalings. And a lot of try and error.

But finally, I got something like this:

I take an image of a label (which can be manipulated, e.g. with a title) and the JavaScript automatically creates a number of correctly rotated label in the correct perspective, which again will be displayed and hidden in the right order. The timer for the interval was set so that the rotation speed was in the appropriate area.

 I programmed some tone arm wobbling action because – well, that’s how those things look in real life (the real player is fully functional). But now it was time to add the html5-audio bits to play the music, get the duration and calculate the steps for the tone arm so that it reaches the end whenever the song ends.

I added some clock-time calculation because some web browser slow the timers whenever the tab is hidden and I needed a delta to make sure the records ends correctly even if the browser doesn’t have time to go through all the steps.

The vintage flavor was enhanced by adding some background noise and the correct pops and clicks whenever the needle lands in the ending groove.

Creating the server part providing the music and parsing information for the correct label, the name of the song and the performer was standard and now my virtual record player is ready to enjoy.

Want to try it out? Click here.

Have fun with a few minutes of truly vintage record player feeling.