Pocket Vinyl

• 

• 

  Features a 4-track vinyl with up to 13 minutes of music!

Inspirations

Colors: Andria Darius Pancrazi's photography

Mood: The restored vinyl music curated by Excavated Shellac in the Free Music Archive

What it does

Pocket Vinyl is a moody turntable simulator with a story to tell!

To listen to the vinyl record, first turn on the turntable. Then, drag the arm of the turntable anywhere onto the vinyl. If you drop it on the edgemost notch of the vinyl, the turntable will start by playing the first song. But, you can "scrub" to any song by simply lifting the arm and placing it onto another position along the vinyl.

The record plays for 13 minutes and has a total of 4 tracks.

How I built it

Tools: HTML, CSS, JS

Challenges I ran into

Honestly, I spent like half of the hackathon trying to figure out how to vertically center a single HTML element...

Accomplishments that I'm proud of

I'm happy with how the website adapts to different screen sizes!

What I learned

I learned that you could use "vw" as an adaptive unit in CSS to make smooth screensize transitions.

Then, when you want to set a "max" value for a style attribute that uses "vw", you can use an @media query and explicitly define a value for the attribute whenever a certain screen size is exceeded.

What's next for Pocket Vinyl

In the future, I'd like to have a feature where you can upload your own audio files to play on the turntable.

Built With

• css
• html5
• javascript