На сайте
http://radio2.msys.by/ есть кнопка play/pause. Хочу сделать так, чтобы пользователи ещё могли и регулировать громкость на сайте.
Нашел скрипт ползунка громкости. Визуально всё хорошо, но громкость он так и не регулирует
.
Я так понимаю, его нужно привязать к нашему плееру. Но как это сделать?
Собственно код плеера примерно следующий:
<button class="m_pleer" id="mybtn" type="button" style="background-color: none;"> </button>
<audio id="myaudio">
<source src="http://10.128.3.14:8000/m_radio" type="audio/mp3" controls="controls" />
</audio>
<script>
/*Вешаем обработчик события на кнопку с идентификатором mybtn. Скрипт обязательно должен стоять
после кнопки, т.к. скрипты выполняются сразу при своей загрузке, и если он выполнится раньше
загрузки кнопки - он просто ее не увидит.*/
document.getElementById("mybtn").onclick = function()
{
var myaudio = document.getElementById("myaudio");
if(myaudio.paused == true)
{
document.getElementById("myaudio").play();
this.style.background = "url(/wp-content/themes/generatepress/images/1pa.png) no-repeat center"; //Цвет кнопки можно изменить напрямую, без всяких картинок.
this.style.boxShadow = "0px 1px 3px #B2B2B2"; //Заодно меняем цвет текста для удобичитаемости
//this здесь является самой кнопкой, так как функция является дочерней кнопке
}
else if (myaudio.paused == false)
{
document.getElementById("myaudio").pause();
this.style.background = "url(/wp-content/themes/generatepress/images/2pl.png) no-repeat center";
this.style.boxShadow = "0px 3px 3px #404040";
}
}
</script>
А код ползунка громкости такой:
<section>
<span class="tooltip"></span> <!-- Подсказка -->
<div id="slider"></div> <!-- Слайдер -->
<span class="volume"></span> <!-- Индикатор уровня -->
</section>
<script src="airtime/volume/js/jquery-1.7.2.min.js"></script>
<script src="airtime/volume/js/jquery-ui-1.8.21.custom.min.js"></script>
<script>
$(function() {
//Сохраняем нужные элементы в перменных
var slider = $('#slider'),
tooltip = $('.tooltip');
//Скрываем подсказку в начале
tooltip.hide();
//Вызываем слайдер
slider.slider({
//Конфигурация
range: "min",
min: 1,
value: 35,
start: function(event,ui) {
tooltip.fadeIn('fast');
},
//Событие слайдреа
slide: function(event, ui) { //При пермещении слайдера
var value = slider.slider('value'),
volume = $('.volume');
tooltip.css('left', value).text(ui.value); //Выравниваем подсказку соответственно
if(value <= 5) {
volume.css('background-position', '0 0');
}
else if (value <= 25) {
volume.css('background-position', '0 -25px');
}
else if (value <= 75) {
volume.css('background-position', '0 -50px');
}
else {
volume.css('background-position', '0 -75px');
};
},
stop: function(event,ui) {
tooltip.fadeOut('fast');
},
});
});
</script>
