30+ Beautiful jQuery Music Players (Free Code + Demos)
Enjoy this 100% free and open source collection of jQuery music player code examples. These jQuery music players are simple to integrate into your own project.
1. Mini Music Player
Author: Amit Soni (amit7soni)
Links: Source Code / Demo, Dribbble Shot
Created on: September 6, 2016
Made with: HTML, CSS, JS
Tags: music-player, ui, mp3-player, ux
2. 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
3. Dark JQuery Music Player
Day 005 of Paul Flavius Nechita 100 Days of UI challenge. 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 t...Read More
Author: Axel Michel (webandapp)
Links: Source Code / Demo, Dribbble Shot
Created on: March 2, 2016
Made with: HTML, SCSS, JS
Tags: soundcloud, canvas.
4. JQuery Music Player | Audio Player 🎵
Simple Beautiful Fully Functional Music | Audio Player. Design inspired by: https://dribbble.com/shots/4240318-Made-with-InVision-Studio-Music-Player
Author: Himalaya Singh (himalayasingh)
Links: Source Code / Demo, Dribbble Shot
Created on: October 6, 2018
Made with: HTML, CSS, JS
Tags: music-player, audio-player, player, stream, music
5. Music Player With Lyrics Synchronization
This is a music player, with linear side translating playlist menu with active search and repeat options and then its syncs with the lyrics according to the data on my github profile. If you want to help me grow, follow me and share some ideas about what to develop next. Thanks. Happy Dev...Read More
Author: Jyotirmoy Barman (jewel998)
Links: Source Code / Demo
Created on: November 18, 2019
Made with: HTML, CSS, JS
Tags: music-player, lyrics, custom-slider, slider, playlist
6. Lyrics Player
I wanted to make a POC for a lyric viewer, so I did. Input is manual, but it's basically capturing the timestamp in which the lyric should be shown - which if I were to turn this into a product I would be bothered to do.
Author: Zed Dash (z-)
Links: Source Code / Demo
Created on: March 3, 2018
Made with: HTML, SCSS, JS
Tags: jquery, music, lyrics, poc, widgit
7. 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
8. 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
9. Music App - TweenMax
Author: Jinn Wang (jinnrw)
Links: Source Code / Demo
Created on: January 6, 2017
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
10. 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
11. Anomaly
Author: Dronca Raul (rauldronca)
Links: Source Code / Demo
Created on: August 3, 2016
Made with: HTML, CSS, JS
12. 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
13. Music Player And Social Share JQuery
Author: Paul Borm (paulborm)
Links: Source Code / Demo
Created on: February 2, 2016
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: dailyui, animation, social-share, music-player, button
14. Music Player UI Design
Author: Alex Devero (alexdevero)
Links: Source Code / Demo
Created on: July 30, 2016
Made with: HTML, SCSS
Tags: player, ui, design, devero, material
15. Music Player
Author: Qing Li (qingliwebsite)
Links: Source Code / Demo, Dribbble Shot
Created on: May 19, 2017
Made with: HTML, CSS, JS
16. Interactive Blue Music Player
Author: Andre Wichert (andrewichert)
Links: Source Code / Demo
Created on: August 19, 2016
Made with: HTML, SCSS, JS
Tags: music, player, miller, wave, dailyui
17. Music Player
Playing around with a music player mockup. This is a work in progress.
Author: Emil (emilcarlsson)
Links: Source Code / Demo
Created on: July 4, 2015
Made with: HTML, CSS, JS
Tags: music-player, ui, music, music app
18. Music Player
A HTML5 & ES6 media player for a list of audio files. Served from a list of self created data objects. Would like to update to utilize an API for the data, if taking this further. Oh, and it has hotkeys. a - previous d / n - next s / p - play / pause e / r - repeat q - shuffle
Author: Holly Springsteen (hollyos)
Links: Source Code / Demo
Created on: May 31, 2017
Made with: HTML, SCSS, JS
Tags: audio, javascript, media, oop
19. Yet Another Html5 Music Player
Author: kyicy (kyicy)
Links: Source Code / Demo
Created on: March 12, 2018
Made with: HTML, CSS, JS
20. Music Player
Forked from Mustafa ismail 's Pen Music Player.
Author: Tuan Ticker (tuanticker)
Links: Source Code / Demo
Created on: March 5, 2015
Made with: HTML, CSS, JS
Tags: jplayer, player, music, ui, audio
21. Movie App Ui
Project for MovieWP wordpress theme
Author: Vincenzo Piromalli (vincenzopiromalli)
Links: Source Code / Demo
Made with: HTML, CSS, JS
22. CSS & JQuery Powered Music Player - Under Construction
I saw another pen where someone had taken a mockup and designed it out in HTML & CSS, so I thought I'd try the same. It's not 100% exact, but not too shabby for my first try. The functionality I'm still working on; after I get it "working", I want to try to optimize my scripting as much a...Read More
Author: Camden Jaxx (camden-jaxx)
Links: Source Code / Demo
Created on: July 7, 2020
Made with: HTML, CSS, JS
Tags: music, player, audio, mockup, dribbble
23. Music Player Neumorphism
Reproductor de Música Estilo Nomorfismo
Author: Lupita (lupitacoding)
Links: Source Code / Demo
Created on: June 27, 2020
Made with: HTML, CSS, JS
Tags: neumorphism, music-player, music, player, reproductor-musica
24. Custom Audio Player - TinyPlayer
Author: Stake (P42s2)
Links: Source Code / Demo
Created on: June 6, 2020
Made with: HTML, CSS, JS
Tags: custom, audio, player, tinyplayer
25. Video Card - Animated Player
Author: Gabriel Toledo (gatoledo1)
Links: Source Code / Demo
Created on: May 10, 2020
Made with: HTML, Sass, JS
Tags: video card, player, animated player, earth, video-player
More Awesome Lists:
Share: