Блог

Для сайта одного из наших клиентов стояла задача реализовать механизм беспрерывного воспроизведения музыки при переходе по страницам. Для этого было принято решение сделать работу сайта посредством технологии 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/ .