Tutorial #41 del curso de Jquery, en este tutorial veremos el widget slider de jquery ui que nos permite crear controles deslizables simples y con rangos.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jquery UI - slider</title>
<link href="jquery-ui/jquery-ui.css" rel="stylesheet">
</head>
<body>
<div id="volumen"></div>
<p id="rangoA"></p>
<p id="rangoB"></p>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#volumen').slider({
range: true,
min: 0,
max: 500,
values: [75,250],
slide: function(event, ui){
$('#rangoA').text(ui.values[0]);
$('#rangoB').text(ui.values[1]);
}
});
});
</script>
</body>
</html>Jquery audio player
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jquery UI - slider Control de volumen</title>
<link href="jquery-ui/jquery-ui.css" rel="stylesheet">
</head>
<body>
<div id="player"></div>
<div id="volume"></div>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#volume").slider({
min: 0,
max: 100,
value: 0,
slide: function(event, ui) {
setVolume(ui.value / 100);
}
});
var myMedia = document.createElement('audio');
$('#player').append(myMedia);
myMedia.id = "myMedia";
playAudio('Carly_Rae_Jepsen', 0);
function playAudio(fileName, myVolume) {
var mediaExt = (myMedia.canPlayType('audio/mp3')) ? '.mp3'
: (myMedia.canPlayType('audio/ogg')) ? '.ogg'
: '';
if (mediaExt) {
myMedia.src = fileName + mediaExt;
myMedia.setAttribute('loop', 'loop');
setVolume(myVolume);
myMedia.play();
}
}
function setVolume(myVolume) {
var myMedia = document.getElementById('myMedia');
myMedia.volume = myVolume;
}
});
</script>
</body>
</html>