From our sponsor: Create stunning brand assets with the help of our AI-driven Creative Assistant. Get started today.
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.
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:
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:
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:
Credits and Resources
- Acoustic impulse response data from OpenAIR: The Open Acoustic Impulse Response Library licensed under Attribution Share Alike Creative Commons license
- Abbey Load by Stuart Memo licensed under MIT
- Audio visualization made with Visualizations with Web Audio API and Voice-change-o-matic
- Animations powered by Michael Villar’s Dynamics.js
- All remixes by Ivan Chew © 2016 Licensed under a Creative Commons Attribution (3.0) license CC BY 3.0. More free remixes: http://dig.ccmixter.org/free
- Vinyl NoiseSFX by Chia: All the sounds included in Vinyl Noise SFX have been recorded and edited by Chia. These samples are the property of Chia and they are hosted on 99Sounds with his permission. You are hereby granted a license to use these samples for both non-commercial and commercial purposes, provided that the samples are not used as part of another sample library or a virtual instrument.
- Records icon made by Madebyoliver from www.flaticon.com, licensed under CC 3.0 BY
- Stadium, cathedral, guitar icons made by Freepik from www.flaticon.com, licensed under CC 3.0 BY
- Getting Started with Web Audio API by Boris Smus on HTML5Rocks
We hope you enjoy this little experiment and find it inspiring!
Wow, Outstanding Player. Great Work.
Hey, this vinyl part remembers me a Chris Ganon experiment.
You make things so awesome. so Perfect.
Please keep on inspiring :D.
This is amazing! Love the care put into it, great job
absolutely blown away – outstanding work.
Speechless.. awesome work
Amazing job! Congrats!
Hi Mary Lou I loved your work, Codrops is nice place to get inspiration
You make me smile. I have an amazing use for this. Will post when live. It will make YOU smile.
Showing some love from New Orleans
Great choice of color as well ! Where did you get your inspiration ?
WOW, Awesome Work…
Sitting here with an open mouth once again!
OMGG. This is mind blowing!!
Yes, Vinyl player looks http://codepen.io/chrisgannon/full/GpwqgG/. you made it awesome, thank you for such inspiration.
hi. why dont work in the phone ? just loading… cant see next page
The vinyl must rotate at 33 or 45 rpm and the pickup angle is wrong. correct those errors. Anyway , great work
How do you guys make all this awesome stuff?!
Very nice work…as always.
Mary Lou… i fell in love with you 🙂 (your works included)
those are wonderful
Three times thanks!
This website and Mary You is amazing, I was always looking for something like this! Keep up posting quality stuff like this!
This BLEW my mind. Amazing work! Any way to sync records with associated tracks on Spotify?
found a way?
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?
This was awesome!!!
I can never get bored of seeing the awesome demos and tuts you share! Awesome work Mary!
Why it does not work on the local?
same here ! 🙁 awesome work by the way !
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. 🙂
I love it. Thank you.
Only in Firebox
Very cool… Awesome!
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)?
Do you have an example of this Implementation? I’d love to see!