Collection of Hand Picked css music players.
1) Jquery Lyrics Player
Demo Image: Jquery Lyrics Player
Input is manual, but it’s basically capturing the timestamp in which the lyric should be shown
Author: Zed Dash Created: March 03, 2018 Made with: HTML, CSS and JavaScript
2) UI Challenge Music Player
Demo Image: UI Challenge Music Player UI Challenge Music Player interface
Author: Matt Stvartak Created: November 23, 2015 Made with: HTML, CSS and JavaScript
3) CSS Record Player
Demo Image: CSS Record Player A responsive CSS record player that also has a simple use case of streaming a random song from a playlist with SoundCloud API. Visual inspiration from a dribble shot by Kofe (link in HTML).
Author: Ryan Mulligan Created: March 27, 2016 Made with: HTML, CSS and JavaScript
4) HTML5 Audio Player
Demo Image: HTML5 Audio Player HTML5 Audio Player
Author: Luke Duncan Created: October 11, 2016 Made with: HTML, CSS and JavaScript
5) Bottom fixed radio player
Demo Image: Bottom fixed radio player Bottom fixed radio player
Author: İbrahim ÖZTÜRK Created: April 17, 2015 Made with: HTML, CSS and JavaScript
6) GSAP Player
Demo Image: GSAP Player Demo repo page for a player for GSAP Timelines
Author: Sarah Drasner Created: March 07, 2017 Made with: HTML, CSS and JavaScript
7) PS PLAYER
Demo Image: PS PLAYER A recreation of the PS PLAYER using HTML/CSS
Author: Johan Fagerbeg Created: September 08, 2013 Made with: HTML, CSS
8) CSS only audio player UI
Demo Image: CSS only audio player UI Streaming audio player animation using modern CSS animations, transforms etc.
Author: Niels Oeltjen Created: June 20, 2012 Made with: HTML, CSS
9) HTML5 Audio Player with Playlist
Demo Image: HTML5 Audio Player with Playlist An HTML5 audio player with a play list and using Font Awesome to create a custom player interface. Custom seek/progress bar included that allows you to seek positions. Using Archive.org as my audio source.
Author: Craig Stroman Created: June 17, 2015 Made with: HTML, CSS and JavaScript
10) HTML 5 Audio Player
Demo Image: HTML 5 Audio Player Uses one time loading gifs, swaps them in and out for the neat transition.
Author: Hans Engebretsen Created: February 27, 2014 Made with: HTML, CSS and JavaScript
11) Circle Audio Player with animation
Demo Image: Circle Audio Player with animation Circle Audio Player with animation
Author: Alex Permyakov Created: March 20, 2015 Made with: HTML, CSS and JavaScript
12) Multiple generated YouTube Player with Thumbnail
Demo Image: Multiple generated YouTube Player with Thumbnail Using the YouTube API as a base. Multiple YouTube Players on a single page, all with Thumbnails which when clicked play their video. Once the Videos have finished playing they revert back to the Thumbnail. Script generates the YouTube frames based on the data attributes in the html structure. Very straight forward and simple to implement.
Author: Rob Holder Created: February 21, 2018 Made with: HTML, CSS and JavaScript
13) Media player for everybodies radio
Demo Image: Media player for everybodies radio Media player for everybodies radio
Author: Just a random person Created: March 20, 2013 Made with: HTML, CSS and JavaScript
14) Simple HTML5 Audio Player In Pure JS & CSS
Demo Image: Simple HTML5 Audio Player In Pure JS & CSS JS to control playback; semantic ligature icon fonts from SymbolSet for buttons; microdata used to markup song from Nine Inch Nails, licensed under Creative Commons.
Author: Dudley Storey Created: June 18, 2014 Made with: HTML, CSS and JavaScript
15) DevWars Player UI
Demo Image: DevWars Player UI Pure CSS Music Player UI
Author: BROWNERD Created: July 08, 2015 Made with: HTML, CSS
16) Responsive Audio Player
Demo Image: Responsive Audio Player This audio player features playlist support via JSON data and step navigation. The version you’re seeing now is a fresh new take on this project by modernizing the style and offloading all browser detection crap to a wonderful audio player plugin called Plyr
Author: Mark Hillard Created: March 05, 2014 Made with: HTML, CSS and JavaScript
17) Gooey Music Player & Visualizer
Demo Image: Gooey Music Player & Visualizer Works best in Webkit.
Author: René Roth Created: August 10, 2015 Made with: HTML, CSS and JavaScript
18) circular music player UI
Demo Image: circular music player UI Disc music player
Author: Boylett Created: February 05, 2014 Made with: HTML, CSS and JavaScript
19) Music Player 2.0
Demo Image: Music Player 2.0 clicking around the menus and playing a song.
Author: Emil Created: December 26, 2017 Made with: HTML, CSS and JavaScript
20) Music Player and Audio Player
Demo Image: Music Player and Audio Player Simple Beautiful Fully Functional Music | Audio Player.
Author: Himalaya Singh Created: October 06, 2018 Made with: HTML, CSS and JavaScript
21) Playing around with a music player mockup
Demo Image: Playing around with a music player mockup Playing around with a music player mockup.
Author: Emil Created: July 04, 2015 Made with: HTML, CSS and JavaScript
22) Music Player Concept
Demo Image: Music Player Concept Best view on Chrome.
Author: Francesco Trillini Created: July 02, 2013 Made with: HTML, CSS and JavaScript
23) Flat music player
Demo Image: Flat music player Simple music player.
Author: Grandvincent Marion Created: October 13, 2015 Made with: HTML, CSS and JavaScript
24) Minimalistic music player design
Demo Image: Minimalistic music player design Minimalistic music player design. Hover to see the controls! Toggle between play and pause button.
Author: Julie Park Created: April 19, 2018 Made with: HTML, CSS and JavaScript
25) Material Music Player with HTML5, CSS3 and jQuery
Demo Image: Material Music Player with HTML5, CSS3 and jQuery Material Music Player is based on HTML5, CSS3 and jQuery.
Author: Mohan Khadka Created: July 07, 2015 Made with: HTML, CSS and JavaScript
26) HTML5 Music player design
Demo Image: HTML5 Music player design HTML5 Music player design
Author: Mark Murray Created: December 24, 2013 Made with: HTML, CSS and JavaScript
27) Phish Music Player
Demo Image: Phish Music Player Fun little UI music player experiment!
Author: Matthew Greenberg Created: April 11, 2016 Made with: HTML, CSS and JavaScript
28) Music Player Design In CSS
Demo Image: Music Player Design In CSS Music Player In HTML, CSS and Javascript
Author: Ahmed Tarek Created: January 02, 2017 Made with: HTML, CSS and JavaScript
29) Web audio api based music player app
Demo Image: Web audio api based music player app Web audio api based music player app
Author: Yuma Yanagisawa Created: December 23, 2014 Made with: HTML, CSS and JavaScript
30) Flip modal Music Player
Demo Image: Flip modal Music Player Flip modal Music Player UI
Author: LukyVJ Created: May 11, 2014 Made with: HTML, CSS
31) Music player with pre defined play list
Demo Image: Music player with pre defined play list Music player with pre defined play list. Press “play” and see the vinyl animation ! Made with js.
Author: Audrey Toulemont Created: July 06, 2015 Made with: HTML, CSS and JavaScript
32) Vinyl Music Player
Demo Image: Vinyl Music Player Simple music player concept.
Author: Marc Malignan Created: July 31, 2014 Made with: HTML, CSS and JavaScript
33) Music and album art Music player
Demo Image: Music and album art Music player Music and album art Music player
Author: Drew Vosburg Created: October 29, 2015 Made with: HTML, CSS and JavaScript
34) D3.js + React Music Player / Visualizer
Demo Image: D3.js + React Music Player / Visualizer Design a slick music player UI, then use the Web audio api to expose frequency data to D3.js, allow me to build sweet audio visualization!
Author: Tedd Arcuri Created: March 22, 2016 Made with: HTML, CSS and JavaScript
35) JavaScript music player
Demo Image: JavaScript music player JavaScript music player
Author: Alex Fernandez Created: November 28, 2015 Made with: HTML, CSS and JavaScript
36) Pure CSS Music Player UI
Demo Image: Pure CSS Music Player UI Pure CSS Music Player UI
Author: Avaz Bokiev Created: August 30, 2012 Made with: HTML, CSS
37) Simple Music Player
Demo Image: Simple Music Player Simple music player.
Author: Ricky Eckhardt Created: October 30, 2013 Made with: HTML, CSS and JavaScript
38) Music player Material UI
Demo Image: Music player Material UI Music player Material UI
Author: Asfo Zavala Created: October 27, 2015 Made with: HTML, CSS and JavaScript
39) Simple clean music player UI
Demo Image: Simple clean music player UI Simple clean music player UI
Author: Mustafa ismail Created: September 13, 2014 Made with: HTML, CSS and JavaScript
40) Simple React.js Music Player
Demo Image: Simple React.js Music Player A Simple Music Player Build With React.js. This Music player is built with React using NPM and Node.js.
Author: Parish Khan Created: May 21, 2016 Made with: HTML, CSS and JavaScript
41) Material Design Music Player
Demo Image: Material Design Music Player Material Design Music Player
Author: sarath Created: December 31, 2015 Made with: HTML, CSS and JavaScript
42) Simple CSS Music Player
Demo Image: Simple CSS Music Player This Love Music Player
Author: Orry Baram Created: JULY 08, 201 Made with: HTML, CSS and JavaScript
43) Music Player UI Design
Demo Image: Music Player UI Design Exercize to learn the new release of VueJS but I got a bit carried away.
Author: Sam Beckham Created: October 27, 2015 Made with: HTML, CSS and JavaScript
44) Delightful Music Player
Demo Image: Delightful Music Player Delightful Music Player
Author: Boylett Created: February 16, 2014 Made with: HTML, CSS and JavaScript
45) Little music player with ES2015
Demo Image: Little music player with ES2015 A nice little music player with ES2015
Author: Jack Thomson Created: October 01, 2016 Made with: HTML, CSS and JavaScript
46) Responsive Music Player (UI mockup)
Demo Image: Responsive Music Player (UI mockup) UI for a responsive music player site/app and tried to make it very simple with very limited functionality in mind. Eventually expand on this idea to have a fully functional music player.
Author: Cole Waldrip Created: October 01, 2017 Made with: HTML, CSS and JavaScript
47) Mini Music Player with CSS Animations
Demo Image: Mini Music Player with CSS Animations A mini music player with audio, RequestAnimationFrame, and CSS Animations and everything without jQuery
Author: Glen Cheney Created: April 05, 2017 Made with: HTML, CSS and JavaScript
48) Abbey Music Player
Demo Image: Abbey Music Player Not fully functional, but music plays when you hover over the record
Author: Alyne Created: January 03, 2017 Made with: HTML, CSS and JavaScript
49) Cool Material Music Player
Demo Image: Cool Material Music Player Material Music Player Code
Author: Grapes Theme Created: May 13, 2016 Made with: HTML, CSS and JavaScript
50) Rotate animation disc music player
Demo Image: Rotate animation disc music player Rotate animation disc music player
Author: Shayan Created: February 19, 2018 Made with: HTML, CSS and JavaScript
51) Minimal Music Player
Demo Image: Minimal Music Player Chrome App music player that is designed to be floated on top of other applications while remaining minimal.
Author: Nicholas Dobie Created: July 15, 2014 Made with: HTML, CSS and JavaScript
52) Phonograph music player
Demo Image: Phonograph music player Phonograph music player with html&css
Author: muhammad mashaly Created: October 30, 2016 Made with: HTML, CSS
53) Music Player UI
Demo Image: Music Player UI Music player UI stuff
Author: Derek Wheelden Created: February 18, 2013 Made with: HTML, CSS
54) Random Jumping Music Player
Demo Image: Random Jumping Music Player Music player display that randomly jumps around
Author: Darko Efremov Created: July 24, 2015 Made with: HTML, CSS and JavaScript
55) Interface Animation - Music Player
Demo Image: Interface Animation - Music Player Interface Animation - Music Player
Author: Nerios Lamaj Created: February 25, 2016 Made with: HTML, CSS and JavaScript
56) Really cool music player
Demo Image: Really cool music player Music Player Design (Again)
Author: Ahmed Tarek Created: January 05, 2017 Made with: HTML, CSS and JavaScript
57) Dev Wars music player
Demo Image: Dev Wars music player It is full functional, with an easy to manipulate playlist of songs. There is a set of five songs in the playlist already, to show off the functionality of the player but you are more than welcome to add, rearrange, remove, etc. the songs.
Author: Zach Case Created: July 09, 2015 Made with: HTML, CSS and JavaScript
58) Rdio-like Music Player
Demo Image: Rdio-like Music Player Using Framer.js to prototype the interaction between song-list and cover art in a music player. The song-list will snap closed or open after a certain threshold of movement.
Author: Ryan Sims Created: March 16, 2014 Made with: HTML, CSS and Framerjs
59) SomaFM Music Player
Demo Image: SomaFM Music Player This is a Vue.js web application for streaming radio stations from Somafm.com. This app uses the public SomaFM JSON channels API endpoint to pull in a list of stations and makes it easy to switch between stations. This app also used Three.js and the HTML5 Web Audio Context API to sample audio data and create a visualizer effect for the selected station.
Author: Rainner Lins Created: September 28, 2018 Made with: HTML, CSS and JavaScript
60) Gooey Music Player
Demo Image: Gooey Music Player Gooey Music Player
Author: Jeremy Karlsson Created: July 29, 2015 Made with: HTML, CSS and JavaScript
61) Bootstrap Music player
Demo Image: Bootstrap Music player Music player using bootstrap 4, input type range, and codrops subtle click effects
Author: Naila Ahmad Created: November 12, 2015 Made with: HTML, CSS and JavaScript
62) Simple clean music player
Demo Image: Simple clean music player Simple clean player using Materialize CSS framework. Clicking the album cover reveals more information about the album.
Author: Nick Burress Created: April 23, 2016 Made with: HTML, CSS
63) Music Player Layout
Demo Image: Music Player Layout Html & CSS Music player layout.
Author: Proinsias Matthews Created: June 25, 2016 Made with: HTML, CSS
64) CSS Music Player
Demo Image: CSS Music Player CSS Music Player
Author: Hasan Daghash Created: December 02, 2016 Made with: HTML, CSS and JavaScript
65) Card Music Player
Demo Image: Card Music Player An excuse to try CSS Grid, CSS Variables and throw in a marquee tag. No edge.
Author: Mike Quinn Created: June 09, 2018 Made with: HTML, CSS and JavaScript
66) Self Code a music player for users
Demo Image: Self Code a music player for users Self Code a music player for users
Author: Lại Văn Đức Created: August 06, 2015 Made with: HTML, CSS and JavaScript
67) Music Player with Social Share
Demo Image: Music Player with Social Share Music Player with Social Share
Author: Paul Borm Created: February 02, 2016 Made with: HTML, CSS and JavaScript
68) Mini Music Player
Demo Image: Mini Music Player Mini Music Player
Author: Amit Soni Created: September 06, 2016 Made with: HTML, CSS and JavaScript
69) Visual Music Player - UI experiment/concept
Demo Image: Visual Music Player - UI experiment/concept In this case no library for animations was used
Author: Miguel Created: February 28, 2016 Made with: HTML, CSS and JavaScript
70) Beautiful Material player
Demo Image: Beautiful Material player Beautiful Material player with animation
Author: Jonathan Obino Created: February 01, 2016 Made with: HTML, CSS and JavaScript
71) Material player
Demo Image: Material player Material player
Author: Dirk-Jan Created: November 24, 2015 Made with: HTML, CSS and JavaScript
72) Simple responsive Music Player
Demo Image: Simple responsive Music Player Simple responsive Music Player
Author: Pavel Laptev Created: March 10, 2016 Made with: HTML, CSS and JavaScript
73) Music Player
Demo Image: Music Player Music Player
Author: Yuki Created: September 18, 2018 Made with: HTML, CSS and JavaScript
74) Material music player
Demo Image: Material music player Pure Material music player
Author: Roemerdt Created: November 06, 2015 Made with: HTML, CSS
75) Filterable Tracklisting Music Player
Demo Image: Filterable Tracklisting Music Player Filterable Tracklisting Music Player
Author: Justin Estrada Created: March 21, 2017 Made with: HTML, CSS and JavaScript
76) Music player with hidden controls
Demo Image: Music player with hidden controls Hover/Click on album cover to show controls.
Author: Dario Fuzinato Created: DECEMBER 16, 2015 Made with: HTML, CSS and JavaScript
