Меню
Спросить
???

Как сделать плеер? Часть 3.

18 сентября 2017
Как сделать плеер? Часть 3.

Всем привет, пока в мире бушуют котаКЛИЗМЫ, происходит апокалипсис и два смелых парня убивают очередного демона, мы мечтаем лишь о том, как написать свой плеер для сайта. В прошлых статьях мы написали структуры html плеера и сделали внешний вид для него с помощью таблиц стилей css. Сегодня мы будем работать с языком программирования JavaScript и библиотекой Jquery. В этой части я предполагаю рассмотреть свойства и события, а так же начать оживлять наш плеер. Поехали =)

Библиотека Jquery

Для начала нужно подключить библиотеку Jquery, об этом есть кстати подробная статья, в которой описаны проблемы с подключением и как подключить библиотеку Jquery, можете оставить свои вопросы, если у вас возникли проблемы с подключением, попробуем разобраться.
И так подключаем библиотеку, пишем в теге head

  1. <head>
  2.     <script type="text/javascript" src="jquery.js"></script>
  3. </head>

Библиотека у меня находится в папке с файлом index.html, поэтому я пишу лишь название с расширением - jquery.js.
Теперь нужно создать и подключить файл, в котором мы будем писать скрипт или код для плеера, я назову его script.js и подключаем его ОБЯЗАТЕЛЬНО после библиотеки.

  1. <head>
  2.     <script type="text/javascript" src="jquery.js"></script>
  3.     <script type="text/javascript" src="script.js"></script>
  4. </head>

Теперь открываем файл script.js и кодируем его в UTF-8.

new Audio

И так, что мы имеем. У нас существует возможность использовать тег audio, но мы не можем должным образом полностью им управлять и стилизовать его, поэтому мы создали свой плеер со своими стилями, осталось только научится им управлять.
Для того, чтобы музыка играла у вас на сайте без тега audio, javascript дает на возможность создавать аудио и видео-объекты.
Мы будем работать конкретно с аудио-объектом, но в большей степени работа с аудио и видео-объектами ни чем не отличается.
И так, для того чтобы создать аудио-объект нам необходимо прописать вот такую строчку:

  1. new Audio;

Но будет лучше если мы объявим переменную и будем в нужный нам момент присваивать ей вновь созданный объект.

  1. var
  2. Song;

  3. Song = new Audio;
Объект почти создан, осталось указать путь до аудио-файла
  1. var
  2. Song;

  3. Song = new Audio( здесь пишем путь до файла );

Пока что съедим эту информацию и пойдем дальше.

Управление аудио-объектом

Мы теперь умеем создавать аудио-объект, теперь нужно научится им управлять.
И так, начнем с запуска музыки. Для того чтобы запустить аудио или видео, есть метод play() и будет это выглядеть так:

  1. var
  2. Song;

  3. Song = new Audio( здесь пишем путь до файла );
  4. Song.play();

Запоминаем и идем дальше.
Для останова музыки - метод pause()

  1. var
  2. Song;

  3. Song = new Audio( здесь пишем путь до файла );
  4. Song.pause();

Для того, чтобы отдать приказ браузеру о загрузки аудио или видео, используем метод load()

  1. var
  2. Song;

  3. Song = new Audio( здесь пишем путь до файла );
  4. Song.load();

И последний метод, он не так прост как остальные, но и ни чуть не сложен в использовании.
Метод canPlayType();
Так уж сложилось, что не все браузеры поддерживают тот или иной формат аудио или видео, поэтому для кроссбраузерности плеера, необходимо проверять какой файл поддерживает браузер и иметь в запасе все форматы, дабы угодить каждому.
Данный метод возвращает три ответа:
вернет probably, если файл с данным форматом прокатит,
вернет maybe, если файл с данным форматом может подойдет, но велика вероятность что не подойдет,
вернет пустую строку, если файл с данным форматом не подходит.
Проверяем все это, через обычное условие if:

  1. var
  2. Song;

  3. Song = new Audio( здесь пишем путь до файла );
  4. if ( Song.canPlayType( 'audio/mp3' ) == 'probably') {
  5.     alert( 'Формат подходит' );
  6. }

Что-то вроде того. Поехали дальше.

Свойства аудио-объекта

Рассмотрим парочку свойств.
Если мы хотим узнать продолжительность файла в секундах, то мы можем воспользоваться свойством duration. Это свойство вернет дробное число.

  1. var
  2. Song;

  3. Song = new Audio( здесь пишем путь до файла );
  4. alert ( Song.duration );
  5. // 348.092

Чтобы узнать текущее время или же установить песню на определенной секунде или минуте, тут поможет свойство currentTime.

  1. var
  2. Song;

  3. Song = new Audio( здесь пишем путь до файла );
  4. Song.currentTime = 2.05;

Хочу отметить, что некоторые свойства мы может получить только в определенное событие или после него. Например, duration мы можем получить только тогда, когда сработает событие loadedmetadata, о событиях мы поговорим чуть позже.
Ниже я привел возможно не полный, но не маленький список свойств.

- Свойство autoplay, имеет булево значение, то есть true или false, если мы хотим, чтобы песня играла сразу после того, как загрузится и открется HTML документ, то есть наша страничка, то мы должны указать значение true, false в противном случае;
- Свойство currentTime, о нем я сказал уже выше, мы можем получить или задать текущее положение файла в секундах;
- Свойство defaultPlaybackRate, мы можем указать значение в виде числа, для того чтобы увеличить или уменьшить скорость воспроизведения;
- Свойство duration, тоже уже сказал выше, свойство возвращает продолжительность;
- Свойство ended, тоже имеет булево значение, но может только его вернуть, то есть изменить мы его не можем. С помощью этого свойсвта мы может узнать закончился трек или еще играет;
- Свойство loop, опять булево значение, этим свойством мы можем указать браузеру о том, хотим мы или нет чтобы трек после окончания заново начал играть;
- Свойство muted, булево значение, отключаем или включаем звук;
- Свойство paused, булево значение, говорит нам о том, что если пользователь остановил трек вернет true и false если музыка играет;
- Свойство preload, похоже на свойство autoplay, только отвечает не за воспроизведение, а за загрузку файла;
- Свойство readyState, имеет значение в виде строки и может только вернуть значение, менять мы его не можем. Данное свойство может нам сказать в каком состоянии сейчас находится наш друг после вчерашнего праздника, имеет пять ответов:
    - uninitialized - наш файл еще спит и не загружен,
    - loading - файл загружается,
    - loaded - файл вроде бы загрузился, но еще ломается как телка,
    - interactive - ты можешь запустить трек-телочку, но возможно она еще не готова,
    - complete - все готовы, все классно можно запускать;
- Свойство src, с помощью данного свойства мы можем изменить или узнать путь до файла;
- Свойство volume, меняем громкость, значение может быть заданно в виде дробного числа, от 0 до 1.

Вот такие вот свойства, список возможно не полный, буду дополнять по возможности, поехали дальше.

События аудио-объекта

Событий будет тоже небольшой список, но для начала посмотрим как нам использовать события. Рассмотрим пример, выше я написал, чтобы продолжительность файла мы можем получить после события loadedmetadata. Смотрим как это пишется:

  1. var
  2. Song;

  3. Song = new Audio( здесь пишем путь до файла );

  4. Song.addEventListener( 'loadedmetadata', function (){
  5.     var
  6.     duration = Song.duration;
  7.     alert ( 'Продолжительность песни в секундах '+duration );
  8. });

Примерно так.
И так небольшой список событий аудио и видео-объектов:

- Событие canplay, происходит тогда, когда файл достаточно загрузился с сервера, чтобы можно спокойно воспроизводить;
- Событие canplaythrough, происходит тогда, когда файл начинает грузится с нормальной скоростью. Нормальная значит не как у меня, каждую секунду ждешь пока фильм загрузится;
- Событие ended, закончилось воспроизведение;
- Событие error, сбой при загрузке файла;
- Событие load, происходит тогда, когда файл загрузился;
- Событие loadedmetadata, происходит тогда, когда мы получили продолжительность трека или ширину и высоту видео;
- Событие loadstart, происходит сразу как только началась загрузка файла;
- Событие pause, моя остановочка;
- Событие play, происзодит после того как мы воспроизвели песенку;
- Событие progress, происходит всегда когда происходит загрузка файла;
- Событие timeupdate, происходит когда трек воспроизводится, здесь мы можем получить текущее время - currentTime.

События так же не все, периодически буду добавлять.

Свой плеер на javascript

И так, теперь у нас есть заготовка плеера и мы умеем создавать аудио-объект, а так же знаем свойства и умеем им управлять, давай те уже наконец писать свой плеер =)
Мы подключили библиотеку JQuery и создали файл script.js, открываем его и первое, что напишем - это событие.
Событие готовности HTML документа, то есть сработает сразу как только наша страница загрузилась.

  1. $(document).ready( function(){

  2. });

Объявим переменные:
i - понадобиться для цикла,
Song - будет аудио-объектом,
id_song - будет содержать в себе текущее айди трека.

  1. $(document).ready( function(){
  2.     var
  3.     id_song = -1, Song, i;
  4. });

Дальше объявим массив, который будет содержать в себе инфу о каждой песни.Массив будет многомерным.
У меня в папке с сайтом подготовлены два аудио-файла и еще два у меня есть на сервере, значит массив будет содержать в себе еще четыре массива.

  1. $(document).ready( function(){
  2.     var
  3.     id_song = -1, Song, i,
  4.     songs = [
  5.         muz_one = [ ],
  6.         muz_two = [ ],
  7.         muz_three = [ ],
  8.         muz_four = [ ]
  9.     ];
  10. });

Теперь запишем к каждой песне айди и придумаем названия.

  1. $(document).ready( function(){
  2.     var
  3.     id_song = -1, Song, i,
  4.     songs = [
  5.         muz_one = [0, 'Музыка_1' ],
  6.         muz_two = [1, 'Музыка_2' ],
  7.         muz_three = [2, 'Музыка_1_сервер' ],
  8.         muz_four = [3,  'Музыка_2_сервер' ]
  9.     ];
  10. });

Да, с фантазией у меня не очень, идем дальше.
Нам нужно получить продолжительность каждой песни и записать все это в массив.
Тут может каждый поступить по разному.
Можно сделать все это в цикле при создании страницы сайта, но учитываем, что событие loadedmetadata имеет асинхронную функцию. Либо мы можем сделать это уже при загрузке песен на сайт, с помощью серверного языка.
Можно сделать и любыми другими способами, тут вы делаете идеально для себя.
Я же просто получу один раз их продолжительность и запишу в массив, мой способ конечно не подходит для тех кому за 20 кому нужно обработать большое количество файлов.
Но для начала запишем в массив путь до каждый песни:

  1. $(document).ready( function(){
  2.     var
  3.     id_song = -1, Song, i,
  4.     songs = [
  5.         muz_one = [0, 'Музыка_1', 'muzika.mp3' ],
  6.         muz_two = [1, 'Музыка_2', 'muzika2.mp3' ],
  7.         muz_three = [2, 'Музыка_1_сервер', 'http://knlnt.com/muz.mp3' ],
  8.         muz_four = [3,  'Музыка_2_сервер', 'http://knlnt.com/muz2.mp3' ]
  9.     ];
  10. });

Теперь получим продолжительность каждой песни.
Первое, переменной Song присваиваем аудио-объект и в скобках указываем путь до файла, а путь до файла у на хранится в массиве. Далее ставим событие loadedmetadata, внутри него получаем и выводим в консоль продолжительность песни. И так четыре раза.

  1. $(document).ready( function(){
  2.     var
  3.     id_song = -1, Song, i,
  4.     songs = [
  5.         muz_one = [0, 'Музыка_1', 'muzika.mp3' ],
  6.         muz_two = [1, 'Музыка_2', 'muzika2.mp3' ],
  7.         muz_three = [2, 'Музыка_1_сервер', 'http://knlnt.com/muz.mp3' ],
  8.         muz_four = [3,  'Музыка_2_сервер', 'http://knlnt.com/muz2.mp3' ]
  9.     ];
  10.     Song = new Audio(songs[0][2]);
  11.     Song.addEventListener('loadedmetadata', function(){
  12.         console.log(this.duration);
  13.     });
  14. });

И так четыре раза. Чувствуете? Если песен у вас сотни, то вам нужно придумать свой способ.
Далее копируем полученные значения с консоли в массив и удаляем не нужный нам код.

  1. $(document).ready( function(){
  2.     var
  3.     id_song = -1, Song, i,
  4.     songs = [
  5.         muz_one = [0, 'Музыка_1', 'muzika.mp3', '239.07265' ],
  6.         muz_two = [1, 'Музыка_2', 'muzika2.mp3', '163.7355' ],
  7.         muz_three = [2, 'Музыка_1_сервер', 'http://knlnt.com/muz.mp3, '159.921625'' ],
  8.         muz_four = [3,  'Музыка_2_сервер', 'http://knlnt.com/muz2.mp3', '239.07265' ]
  9.     ];
  10. });

Массив готов. Теперь откроем index.html и вырежем от туда кусок кода, который отвечает за отображение песни:

  1. <div class="song" id="">
  2.     <div class="play-pause_song"></div>
  3.     <div class="nameSong_song">Название песни</div>
  4.     <div class="duration_song">0:00</div>
  5. </div>

Это будет наш шаблон.
Что нам с ним делать, я удалю здесь лишние пробелы и переходы на новую строку, то есть сделаю все в одну строчку. Дальше я запушу цикл с одним действием, я буду в блок с классом .wrp добавлять данный шаблон, но уже с данными из массива каждой песни.
И так, для начала пишем цикл, переменную i мы заранее уже объявили:

  1. for (i=0; i < songs.length; i++) {
  2. }

Далее, при каждой итерации добавляем в блок наш шаблон.

  1. for (i=0; i < songs.length; i++) {
  2.     $('.wrp').append('<div class="song" id=""><div class="play-pause_song"></div><div class="nameSong_song">Название песни</div><div class="duration_song">0:00</div></div>');
  3. }

Теперь нам нужно шаблонные значения поменять на значения, которые будут браться из массива при каждой итерации.
Вставим айди из массива и название песни.

  1. for (i=0; i < songs.length; i++) {
  2.     $('.wrp').append('<div class="song" id=" '+songs[i][0]+' "><div class="play-pause_song"></div><div class="nameSong_song">'+songs[i][1]+'</div><div class="duration_song">0:00</div></div>');
  3. }

Далее вставим продолжительность песни, но представим в виде минут и секунд

  1. for (i=0; i < songs.length; i++) {
  2.     $('.wrp').append('<div class="song" id=" '+songs[i][0]+' "><div class="play-pause_song"></div><div class="nameSong_song">'+songs[i][1]+'</div><div class="duration_song">'+parseInt(songs[i][3]/60)+':'+parseInt(songs[i][3]%60)+'</div></div>');
  3. }

Вот так, теперь нам стоит добавить инфу о песне в массив и на нашей странице она сама сгенерируется по циклу и нам не нужно каждый раз редактировать html документ.
Теперь давайте запустим наши песни.
При клике на песню, то есть не по кнопке на плеере, а при клике на саму песню из списка у нас будет начинаться воспроизведение.
Напишем событие click по песне.

  1. $( '.song' ).on('click', function(){

  2. });

Получим айди "кликнутой" песни

  1. $( '.song' ).on('click', function(){
  2.     var
  3.     id = $(this).attr('id');
  4. });

Далее создаем новый аудио-объект

  1. $( '.song' ).on('click', function(){
  2.     var
  3.     id = $(this).attr('id');

  4.     Song = new Audio();
  5. });

Теперь берем из массива путь до песни у массива по данному айди

  1. $( '.song' ).on('click', function(){
  2.     var
  3.     id = $(this).attr('id');

  4.     Song = new Audio(songs[id][2]);
  5. });

Осталось запустить песню с помощью метода play()

  1. $( '.song' ).on('click', function(){
  2.     var
  3.     id = $(this).attr('id');

  4.     Song = new Audio(songs[id][2]);
  5.     Song.play();
  6. });

Теперь при нажатии на конкретную песню, начинается ее воспроизведение. Можно радоваться, а можно и плакать ибо она пока что не останавливается. Верно, сейчас много чего не работает, но главное начали =)

Заключение

На сегодня все, мы много узнали, не много написали, осталось есть переживать и усвоить. В следующей части мы будем продолжать оживлять наш плеер. Всем спасибо за урок пока =)

Следующая статьяПредыдущая статья