Dengan menggabungkan tag audio dan slider jQuery UI kita dapat membuat script untuk mengatur volume suara dari lagu atau suara yang lain.
Pertama-tama kita akan mendefinisikan audionya:
<audio id=”lagu” controls=”controls”>
<source src=”http://upload.wikimedia.org/wikipedia/en/4/41/Joy_to_the_World.ogg” type=”audio/ogg” />
</audio>
Kemudian dilanjutkan dengan div untuk slidernya :
<div id=”volumeku”>
</div><!–end of volumeku–>
Kemudian include untuk file-file yang diperlukan:
<script src=”development-bundle/jquery-1.6.2.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.core.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.widget.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.mouse.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.slider.js”>
</script>
Dan terakhir adalah menghubungkan slider dengan audionya:
<script>
(function($){
var lagu=$(“#lagu”)[0];
var pilihan = {
value: 5,
min: 0,
max: 10,
orientation: “vertical”,
change: function() {
var new_volume=$(this).slider(“value”)/10;
lagu.volume=new_volume;
}
};
lagu.volume = 0.5;
lagu.play();
$(“#volumeku”).slider(pilihan);
})(jQuery);
</script>
Coding secara lengkapnya adalah :
<!DOCTYPE html>
<html>
<head>
<title>Slider Audio</title>
<link rel=”stylesheet” href=”css/smoothness/jquery-ui-1.8.16.custom.css”>
</head>
<body>
<audio id=”lagu” controls=”controls”>
<source src=”http://upload.wikimedia.org/wikipedia/en/4/41/Joy_to_the_World.ogg” type=”audio/ogg” />
</audio>
<div id=”volumeku”>
</div><!–end of volumeku–>
<script src=”development-bundle/jquery-1.6.2.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.core.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.widget.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.mouse.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.slider.js”>
</script>
<script>
(function($){
var lagu=$(“#lagu”)[0];
var pilihan = {
value: 5,
min: 0,
max: 10,
orientation: “vertical”,
change: function() {
var new_volume=$(this).slider(“value”)/10;
lagu.volume=new_volume;
}
};
lagu.volume = 0.5;
lagu.play();
$(“#volumeku”).slider(pilihan);
})(jQuery);
</script>
</body>
</html>
Demo dapat dicoba di http://aris.proweb.asia/slider_audio.html dan hasilnya seperti gambar berikut ini:
Kunjungi www.proweb.co.id untuk menambah wawasan anda.