71 CSS Music Players

Collection of free HTML and CSS music player code examples. Update of March 2018 collection. 2 new items.

Author

• Julie Park
• April 19, 2018

Links

• demo and code

Made with

• HTML / CSS (SCSS) / JavaScript

About the code

Music Player Design

Minimalistic music player design. Hover to see the controls. Toggle between play and pause button.

Author

• Zed Dash
• March 3, 2018

Links

• demo and code

Made with

• HTML
• CSS/SCSS
• JavaScript (jquery.js)

About the code

Lyrics Player

Input is manual, but it's basically capturing the timestamp in which the lyric should be shown.

Author

• Shayan
• February 19, 2018

Links

• demo and code

Made with

• HTML
• CSS/SCSS
• JavaScript

About the code

Music Player UI

Music player UI with animation.

Author

• Emil
• December 26, 2017

Links

• demo and code

Made with

• HTML
• CSS/SCSS
• JavaScript (jquery.js)

About the code

Music Player 2.0

Try clicking around the menus and playing a song.

Author

• Jamie Coulter
• August 18, 2017

Links

• demo and code

Made with

• HTML (Haml) / CSS (SCSS)

About the code

Media Player CSS Only

3D cube media player CSS only. Based on this awesome Dribbble shot by Balraj Chana.

Author

• Rofida Abd Elrahman
• June 19, 2017

Links

• demo and code

Made with

• HTML
• CSS

About the code

Audio Player HTML5

Audio player HTML5 for Rofa Music Store.

Author

• Kyle Lavery
• May 30, 2017

Links

• demo and code

Made with

• HTML/Pug
• CSS/SCSS

About the code

Music Album UI

Responsive music album UI.

Music Player

HTML and CSS simple music player with TweenMax.js.
Made by Qing Li
May 28, 2017

Green Audio Player

An audio player written in JavaScript, free for stealing and modifying.
Made by Greg Hovanesyan
February 20, 2017

Clean And Stylish Music Player UI

Responsive and animated - check out the playlist animation on a desktop screen.
Made by Gabrielle Wee
February 19, 2017

Music Player Design

Music player design in HTML and CSS.
Made by Ivan Odintsov
January 28, 2017

Musical Particles

Musical particles with HTML, CSS and JavaScript.
Made by Sean Free
January 28, 2017

Audio Player v.2.0

Audio player in HTML, CSS and JavaScript.
Made by Vladyslav Kubyshkin
January 19, 2017

Music App - Prac

Music app with HTML, CSS and JavaScript.
Made by Jinn Wang
January 17, 2017

Reel Player

Reel player with HTML, CSS and JavaScript.
Made by Drew Endly
January 10, 2017

Abbey Music Player

Music player inspired by Abbey Music App. Not fully functional, but music plays when you hover over the record.
Made by Alyne
January 10, 2017

Music Player Design

HTML, CSS and JavaScript music player design.
Made by Ahmed Tarek
January 5, 2017

Music Player Design In CSS

Music player design in HTML and CSS.
Made by Ahmed Tarek
January 2, 2017

Material Design - Media Player FAB 2016

Material design media player with HTML and CSS.
Made by Drew Endly
January 1, 2017

Music Player

Music player with HTML, CSS and JavaScript.
Made by Samuel Janes
January 1, 2017

HTML5 Audio Player w/ Responsive Playlist

This is an HTML5 audio player that detects the user agent of your device/browser/OS and applies styling that matches the native audio player. The playlist responds to the width of your screen and features basic UI controls.
Made by Mark Hillard
December 27, 2016

Music Player UI

Music Player UI with HTML, CSS and JavaScript.
Made by Samuel Janes
December 3, 2016

Mini Music Player

Mini music player with HTML, CSS and JavaScript.
Made by Amit Soni
December 3, 2016

CSS Music Player

HTML, CSS and JavaScript music player.
Made by Hasan Daghash
December 2, 2016

Music Player Design

HTML and CSS music player design.
Made by Genaro Colusso
December 1, 2016

Phish Music Player

Fun little UI music player experiment!
Made by Matthew Greenberg
November 30, 2016

Music Player UI

HTML, CSS and JavaScript music player UI.
Made by Lars Gerrit Kliesing LGK
November 28, 2016

Music Player

Music player UI in HTML, CSS and JavaScript.
Made by XiChen
November 7, 2016

Minimal Music Player

A nice little music player with ES2015.
Made by Jack Thomson
November 1, 2016

Music Player

HTML, CSS and JavaScript music player.
Made by Jonathan Obino
October 17, 2016

Music Player

Playing around with a music player mockup.
Made by Emil Carlsson
October 12, 2016

Audio Player

This is an audio player built in ES6.
Made by Antonio Lopez Hernandez
October 5, 2016

Music Player UI

