Music Player

Developer
Derek Wheelden
Size
4,261 Kb
Views
28,336
  1. Music Player Previews
  2. Music Player HTML Codes
  3. Music Player CSS Codes

How do I make an music player?

Based on a music player designed by Forrster @LukeEtheridge. Just wanted to do some UI stuff, I'll probably keep tweaking this for a while. Original is here: https://forrst.com/posts/Music_Players-FSf. What is a music player? How do you make a music player? This script and codes were developed by Derek Wheelden on 10 August 2022, Wednesday.

Music Player Previews
IQ Test

Music Player - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Music Player</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
<h1> <a href="https://forrst.com/people/LukeEtheridge" target="_blank">@LukeEtheridge</a>'s Music Player <small>via Forrst</small>
</h1>
<div class="player"> <div class="player-artist"> <img src="http://userserve-ak.last.fm/serve/_/82969801/The+DOT+1.jpg" /> <p>The D.O.T. - Colours That Don't Exist</p> </div> <div class="player-controls"> <a href="#"><i class="icon-volume-up"></i></a> <a href="#"><i class="icon-fast-backward"></i></a> <a href="#"><i class="icon-play play"></i></a> <a href="#"><i class="icon-fast-forward"></i></a> <a href="#"><i class="icon-resize-full"></i></a> </div> <div class="player-tracking"> <span class="player-tracking-start">02:12</span> <span class="player-tracking-bar"></span> <span class="player-tracking-start">05:43</span> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Music Player - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Lato:100,400);
.player { width: 320px; margin: 3% auto; background: #fafafa; -moz-box-shadow: rgba(26, 77, 63, 0.4) 0 0 20px 0; -webkit-box-shadow: rgba(26, 77, 63, 0.4) 0 0 20px 0; box-shadow: rgba(26, 77, 63, 0.4) 0 0 20px 0; cursor: default;
}
.player .player-artist { position: relative; height: 160px; overflow: hidden;
}
.player .player-artist img { width: 100%; margin: -25px 0 0;
}
.player .player-artist p { position: absolute; bottom: 0; left: 0; width: 100%; margin: 0; padding: 10px; background: rgba(0, 0, 0, 0.7); color: #fff;
}
.player .player-controls { padding: 5px 0; overflow: hidden; *zoom: 1;
}
.player .player-controls a { display: block; width: 50px; height: 40px; font-size: 15px; line-height: 40px; text-align: center; color: #bbb; text-decoration: none; float: left;
}
.player .player-controls a.play { font-size: 20px; color: #999;
}
.player .player-controls a:first-child { border-right: 1px solid #ddd; margin-right: 34px;
}
.player .player-controls a:last-child { border-left: 1px solid #ddd; margin-left: 34px;
}
.player .player-controls a:hover { color: #444;
}
.player .player-controls a:active { color: #85c2e0;
}
.player .player-tracking { padding: 10px; background: #e6e6e6; color: #888;
}
.player .player-tracking span { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; position: relative; padding: 0 5px;
}
.player .player-tracking .player-tracking-bar { position: relative; top: 1px; width: 212px; height: 6px; border-radius: 3px; background: #cccccc; -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 0 3px 1px inset; -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 0 3px 1px inset; box-shadow: rgba(0, 0, 0, 0.1) 0 0 3px 1px inset;
}
.player .player-tracking .player-tracking-bar:before { display: none; content: '02:12'; position: absolute; top: 10px; left: 78px; padding: 4px 8px; background: #fff; font-size: 10px; color: #aaa; -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 0 3px 1px; -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 0 3px 1px; box-shadow: rgba(0, 0, 0, 0.1) 0 0 3px 1px;
}
.player .player-tracking .player-tracking-bar:after { display: block; content: ' '; position: absolute; top: 0px; left: 0; width: 100px; height: 6px; border-radius: 3px; background: #85c2e0;
}
.player .player-tracking .player-tracking-bar:hover { cursor: pointer;
}
.player .player-tracking .player-tracking-bar:hover:before { display: block;
}
html { height: 100%; font: 11px 'Lato', sans-serif; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc5ZGNjMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NlZTNjZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #79dcc2), color-stop(100%, #cee3ce)); background-image: -moz-linear-gradient(#79dcc2, #cee3ce); background-image: -webkit-linear-gradient(#79dcc2, #cee3ce); background-image: linear-gradient(#79dcc2, #cee3ce);
}
h1 { text-align: center; color: #4d4d4d;
}
h1 small { color: rgba(0, 0, 0, 0.3);
}
h1 a { color: #26735e; text-decoration: none;
}
h1 a:hover { text-decoration: underline;
}
Music Player - Script Codes
Music Player - Script Codes
Home Page Home
Developer Derek Wheelden
Username frxnz
Uploaded August 10, 2022
Rating 3.5
Size 4,261 Kb
Views 28,336
Do you need developer help for Music Player?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Derek Wheelden (frxnz) Script Codes
Name
Fantastic Mr. Fox
User Listing
Circular Reveal
A Pen by Derek Wheelden
Instagram Hover
Google Maps Geolocation Test
File Browser Mockup
Off-Screen Mobile Nav
Bouncing Border
Dumb Triangle Thing
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!