The first step in making a virtual record player is to have a record. This is what will be acted upon; it must exist. And, once it exists we will know it’s properties, which will impact the actions done onto it. But we must answer, in designing the disc, what properties must and should it have?
We get inspired by the function it is to serve: to provide for the playing of a single song. It is to sit atop a platter of a turntable. This brings up a key issue: what percentage of the platter should it take up? What size is this disc? Usually, a single is a smaller size than the platter, and has a wide inner circle (which gets spanned by an adapter). Is that the size and shape to seek? Should we forfeit the available space, and limit our record to a harder-to-see disc?
We are reminded of another type of single—the 12″ single, which would take up the full platter. We decide that is the better size, as it would offer the real estate needed to easily view the disc and its label. (It also means that the disc will rotate at 33 rpm instead of 45. I will discuss that in a later post about functionality).
So, how should we make the disc? What stuff should it be made of? In wishing our disc to look like an actual record, we first seek to use an image. This is also a simple solution, code-wise, as we only need to insert song information on the inner label. We are only dealing with a couple elements.
So, in Photoshop, we edit a photo of a disc so that it’s label is blank (primed for dynamic text). Here is what we came up with. Note, this is the image we used when we had been using a “7 inch” single instead of 12.
An image was pleasing to us because it has the ‘sheen’ of a real disc, as well as it’s many grooves. But something seemed limiting about it. Then one night we had a thought: what if we could offer different colored discs? That would be fun! That would be difficult to manage, though, using images. Finally we had the excuse, and purpose, to switch over to a fully HTML solution. Just code!
Before coding, we must study a real record, to learn it’s layout and look. This will inspire our code, and it also allows us to make decisions: what to emulate and what to leave? We can take liberties. The hundreds of grooves seem too big a pain to recreate. Instead we can focus on the main elements, and in doing, will create a kind of hybrid record-disc that resembles vinyl but has web-only features such as dynamic colors. So, we look at those main elements, and see that a record is a circle, with several inner-circles. The placement and size of those circles are what we must code. Those elements are:
- The outer hard / solid unplayable section.
- The playable span (that which in real life has all the grooves), which is lighter in color.
- The inner hard / solid unplayable section.
- The label
- The hole
The size of our record has to be small enough so that it can be observed in its entirety, even if on a large screen (and even if on a phone). It will be a birds-eye view. We strike upon a <div> with width / height of 360px.
The basics of coding a circle is to give a <div> a radius of 50%. We know that it’s also important to use the border-box value for border-sizing. We make an outer div (container) and then a set of inner divs. Each inner div is positioned absolutely at top: 50% , left 50%. It’s starting spot / the space it takes up is determined by its width-height, in combination with its margin (top and left).
For example, the playable span. If we deem it should begin 8% from the outer disc, then we give it a width and height of 92%. But in order for its position to be normalized, we have to set the margin top and margin left values to be NEGATIVE x, x being one-half of the width / height.
Think of it as a series of boxes (which become circles via radius) coming out from the middle of the outer box.
Within the playable span, we create children divs to serve as the grooves. These are also circles of course, so will use border-radius of 50% and will be positioned absolutely out of the middle of the parent (left and top 50%). Trial and error of what looks right tells us the these grooves should be .5px and separated every 2px.
Here is the code we came up with to render a disc with inner circles and grooves within the playable span.
See the Pen LP Record Disc HTML CSS by Matthew Hanley (@cleanandbreezy) on CodePen.
Multi Color Options
Now we can benefit from our HTML disc by making CSS classes for various colors. The class gets added to the outer-disc <div>. Here is an example for yellow. The elements that are given a color are the outer disc, the insets, and the playable area.
div.circle-outer.yellow {
background: #f5ed0a;
}
div.circle-outer.yellow div.inner.inset {
background: #f5ed0a;
}
div.circle-outer.yellow div.inner.track-1 {
background:#d4cf50;
}What we envision is having a settings panel, where the user can select a color. On change, the relevant class gets applied to the <div>.circle-outer instantly!
Progress Indicator
The playable section is given a 0px white border. This will allow us to increment the size of the border as the record progresses. We have in mind plotting a stylus across the disc when the turntable is built. But, we can also use the disc itself to show progress. This can be a cool feature, and it’s good to have redundancy. One benefit being: if the turntable is invisible (an option we can offer in a settings panel), there will remain a progress indicator.
The Label
The label is an integral part of the disc. It takes up 43% of the space, and it contains the song name and artist name. (It also gets a logo). In order to maximize the room for a song title, we decided to give it ‘curved text’, following a circular path. This is best handled by an .svg. It takes some trial and error to determine the coordinates of the path, and the position of its text box.
Now we have a disc. Let’s give it context and life .. that’s right; time to bust out a turntable and spin!
