Механизм беспрерывного воспроизведения музыки на сайте

Для сайта одного из наших клиентов стояла задача реализовать механизм беспрерывного воспроизведения музыки при переходе по страницам. Для этого было принято решение сделать работу сайта посредством технологии ajax. В качестве плеера выбрали jplayer плеер работающий на jQuery.

Так же нам потребуется плагин jQueryCookie для того чтобы при последующем заходе на сайт запоминались настройки воспроизведения. Перейдем от слов к практике.

Для начала в шапке сайта нам необходимо инициализировать скрипты плагинов.

<script type="text/javascript" src="/bitrix/templates/.default/js/jquery.cookie.js"></script>
<script type="text/javascript" src="/bitrix/templates/.default/js/jquery.jplayer.2.1.0/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="/bitrix/templates/.default/js/jquery.cookie.js"></script>

Разметку в верстке производим, btnPlay - кнопка Play, btnPause - кнопка Пауза и jplayer - сам плеер.

<span id="btnPlay" class="icon9px play-btn" >Play</span>
<span id="btnPause" class="icon9px pause-btn">Stop</span>

<div id="jplayer"></div>

Далее производим настройки плагина указываем путь к файлу воспроизведения и путь к папке с библиотекой, где у нас находится сам swf плеер внутри плагина данный плеер носит название Jplayer.swf

var init_options = {
        sound_url: "/music.mp3",
	sound_swfPath: "http://site.ru/jsplayer"
    }

Осталось инициализировать сам плагин с нашим плеером для этого воспользуемся следующим кодом:

  $("#jplayer").jPlayer({
            supplied:"mp3",
            swfPath: init_options.sound_swfPath,
            volume:0.1,
            ready:function(){

                if(typeof $.cookie('music_state') == 'undefined') $.cookie('music_state','play',{ expires: 30 });
                // при новом отрытии страницы,идет проверка куков на режим воспроизведения
                if($.cookie('music_state') == 'play'){
                    $('#btnPlay').hide();// скрыть кнопку стоп
                    $('#btnPause').show(); //показать кнопку пауза
                    $(this).jPlayer("setMedia", {
                        mp3: init_options.sound_url
                    }).jPlayer("play");
                }
                else{
                    $('#btnPlay').show();
                    $('#btnPause').hide();
                    $(this).jPlayer("setMedia", {
                        mp3: init_options.sound_url
                    });
                }

                $('#btnPlay').click(function(){
                    $("#jplayer").jPlayer("play");
                    $.cookie('music_state','play',{ expires: 30 });
                });

                $('#btnPause').click(function(){
                    $("#jplayer").jPlayer("pause");
                    $.cookie('music_state','pause',{ expires: 30 });
                });
            },
            ended: function (event) {
                $(this).jPlayer("play");
            }
        });

Посмотреть реализвацию вы можете посмотреть на сайте нашего клиента   http://leylauluhanli.com/ .