35+ JavaScript Music Players - Free Code + Demos
Collection of 35+ JavaScript Music Players. All items are 100% free and open-source.
1. Music Player App
Author: Rafaela Lucas (rafaelavlucas)
Links: Source Code / Demo
Created on: December 26, 2019
Made with: HTML, SCSS, JS
Tags: music-player, music stream, player songs, daily ui, daily ui challenge
2. HTML Audio Player
HTML Audio Player
Author: Zakari Abdessamad (vanderzak)
Links: Source Code / Demo
Created on: December 9, 2019
Made with: HTML, CSS, JS
Tags: html, javascript, player, audio
3. Music Player
Professional Music Player
Author: hossein_ghanbari (hossein_mhg)
Links: Source Code / Demo
Created on: November 8, 2019
Made with: HTML, SCSS, JS
Tags: music, music_player, player, audio
4. Media Player Widget With Gooey Interactions
A GSAP-powered media player widget., using SVG filters to make the little goo drop gooey enough!
Author: Jake Whiteley (jakewhiteleydev)
Links: Source Code / Demo, Dribbble Shot
Created on: August 2, 2019
Made with: HTML, SCSS, JS
Tags: gsap, gooey, ui, svg-filter, micro interaction
5. Podcast Player
Author: Ivor Padilla (ivorpad)
Links: Source Code / Demo
Created on: June 24, 2019
Made with: HTML, SCSS, JS
6. React.js Music Player
Professional Music Player
Author: hossein_ghanbari (hossein_mhg)
Links: Source Code / Demo
Created on: November 8, 2019
Made with: HTML, SCSS, JS
Tags: music, music_player, player, audio
7. Card Music Player
An excuse to try CSS Grid, CSS Variables and throw in a marquee tag. No edge. Design inspired by https://dribbble.com/shots/4290719-Player
Author: Mike Quinn (mprquinn)
Links: Source Code / Demo, Dribbble Shot
Created on: June 8, 2018
Made with: HTML, SCSS, Babel
Tags: codepenchallenge, cpc-cards
8. JQuery Music Player
Author: Yuki (snowleo208)
Links: Source Code / Demo
Created on: September 18, 2018
Made with: HTML, Sass, Babel
Tags: audio, html5, javascript, music-player
9. Green-audio-player
Audio Player javascript library
Author: Greg Hovanesyan (greghub)
Links: Source Code / Demo, Github Page
Created on: January 24, 2019
Made with: HTML, SCSS, Babel
Tags: js, audio, ui, player
10. #Codevember 10 - Musical Particles
"Without music, life would be a mistake." ~ F. Nietzsche
Author: Sean Free (seanfree)
Links: Source Code / Demo
Created on: November 10, 2016
Made with: Pug, Sass, Babel
CSS Pre-processor: Sass
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: codevember, javascript, music, visualizer, canvas
11. Music APP Concept
Author: Ruslan Pivovarov (mrspok407)
Links: Source Code / Demo, Dribbble Shot
Created on: July 17, 2016
Made with: HTML, SCSS, Babel
Tags: animation, timing
12. Music Player Made With JQuery
Author: Shayan (shayanea)
Links: Source Code / Demo, Www.instagram.com
Created on: February 19, 2018
Made with: HTML, SCSS, JS
13. Interface Animation - Music Player
Author: Nerios Lamaj (nerios)
Links: Source Code / Demo, Dribbble Shot
Created on: February 24, 2016
Made with: HTML, CSS, JS
Tags: music-player, audio, animation, ui, css
14. Music Player With Hidden Controls
Hover/Click on album cover to show controls. Homage to Berry Weight http://digital.berryweight.com/ . Music via Soundcloud.
Author: Dario Fuzinato (fuzinato)
Created on: December 16, 2015
Made with: HTML, SCSS, JS
Tags: music, album, soundcloud, animation, 3d
15. 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.
Author: Josh Bader (joshbader)
Links: Source Code / Demo
Created on: August 3, 2016
Made with: HTML, CSS, JS
Tags: music-player, audio-player, skeuomorphic, vinyl record, css-design
16. Better Audio Player
Author: Bradley Treweek (cmd430)
Links: Source Code / Demo
Created on: March 12, 2015
Made with: HTML, CSS, JS
Tags: audio, player
17. Custom Audio Player
Author: EmNudge (EmNudge)
Links: Source Code / Demo
Created on: March 25, 2019
Made with: HTML, SCSS, JS
18. Audio Player
HTML 5 Audio Player. Pen number five of my 21 Weeks of Codepen Challenge. For some reason this demo is only working with Chrome, no clue why though :(. Song.
Author: Ozzie Kirkby (ozzie)
Links: Source Code / Demo
Created on: March 9, 2015
Made with: HTML, SCSS, JS
Tags: html-5, music-player, audio
19. 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 (craigstroman)
Links: Source Code / Demo
Created on: June 16, 2015
Made with: HTML, SCSS, JS
Tags: html5-audio, font-awesome, css, html5
20. Music Player
Author: Vijit Ail (Vijit_Ail)
Links: Source Code / Demo
Created on: November 25, 2017
Made with: HTML, CSS, JS
21. Music Player
Front-End Mockup Practice.
Author: Charlie Yang (mrtial)
Links: Source Code / Demo
Created on: June 15, 2016
Made with: HTML, CSS, JS
22. Audio Player Prototype
Author: Timi Lähteenmäki (tlahteenmaki)
Links: Source Code / Demo
Created on: July 9, 2015
Made with: HTML, SCSS, JS
Tags: devwarsweek1
23. Chromatica Player
A simple music player that plays the album Chromatica by Lady Gaga! You may have to click the controls twice for them to work, I've been having some technical difficulties lately 😊
Author: Jason (potterpiggy)
Links: Source Code / Demo
Created on: July 31, 2020
Made with: HTML, CSS, JS
Tags: music, player, chromatica, musicplayer
24. Music Player
The Music Player that contained three music in it. DESIGNED BY DIEGO VALBUENA AND MADE BY TIN FUNG.
Author: Tin Fung, Chan (tin-fung-hk)
Links: Source Code / Demo
Created on: July 28, 2020
Made with: HTML, CSS, JS
Tags: music, player, ui, card
25. Music Player
Author: Abbas Khalaji (abbaskhalaji)
Links: Source Code / Demo
Created on: June 29, 2020
Made with: HTML, CSS, JS
Tags: music, player
26. Spotify Music Player
An example of how to create a Spotify-ish music player with a looottt of flexbox ;) Go ahead and try to play the song!
Author: Anonymous (Fibonaccifreak)
Links: Source Code / Demo
Created on: June 17, 2020
Made with: HTML, CSS, JS
Tags: spotify, music-player, widget, player, music
27. Music App Interaction GSAP
Author: Shahid Shaikh (shahidshaikhs)
Links: Source Code / Demo
Created on: June 10, 2020
Made with: HTML, CSS, JS
Tags: gsap, music, transition, animation, player
28. Audio Player In Vanilla JS With State Machine (Xstate)
A podcast player, built with xstate, plain element and the events that the audio element fires, like seeking and timeupdate. The progress is built with an and a underneath it.
Author: Bart Veneman (bartveneman)
Links: Source Code / Demo
Created on: June 5, 2020
Made with: Pug, Stylus, JS
CSS Pre-processor: Stylus
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: podcast, audio, xstate, player
29. Music Player
Simple music player in vanilla Javascript.
Author: rogerio-romao (rogerio-romao)
Links: Source Code / Demo
Created on: May 19, 2020
Made with: HTML, CSS, JS
Tags: music, player, vanilla, javascript
30. Music Player Pure[HTML5/CSS/Javascript]
Author: Rajan Lad (RajanLad)
Links: Source Code / Demo
Created on: April 29, 2020
Made with: HTML, CSS, JS
Tags: music, player, controls, javascript, css
More Awesome Lists:
Share: