• Добро пожаловать в сообщество My.Net.Ru

    Мы очень рады, что Вы посетили наш форум WAP|WEB мастеров! Мы сможем помочь Вам с решением ваших вопросов. Пожалуйста, пройдите регистрацию, она занимает не более одной минуты и у вас появится возможность:
      Просматривать документации и техническую информацию
      Скачивать шаблоны и скрипты
      Задавать вопросы и получать на них ответы
      Предоставлять услуги или искать исполнителя
      Отключить назойливую рекламу
  • Что бы скачивать ресурсы с нашего форума, необходимо перейтив в группу ,"ТОПОВЫЙ".

Аудио плеер на основе HTML5 и jQuery

anonymous

Создатель
Команда форума
администратор
Сообщения
1 680
Реакции
369
Баллы
103
Сегодня я расскажу как сделать интересный вариант плеера на основе html 5 и jQuery.

Плеер будет поддерживать следующие функции:

  • перемотка
  • старт/стоп
  • пауза
  • индикатор оставшегося времени
  • индикатор загрузки файла
В итоге Вы научитесь не только делать кросбраузерный плеер, но простой плагин на jQuery, так как плеер мы будем подключать как плагин jQuery. В чём основное отличие плагина jQuery от простого javascript кода реализующегося те же функции - плеер может создаваться неоднократно на странице. То есть написав:

HTML:
/* Добавление классов для подсветки кода */
    
<form action="index.php" method="POST">
<div class="conteinerofplayer">

    
 

    <div class="player m">
        <div class="playbut_m">
    
        </div>
        <div class="bar">
          <div class="progress_m">
                <span></span>
                <div class="line_m">
    
                </div>
            </div>
            <div class="tracktime">
                <span></span>
            </div>
        </div>
        <div class="radionoactive_m radio_m">
    
        </div>
    
    </div>
    
   <div class="player w">
        <div class="playbut_w">
    
        </div>
        <div class="bar">
          <div class="progress_w">
                <span></span>
                <div class="line_w">
    
                </div>
            </div>
            <div class="tracktime">
                <span></span>
            </div>
        </div>
        <div class="radionoactive_w radio_w">
    
        </div>
    
    </div>

    <!--
      <div class="player m2">
        <div class="playbut_m">
    
        </div>
        <div class="bar">
          <div class="progress_m">
                <span></span>
                <div class="line_m">
    
                </div>
            </div>
            <div class="tracktime">
                <span></span>
            </div>
        </div>
        <div class="radionoactive_m radio_m">
    
        </div>
    
    </div>
    -->
</div>
<input type="submit" value="submit">
</form>
С помощью функции "checknav" нужно проверять величину прокрутки окна, в зависимости от чего добавлять CSS класс или удалять его. Переменные ds_loaded.sc и ds_loaded.sback нужны для предотвращения циклического запуска кода, который может быть и не таким простым, например можно добавить функции jQuery анимации.

Структура меню может быть любой, с учетом его горизонтального расположения, для примера возьмём стандартную разметку меню из Joomla 2.5:
Код:
$('.m').audioplayer('init',{file:'audio/250_m',t:'m'});
$('.w').audioplayer('init',{file:'audio/250_w',t:'w'});
плагин правильно подключится дважды, как на изображении. В плагин jQuery мы передаём два параметра первый - наименование функции (init) содержащейся в плаигне, второй объект, содержащий опции плагина ({file:'250_m',t:'m'}). Где file имя файла, t - тип плеера, он может быть розовым (w) или синим (m). Сразу скажу, все графические элементы плеера свободны для использования и распространения, да и плеер распространяется на лицензии GNU GPL 2. То есть у Вас есть всеобъёмлющий набор прав по распоряжению исходными материалами плеера.

Для его работы ипользуется следующя hrml разметка::
HTML:
<form action="index.php" method="POST">
<div class="conteinerofplayer">

    
 

    <div class="player m">
        <div class="playbut_m">
    
        </div>
        <div class="bar">
          <div class="progress_m">
                <span></span>
                <div class="line_m">
    
                </div>
            </div>
            <div class="tracktime">
                <span></span>
            </div>
        </div>
        <div class="radionoactive_m radio_m">
    
        </div>
    
    </div>
    
   <div class="player w">
        <div class="playbut_w">
    
        </div>
        <div class="bar">
          <div class="progress_w">
                <span></span>
                <div class="line_w">
    
                </div>
            </div>
            <div class="tracktime">
                <span></span>
            </div>
        </div>
        <div class="radionoactive_w radio_w">
    
        </div>
    
    </div>

    <!--
      <div class="player m2">
        <div class="playbut_m">
    
        </div>
        <div class="bar">
          <div class="progress_m">
                <span></span>
                <div class="line_m">
    
                </div>
            </div>
            <div class="tracktime">
                <span></span>
            </div>
        </div>
        <div class="radionoactive_m radio_m">
    
        </div>
    
    </div>
    -->
</div>
<input type="submit" value="submit">
</form>
Итак, с чего начать, во-первых, чтобы все было понятно, - с того, что в плеере будут содержаться различные вычисления, касающиеся обработки пакетных данных, так как файлы, загружаемые в тег audio загружаются в браузер пользователя порциями или пакетами, точнее в буфер браузера.

Для начала не забудьте подключить jQuery! Затем пишите плагин внутри обработчика события загрузки страницы:
Код:
;(function($) {
    .......
})(jQuery);
Любой плагин jQuery расширяет его, для это есть стандартная функция jQuery $.fn.extend:
Код:
$.fn.extend({
    
    
});
Содержимое $.fn.extend для нашего плагина будет следующим:
Код:
audioplayer: function(arg,options) {

            if (options && typeof(options) == 'object') {

                options = $.extend( {}, $.audioplayer.defaults, options );
            } else {
                options = $.audioplayer.defaults;
            }
            

            // this creates a plugin for each element in
            // the selector or runs the function once per
            // selector.  To have it do so for just the
            // first element (once), return false after
            // creating the plugin to stop the each iteration
            this.each(function() {
    
                new $.audioplayer(this, options, arg );
            });
            return;
        }
 

anonymous

Создатель
Команда форума
администратор
Сообщения
1 680
Реакции
369
Баллы
103
В общем здесь нет ничего сложного, мы добавляем опции плагина и запускаем для каждого объекта this отдельный плагин, название плагина я выбрал "audioplayer". Основа - готова!

