volume slider html
<html>
<body>
<h1>Volume slider</h1>
<div id="player">
<i class="fa fa-volume-down"></i>
<div id="volume"></div>
<i class="fa fa-volume-up"></i>
</div>
<style>
@import url(https://fonts.googleapis.com/css?family=Raleway:500);
$primary-color: #2ecc71;
body {
background: #2a2a2a;
font-family: Raleway;
}
h1 {
text-align: center;
font-size: 34px;
padding-top: 40px;
color: #FFF;
}
p {
color: #999;
text-align: center;
font-size: 15px;
a {
color: $primary-color;
text-decoration: none;
padding: 1px 2px 0px 2px;
border-bottom: 2px solid rgba(0, 0, 0, .0);
transition: all .1s ease;
&:hover {
padding: 1px 2px 1px 2px;
border-bottom: 2px solid #555;
}
}
}
#player {
width: 350px;
height: 50px;
position: relative;
margin: 0 auto;
top: 80px;
i {
position: absolute;
margin-top: -6px;
color: #666;
}
i.fa-volume-down {
margin-left: -8px;
}
i.fa-volume-up {
margin-right: -8px;
right: 0;
}
}
#volume {
position: absolute;
left: 24px;
margin: 0 auto;
height: 5px;
width: 300px;
background: #555;
border-radius: 15px;
.ui-slider-range-min {
height: 5px;
width: 300px;
position: absolute;
background: $primary-color;
border: none;
border-radius: 10px;
outline: none;
}
.ui-slider-handle {
width: 20px;
height: 20px;
border-radius: 20px;
background: #FFF;
position: absolute;
margin-left: -8px;
margin-top: -8px;
cursor: pointer;
outline: none;
}
}
</style>
<script>
$("#volume").slider({
min: 0,
max: 100,
value: 0,
range: "min",
slide: function(event, ui) {
setVolume(ui.value / 100);
}
});
var myMedia = document.createElement('audio');
$('#player').append(myMedia);
myMedia.id = "myMedia";
playAudio('http://emilcarlsson.se/assets/Avicii%20-%20The%20Nights.mp3', 0);
function playAudio(fileName, myVolume) {
myMedia.src = fileName;
myMedia.setAttribute('loop', 'loop');
setVolume(myVolume);
myMedia.play();
}
function setVolume(myVolume) {
var myMedia = document.getElementById('myMedia');
myMedia.volume = myVolume;
}
</script>
</body>
</html>