Как привязать ползунок громкости к плееру?
 

На сайте 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>