Music

Developer
Nick Colley
Size
4,521 Kb
Views
28,336
  1. Music Previews
  2. Music HTML Codes
  3. Music CSS Codes
  4. Music JS Codes

How do I make an music?

Some of the stuff on dribbble is really inspiring I tried my hand at this design by Rovane Durso and added some html5 audio magic. What is a music? How do you make a music? This script and codes were developed by Nick Colley on 12 November 2022, Saturday.

Music Previews
IQ Test

Music - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Music</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { box-sizing: border-box; transition: background 1s ease-in;
}
iframe { display: none; }
body{ background: #d2d5d6; font-family: 'Sintony', sans-serif; font-size: 16px;
}
.player { overflow: hidden; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 250px; width: 220px; background: #edf0f2; border-radius: 10px; box-shadow: 0 8px 10px 2px rgba(0,0,0,.1), 0 30px 15px -5px rgba(0,0,0,.05);
}
.art { overflow: hidden; height: 32%; width: 100%; background: #DDD; background-image: url(''); background-size: cover; background-position: center;
}
.info { height: 20%; margin-top: 15%; padding: 0 10%;
}
.info .title { height: 50%; width: 100%; font-size: 0.9em; color: #48586b; text-shadow: 0 1px #EFEFEF;
}
.info .song { height: 50%; display: block; font-size: 0.6em; color: #6a7888;
}
.info .progress { user-select: none; cursor: pointer; clear: both; overflow: hidden; position: relative; top: 18px; height: 4px; width: 100%; background: #333; border-radius: 3px; box-shadow: 0 -1px 0 1px #DFDFDF;
}
.progress .progress-bar { height: 100%; width: 0%; background: #cdd2d7; border-radius: 5px;
}
.controls { position: relative; margin: 18% 0 6.5% 0; padding: 0 10%;
}
.controls button { cursor: pointer; position: absolute; height: 27px; width: 27px; border: none; text-align: center; background: #414141; color: #d9d9d9; border-radius: 50%; font-size: 0.8em; transition: .1s; line-height: 1em;
}
.controls button:hover { opacity: 0.95;
}
.controls button:active{ opacity: 0.5;
}
.controls .play { height: 37px; width: 37px; font-size: 1.2em; line-height: 35px;
}
.controls .backward, .controls .forward { top: .7em; font-size: .5em; letter-spacing: .4em; line-height: .7em;
}
.controls .backward { left: 28%;
}
.controls .forward { left: 42%; letter-spacing: .3em; text-align: right;
}
.controls .settings { cursor: pointer; color: #CCC; float: right; margin-top: 5%;
}
.controls .settings:hover { color: #AAA; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <html lang="en">
<head> <meta charset="UTF-8"/>
<link href='https://fonts.googleapis.com/css?family=Sintony:400' rel='stylesheet' type='text/css'> <script src='//w.soundcloud.com/player/api.js'></script>
</head>
<body>	<div class='player'> <div class='art'></div> <div class='info'> <div class='title'></div> <div class='song'></div> <div class='progress'> <div class='progress-bar'></div> </div> </div> <div class='controls'> <button class='play glyphicon glyphicon-play'></button> <button class='backward glyphicon glyphicon glyphicon-backward'></button> <button class='forward glyphicon glyphicon-forward'></button> <div class="settings glyphicon glyphicon-cog"></div> </div>	</div> <iframe class="sc-widget" src="//w.soundcloud.com/player/?url=//soundcloud.com/caribouband"></iframe>
</body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Music - Script Codes CSS Codes

* { box-sizing: border-box; transition: background 1s ease-in;
}
iframe { display: none; }
body{ background: #d2d5d6; font-family: 'Sintony', sans-serif; font-size: 16px;
}
.player { overflow: hidden; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 250px; width: 220px; background: #edf0f2; border-radius: 10px; box-shadow: 0 8px 10px 2px rgba(0,0,0,.1), 0 30px 15px -5px rgba(0,0,0,.05);
}
.art { overflow: hidden; height: 32%; width: 100%; background: #DDD; background-image: url(''); background-size: cover; background-position: center;
}
.info { height: 20%; margin-top: 15%; padding: 0 10%;
}
.info .title { height: 50%; width: 100%; font-size: 0.9em; color: #48586b; text-shadow: 0 1px #EFEFEF;
}
.info .song { height: 50%; display: block; font-size: 0.6em; color: #6a7888;
}
.info .progress { user-select: none; cursor: pointer; clear: both; overflow: hidden; position: relative; top: 18px; height: 4px; width: 100%; background: #333; border-radius: 3px; box-shadow: 0 -1px 0 1px #DFDFDF;
}
.progress .progress-bar { height: 100%; width: 0%; background: #cdd2d7; border-radius: 5px;
}
.controls { position: relative; margin: 18% 0 6.5% 0; padding: 0 10%;
}
.controls button { cursor: pointer; position: absolute; height: 27px; width: 27px; border: none; text-align: center; background: #414141; color: #d9d9d9; border-radius: 50%; font-size: 0.8em; transition: .1s; line-height: 1em;
}
.controls button:hover { opacity: 0.95;
}
.controls button:active{ opacity: 0.5;
}
.controls .play { height: 37px; width: 37px; font-size: 1.2em; line-height: 35px;
}
.controls .backward, .controls .forward { top: .7em; font-size: .5em; letter-spacing: .4em; line-height: .7em;
}
.controls .backward { left: 28%;
}
.controls .forward { left: 42%; letter-spacing: .3em; text-align: right;
}
.controls .settings { cursor: pointer; color: #CCC; float: right; margin-top: 5%;
}
.controls .settings:hover { color: #AAA; }

Music - Script Codes JS Codes

console.clear();
$(document).ready(function(){ var player = SC.Widget($('iframe.sc-widget')[0]);	var pOffset = $('.progress').offset(); //Zero the progress bar var pWidth = $('.progress').width();	var scrub; player.bind(SC.Widget.Events.READY, function(eventData) { setInfo();	}); //Set info on load player.bind(SC.Widget.Events.PLAY_PROGRESS, function(e) { if( e.relativePosition < 0.003 ) { setInfo(); } //Event listener when track is playing $('.progress-bar').css('width', ( e.relativePosition*100)+"%"); if( !$(".play").hasClass('glyphicon-pause') ) { $(".play") .removeClass('glyphicon-play') .addClass('glyphicon-pause'); } }); player.bind(SC.Widget.Events.PAUSE, function(e) { //Event listener when track is paused setInfo(); $(".play") .addClass('glyphicon-play') .removeClass('glyphicon-pause'); }); $('.progress').mousemove(function(e){ //Get position of mouse for scrubbing scrub = (e.pageX-pOffset.left); }); $('.progress').click(function(){ //Use the position to seek when clicked $('.progress-bar').css('width',scrub+"px"); var seek = player.duration*(scrub/pWidth); player.seekTo(seek); }); //Buttons $('.play').click(function(){ player.toggle(); }); $('.backward').click(function(){ player.prev(); }); $('.forward').click(function(){ player.next(); }); function setInfo() { player.getCurrentSound(function(song) { if(!song) { $('.art').css('background-image', ''); $('.title').html(''); $('.song').html('No artist found :('); return; } $('.art').css('background-image', "url('" + song.artwork_url.replace('-large', '-t500x500') + "')"); $('.title').html(song.user.username); $('.song').html(song.title); player.current = song; }); player.getDuration(function(value){ player.duration = value; }); player.isPaused(function(bool){ player.getPaused = bool; }); } $('.settings').click(function(){ var url = prompt('Enter Soundcloud Url','https://soundcloud.com/'); if (url) { player.pause(); var option = { callback: function(){ setInfo(); } } player.load(url , option); } });
});
Music - Script Codes
Music - Script Codes
Home Page Home
Developer Nick Colley
Username nickcolley
Uploaded November 12, 2022
Rating 4
Size 4,521 Kb
Views 28,336
Do you need developer help for Music?

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!

Nick Colley (nickcolley) Script Codes
Name
One element icon
Banner hover test
Wip elementary os navbar
Erno
Custom Soundcloud Player
Linux Install Terminal
Subtle Quote
Subtle Animation Example
Raincoat PC
Centered Text in a Perfect Circle
Create amazing blog posts 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!