60 CSS Music Players

January 31, 2017

Collection of HTML and CSS music players. Demo and download code (*zip).

Demo Image: Music Player Design
Demo Image: Music Player Design

Music Player Design

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

Demo Image: Musical Particles
Demo Image: Musical Particles

Musical Particles

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

Demo Image: Music App - Prac
Demo Image: Music App - Prac

Music App - Prac

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

Demo Image: Reel Player
Demo Image: Reel Player

Reel Player

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

Demo Image: Abbey Music Player
Demo Image: Abbey Music Player

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

Demo Image: Music Player Design
Demo Image: Music Player Design

Music Player Design

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

Demo Image: Music Player Design In CSS
Demo Image: Music Player Design In CSS

Music Player Design In CSS

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

Demo Image: Material Design - Media Player FAB 2016
Demo Image: Material Design - Media Player FAB 2016

Material Design - Media Player FAB 2016

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

Demo Image: Music Player
Demo Image: Music Player

Music Player

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

Demo Image: HTML5 Audio Player w/ Responsive Playlist
Demo Image: HTML5 Audio Player w/ Responsive Playlist

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

Demo Image: Music Player UI
Demo Image: Music Player UI

Music Player UI

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

Demo Image: Mini Music Player
Demo Image: Mini Music Player

Mini Music Player

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

Demo Image: CSS Music Player
Demo Image: CSS Music Player

CSS Music Player

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

Demo Image: Music Player Design
Demo Image: Music Player Design

Music Player Design

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

Demo Image: Phish Music Player
Demo Image: Phish Music Player

Phish Music Player

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

Demo Image: Music Player UI
Demo Image: Music Player UI

Music Player UI

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

Demo Image: Music Player
Demo Image: Music Player

Music Player

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

Demo Image: Minimal Music Player
Demo Image: Minimal Music Player

Minimal Music Player

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

Demo Image: Music Player
Demo Image: Music Player

Music Player

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

Demo Image: Music Player
Demo Image: Music Player

Music Player

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

Demo Image: Audio Player
Demo Image: Audio Player

Audio Player

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

Demo Image: Music Player UI
Demo Image: Music Player UI

Music Player UI

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

Demo Image: Music Player Design
Demo Image: Music Player Design

Music Player Design

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

Demo Image: Music Player
Demo Image: Music Player

Music Player

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

Demo Image: Music Card
Demo Image: Music Card

Music Card

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

Demo Image: Material Music Player
Demo Image: Material Music Player

Material Music Player

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

Demo Image: Skeuomorphic Audio Player
Demo Image: Skeuomorphic Audio Player

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

Demo Image: Music Player UI Design
Demo Image: Music Player UI Design

Music Player UI Design

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

Demo Image: Music Player UI
Demo Image: Music Player UI

Music Player UI

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

Demo Image: Music APP Concept
Demo Image: Music APP Concept

Music APP Concept

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

Demo Image: Music Player
Demo Image: Music Player

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

Demo Image: Music Player With Hidden Controls
Demo Image: Music Player With Hidden Controls

Music Player With Hidden Controls

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

Demo Image: Music Player Design
Demo Image: Music Player Design

Music Player Design

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

Demo Image: Material Music Player Code
Demo Image: Material Music Player Code

Material Music Player Code

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

Demo Image: Music Player By Sebastian Beltz
Demo Image: Music Player By Sebastian Beltz

Music Player By Sebastian Beltz

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

Demo Image: Music Player UI
Demo Image: Music Player UI

Music Player UI

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

Demo Image: Scotch Player
Demo Image: Scotch Player

Scotch Player

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

Demo Image: D3.js + React Music Player / Visualizer
Demo Image: D3.js + React Music Player / Visualizer

D3.js + React Music Player / Visualizer

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

Demo Image: Music Player
Demo Image: Music Player

Music Player

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

Demo Image: Simple Responsive Music Player
Demo Image: Simple Responsive Music Player

Simple Responsive Music Player

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

Demo Image: Music Player UI Design
Demo Image: Music Player UI Design

Music Player UI Design

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

Demo Image: Visual Music Player
Demo Image: Visual Music Player

Visual Music Player

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

Demo Image: Music Player
Demo Image: Music Player

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

Demo Image: HTML, CSS And JavaScript Music Player
Demo Image: HTML, CSS And JavaScript Music Player

HTML, CSS And JavaScript Music Player

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

Demo Image: Music Player - Mobile Interface Carousel
Demo Image: Music Player - Mobile Interface Carousel

Music Player - Mobile Interface Carousel

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

Demo Image: Music Player With Social Share
Demo Image: Music Player With Social Share

Music Player With Social Share

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

Demo Image: Audio Player UI
Demo Image: Audio Player UI

Audio Player UI

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

Demo Image: Music PLayer
Demo Image: Music PLayer

Music PLayer

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

Demo Image: Material Music Player
Demo Image: Material Music Player

Material Music Player

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

Demo Image: Music Player
Demo Image: Music Player

Music Player

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

Demo Image: Vinyl Music Player
Demo Image: Vinyl Music Player

Vinyl Music Player

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

Demo Image: Flat Music Player
Demo Image: Flat Music Player

Flat Music Player

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

Demo Image: Audio Player
Demo Image: Audio Player

Audio Player

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

Demo Image: Better Audio Player
Demo Image: Better Audio Player

Better Audio Player

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

Demo Image: Material Music Player
Demo Image: Material Music Player

Material Music Player

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

Demo Image: Audio Player
Demo Image: Audio Player

Audio Player

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

Demo Image: Music
Demo Image: Music

Music

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

Demo Image: Material Design Music App
Demo Image: Material Design Music App

Material Design Music App

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

Demo Image: Music Player Concept
Demo Image: Music Player Concept

Music Player Concept

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

Demo Image: Flat Music Widget UI
Demo Image: Flat Music Widget UI

Flat Music Widget UI

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

FreeFrontend © 2016 - 2017