Далее код плагина. Сперва я приведу его целиком, затем объясню отдельные части этого кода.
Код:
$.audioplayer = function( elem,options,arg) {

        if (arg && typeof(arg) == 'string') {
           if (arg == 'init') {
               init( arg );
           }
           else if (arg == 'remove') {
               remove( arg );
           }
           return;
        }

        /*...normal plugin actions...*/

        function init(arg)
        {
            var isload = {};
            var container = $(elem);
            
            var isIE = !!document.all && document.uniqueID;
            var isChrome  = false;
            var btfound = 0; browser_detect = navigator.userAgent.toLowerCase();
            if(browser_detect.indexOf("chrome") + 1) isChrome = true;
            
            if(options.t == 'w') {
            
                var tclass = 'qtip-light';
                var _sclass = '_w';
            } else {
                
                var tclass = 'qtip-light-men';
                var _sclass = '_m';
            }
            i = container.index('.player');


            if(isIE || isChrome) {
                ext = 'mp3';
            } else {
                ext = 'ogg';   
            }
            container.append('<audio preload="metadata" class="track" src="'+options.file+'.'+ext+'"><p>Your browser does not support the audio element</p></audio>');
            $('.player:eq(0)').find('audio').addClass('aa');

            if(i == 0) {
        
                acteviHidden(_sclass);
            }
            
    
            
            var audio = $(elem).find('audio')[0];
            

                    $('.track',container).bind('progress', function(e) {
                          var ranges = [];
                          for(var i = 0; i < audio.buffered.length; i ++)
                          {
                            ranges.push([
                              audio.buffered.start(i),
                              audio.buffered.end(i)
                              ]);
                          }
                          d = audio.duration / 100;

                        
                        //$('.bar .tracktime span',container).hide();
                        //now iterate through the ranges and convert each set of timings
                        //to a percentage position and width for the corresponding span
                        allbufer = 0;
                        for(var i = 0; i < audio.buffered.length; i ++)
                        {
                            allbufer += ranges[i][1]-ranges[i][0];
                            
                        }
                         //console.log(allbufer);
                                                  
                          per = Math.floor(allbufer / d);
                          if(per > 0) {
                              per  = (per > 100) ? per ==100 : per;
                                $('.bar .progress'+_sclass+' span',container).text(per+" %");             
                          }
                    });
                    $('.track',container).bind('playing', function(e) {
                        
                        
                        $('.bar .tracktime span',container).show();


                    });   

                // Is the player currently seeking?
                $('.track',container).bind('timeupdate', function() {
                    if(isload.clickoffset)
                    {
                        $('.progress'+_sclass,container).trigger('click');
                        isload.clickoffset = false;
                        return;
                    }

                    $('.tracktime',container).show();
                    var time = this.duration - this.currentTime;
                    
                    var m = Math.floor(time / 60);
                    var s = Math.floor(time - (m * 60));
                    if(s < 10) s = '0'+s;
                    if(m < 10) m = '0'+m;
                    $('.tracktime span',container).text( m +':'+ s);
                    var step = 250 / this.duration;
                    $('.bar .progress'+_sclass+' .line'+_sclass,container).width((Math.floor(this.currentTime) * step)+'px');
        
                    if(Math.floor(this.duration) == Math.floor(this.currentTime)) {
                        
                        $('.playbut'+_sclass,container).removeClass('stop'+_sclass).addClass('play'+_sclass);
                        $('.progress'+_sclass+' .line'+_sclass,container).width(0);
                        $('.progress'+_sclass+' .tracktime',container).hide();
                    }
                });
                
                $('.playbut'+_sclass,container).bind('click', function() {
                    acteviHidden(_sclass);
                    $('audio').removeClass('aa');
                    $('audio',container).addClass('aa');


                    if($(this).hasClass('stop'+_sclass)) {
                        
                        $(this).removeClass('stop'+_sclass).addClass('play'+_sclass);
                        $('audio',container)[0].pause(); // jumps to 29th secs   

                    } else {


                        $(this).removeClass('play'+_sclass).addClass('stop'+_sclass);

                    
                            $('audio:not(".aa")').each(function(index, element) {
                                element.pause();
                                if(element.currentTime) {
                                    element.currentTime = 0;
                                }
                                $(this).siblings('.playbut_w').removeClass('stop_w').addClass('play_w');
                                $(this).siblings('.playbut_m').removeClass('stop_m').addClass('play_m');
                            });
                            $('.radio'+_sclass,container).addClass('radioactive'+_sclass);
                            
                            $('.radio_m').removeClass('radioactive_m');
                            $('.radio_w').removeClass('radioactive_w');
                            $('.radio_m').addClass('radionoactive_m');
                            $('.radio_w').addClass('radionoactive_w');

                        $('.radio'+_sclass,container).removeClass('radionoactive'+_sclass).addClass('radioactive'+_sclass);

                            $('.bar .tracktime span').hide();

                            $('audio',container)[0].play(); // jumps to 29th secs
                            $('.tracktime',container).removeClass('loadm');
                    
                        
                        
                    }
            
                });
                
                $('.progress'+_sclass,container).bind('click', function(event) {
                
                    duration = audio.duration;
                    //get the position of the event
                    
                    clientX = event.clientX;
                    left = event.currentTarget.offsetLeft;
                    clickoffset = clientX - left;
                    if(isload.clickoffset) clickoffset = isload.clickoffset;
                    percent = clickoffset/event.currentTarget.offsetWidth;
                    duration_seek = percent*duration;
                    if($('audio',container)[0].currentTime) {
                        $('audio',container)[0].currentTime = duration_seek;
                    } else {
                        isload.clickoffset = clickoffset;   
                        
                        $('.bar .progress'+_sclass+' .line'+_sclass,container).width(clickoffset+'px');
                    }
                    
    
                      //document.getElementById('track').currentTime = duration_seek; // jumps to 29th secs
                    
                    //document.getElementById('track').play(); // jumps to 29th secs
            
                });
                
                $('.radio'+_sclass,container).bind('click', function() {
                    r = $(this);
                    acteviHidden(_sclass);
                
                    $('audio').removeClass('aa');
                    $('audio',container).addClass('aa');

                        $('audio:not(".aa")').closest('.player').find('.playbut_w').removeClass('stop_w').addClass('play_w');
                        $('audio:not(".aa")').closest('.player').find('.playbut_m').removeClass('stop_m').addClass('play_m');
                            
                        if(r.hasClass('radionoactive'+_sclass)) {
                            $('.radio_w,.radio_m').removeClass('radioactive_w');
                            $('.radio_w,.radio_m').removeClass('radioactive_m');
    

                            $('.playbut'+_sclass,container).removeClass('play'+_sclass).addClass('stop'+_sclass);

                            $('.radio_w').addClass('radionoactive_w');
                            $('.radio_m').addClass('radionoactive_m');
                            
                            
                            $('audio:not(".aa")').each(function(index, element) {
                        
                                element.pause();
                                element.currentTime = 0;   
                            });
                            
                            
                            $('audio',container)[0].play(); // jumps to 29th secs
                            r.removeClass('radionoactive'+_sclass).addClass('radioactive'+_sclass);
                            $('.bar .tracktime span').hide();
                            $('.tracktime').removeClass('loadm');

                        }
                        
                    });
        }
        
        function acteviHidden(type)
        {
            type = type.substr(1,1);   
            $('.conteinerofplayer input[name="voicetype"]').remove();
            var hidden = $('<input>',{name:'voicetype',value:type,type:'hidden'});
            $('.conteinerofplayer').append(hidden);   
            
        }

    };