Music Player UI with HTML, CSS and JavaScript.
Made by Daniela Andersson Waara
September 2, 2016

Music Player Design

Music player design with HTML, CSS and JavaScript.
Made by Emil Carlsson
September 1, 2016

Music Player

Daily UI challenge with Glenn Miller & Orchestra. Press play.
Made by Andre Wichert
August 27, 2016

Music Card

Music card with HTML, CSS and JavaScript.
Made by Dronca Raul
August 16, 2016

Material Music Player

HTML and CSS material music player.
Made by Roemerdt
August 11, 2016

Skeuomorphic Audio Player

A skeuomorphic audio player made to look like spinning vinyl record. Design made using pure CSS and a single image for the album artwork. Controls done using minimal jQuery.
Made by Josh Bader
August 11, 2016

Music Player UI Design

Music player UI design in HTML and CSS.
Made by Alex Devero
August 6, 2016

Music Player UI

Music Player UI with HTML, CSS and JavaScript.
Made by Josh Mortenson
August 2, 2016

Music APP Concept

Music app concept with HTML, CSS and JavaScript.
Made by Ruslan Pivovarov
July 17, 2016

Music Player

Music player with pre defined play list. Press “play” and see the vinyl animation! Made with js.
Made by Audrey Toulemont
July 10, 2016

Music Player With Hidden Controls

Hover/Click on album cover to show controls.
Made by Dario Fuzinato
June 7, 2016

Music Player Design

Pure CSS music player design.
Made by Woodeer
June 2, 2016

Material Music Player Code

Material music player in HTML, CSS and JavaScript.
Made by Grapes Theme
May 13, 2016

Music Player By Sebastian Beltz

HTML, CSS and JavaScript music player design.
Made by Boylett
April 19, 2016

Music Player UI

Music player UI in HTML, CSS and JavaScript.
Made by Immanuel Pandiangan
April 1, 2016

Scotch Player

HTML and CSS scotch music player.
Made by Chris Nwamba
April 29, 2016

D3.js + React Music Player / Visualizer

Slick music player UI.
Made by Tedd Arcuri
March 25, 2016

Music Player

Web-audio-api based music player app.
Made by Yuma Yanagisawa
March 13, 2016

Simple Responsive Music Player

HTML, CSS and JavaScript simple responsive music player.
Made by Pavel Laptev
March 10, 2016

Music Player UI Design

HTML, CSS and JavaScript music player UI design.
Made by Renan Pupin
March 6, 2016

Visual Music Player

Visual music player - UI experiment/concept.
Made by Miguel
March 2, 2016

Music Player

Created as a minimal soundcloud player. Playing around with canvas to extract cover colors, and creating the background effect, viewport units and the soundcloud API to bring this to live. To Port this into ‘real world’ - be aware that you can’t access the album cover-art cross domain with canvas.
Made by Axel Michel
March 2, 2016

HTML, CSS And JavaScript Music Player

Music player with interface animation.
Made by Nerios Lamaj
February 26, 2016

Music Player - Mobile Interface Carousel

HTML, CSS and JavaScript music player with mobile interface carousel.
Made by Aude
February 11, 2016

Music Player With Social Share

HTML, CSS and JavaScript music player with social share.
Made by Paul Borm
February 2, 2016

Audio Player UI

HTML, CSS, JavaScript Audio Player UI.
Made by Matt Stvartak
January 20, 2016

Music PLayer

A music player with HTML, CSS and JavaScript.
Made by Alex Fernandez
November 28, 2015

Material Music Player

Material music player dashboard.
Made by Dirk-Jan
November 24, 2015

Music Player

Music player with HTML, CSS and JavaScript.
Made by Drew Vosburg
October 29, 2015

Vinyl Music Player

Simple music player concept.
Made by Marc Malignan
October 13, 2015

Flat Music Player

Simple music player.
Made by Grandvincent Marion
October 13, 2015

Audio Player

HTML 5 audio player.
Made by Ozzie Kirkby
July 30, 2015

Better Audio Player

Better audio player with HTML, CSS and JavaScritp.
Made by Bradley Treweek
July 14, 2015

Material Music Player

Material music player is based on HTML5, CSS3 and jQuery.
Made by Mohan Khadka
July 7, 2015

Audio Player

Inspired by 24hoursofhappy.com
Made by Alex Permyakov
April 19, 2015

Music

HTML, CSS and JavaScript music player.
Made by Nick Colley
January 31, 2015

Material Design Music App

Pure CSS material design music app.
Made by Gregor Adams
January 20, 2015

Music Player Concept

HTML, CSS and JavaScript music player concept.
Made by Francesco Trillini
November 12, 2013

Flat Music Widget UI

Flat widget for a music player with HTML and CSS.
Made by Marcelo Aguila
May 27, 2013