Interactive Record Player

An experimental template with an interactive old school record player powered by the Web Audio API.

InteractiveRecordPlayer_800x600

View demo Download source

Today we’d like to share an experimental old school record player template with you. The idea is to tap into the incredibly awesome Web Audio API and see what we can do with it. The demo starts with an initial grid view, powered by Masonry. Once a grid item is clicked, a circle expands and covers the grid, revealing the selected album. Now we are in a slideshow view where we can browse through the records. Once we hit the play button, we load the songs of the record and then show the record player. The tonearm of the record player moves to the right position and the music starts playing. Each record has songs associated to each side of the LP and we can drag the tonearm to play from a certain position. Additionally, we can add some playful effects, like the scratchy vinyl noise or some acoustic impulse responses.

Attention: This demo is highly experimental — fearless browsers only!

Let’s have a look at the different views for this demo.

The initial view is the Masonry-powered grid that has some item offsets for an asymmetric look:

InteractiveRecordPlayer_1

Once a grid item is clicked, we show the single record with a Material Design-like effect of an expanding circle that hides the grid:

InteractiveRecordPlayer_2

The single record view is a slideshow where we can navigate between the records. Once the play button is pressed, we load the songs and show the player:

InteractiveRecordPlayer_3

Credits and Resources

We hope you enjoy this little experiment and find it inspiring!

View demo Download source

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 38

  1. 2

    This website and Mary You is amazing, I was always looking for something like this! Keep up posting quality stuff like this!

  2. 4

    This BLEW my mind. Amazing work! Any way to sync records with associated tracks on Spotify?

  3. 6

    Hello! Excellent your work!
    I would like to take a doubt …
    When I open the site offline, the content not is open, it is only charging.
    Online this does not happen .. Why?
    Thx

    • 12

      This demo uses an API to fetch the mp3’s data, which is in the file “abbey-load.js”. This API doesn’t allow cross-origin requests, means you can’t use “file” protocol, only “http” is allowed. Try opening using WAMP or XAMP/ LAMP whatever you use for apache server/nginx server. It will work fine. :)

  4. 18

    Awesome Player.I am using this player into a wordpress theme.While Integrating this player I found that, before playing songs, the player need to load or download all the songs.Is there a way to play song while buffering (not downloading full song and then playing)?

Follow this discussion

Leave a Comment