Методы плагина, запускаются следующим кодом, их два (init, remove), фактически в плигне используется один (init):
Код:
 if (arg && typeof(arg) == 'string') {
           if (arg == 'init') {
               init( arg );
           }
           else if (arg == 'remove') {
               remove( arg );
           }
           return;
        }
Функция acteviHidden необходима для присоединения к форме скрытого элемента input, в котором будет содержаться значение типа плагина (m или w). Думаю эту функцию можно легко приспособить для создания других скрытых полей с нужной вам информацией, если Вам нужно использовать плееры как внутри тега form. Особое внимание я хотел бы уделить процессу буферизации данных, так как он отличается от обычных способов отслеживания загрузки файла. Для каждого плеера буферизация начинается с события $('.track',container).bind('progress'..... внутри которого данные о буфере помещаются в массив, который затем используется при расчётах процента загрузки аудио файла, ниже приведён код этого процесса:
Код:
$('.track',container).bind('progress', function(e) {
                          var ranges = [];
                          for(var i = 0; i < audio.buffered.length; i ++)
                          {
                            ranges.push([
                              audio.buffered.start(i),
                              audio.buffered.end(i)
                              ]);
                          }
                          d = audio.duration / 100;

                        
                        //$('.bar .tracktime span',container).hide();
                        //now iterate through the ranges and convert each set of timings
                        //to a percentage position and width for the corresponding span
                        allbufer = 0;
                        for(var i = 0; i < audio.buffered.length; i ++)
                        {
                            allbufer += ranges[i][1]-ranges[i][0];
                            
                        }
                         //console.log(allbufer);
                                                  
                          per = Math.floor(allbufer / d);
                          if(per > 0) {
                              per  = (per > 100) ? per ==100 : per;
                                $('.bar .progress'+_sclass+' span',container).text(per+" %");             
                          }
                    });
Остальной код плеера связан с различными типами bind функций $('.track',container).bind('click',....., по просту говря эти функции отслеживают события нажатия графических элементов плеера, - старт, стоп, перемотка, чекбокс. Разобраться с ними Вам придётся самостоятельно, так как в них нет ничего сложно и они схожи по логике выполнения.
 

Тему смотрели (Всего: 0)

Тема долгое время не просматривалась.

bodr.net.ru Бодрый топ рейтинг мобильных WAP сайтов KatStat.ru - Топ рейтинг сайтов
Top.Mail.Ru dinowap.ru zontop.ru wabtop.ru - Рейтинг и статистика мобильных сайтов vetop.ru statop.ru - Топ рейтинг сайтов Добавить сайт в интернете для рекламы
Сверху