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

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

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

Всем привет. Сегодня на улице похоже будет дождь, ибо грозные тучи висят и давят мне в виски, да и холодно жуть, а так хочется еще хоть не много почувствовать тепло солнца.
Продолжаем писать идеальный плеер для сайта на javascript. В прошлой части мы усвоили достаточное количество новой информации касательно аудио и видео-объектов в javascript и научились запускать песенку. Сегодня мы напишем функции и научим плеер воспроизводить треки в нормальном потоке. Это значит, что песни не будут играть все разом, а будут останавливаться при нажатии на следующую песню и плеер станет еще живее и более похож на плеер :D. Хватит читать, открывай своими кривыми культафками наш говнокод. Поехали =)

Плеер на javascript

И так открываем наш плеер в браузере и открываем файл script.js.
Смотрим на строчку кода, которую писали в прошлой части.

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

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

При клике по песне из списка у нас начиналось воспроизведение дорожки, при этом если мы запускаем другие песни то они тоже воспроизводятся, но предыдущие не останавливаются, сегодня мы решим эти и другие проблему. Поэтому удаляем эти две строчки, оставляем только объявление переменной.
И так мы получаем id и первое, что после этого мы должны сделать, так это удостоверится, что аудио-объект еще не был создан, то есть мы должны проверить переменную Song, если она существует, то аудио-объект был создан, если не существует значит мы должны создать этот объект. Давайте напишем условие.

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

  4.     if ( Song ) {

  5.     }
  6.     else {

  7.     }
  8. });

Начнем с противного, в противном случае(else), то есть тогда когда аудио-объект не создан мы создаем объект и запускаем музыку.

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

  4.     if ( Song ) {

  5.     }
  6.     else {
  7.         Song = new Audio(songs[id][2]);
  8.         Song.play();
  9.     }
  10. });

Теперь если мы запустим трек, то он запустится и не более, то есть другие песни мы уже не можем запустить и остановить его мы не можем. Этот как раз тот случай когда срабатывает первое условие - если Song существует. Так вот если аудио объект существует тут должен возникнуть второй вопрос, то есть второе условие.
Мы должны проверить на какую песню нажал пользователь. Как это узнать? Для этого у нас есть переменная id_song и у каждой песни есть свой id, значит мы должны при создании нового ауди-объекта, тобишь при запуске другой песни, нужно присвоить глобальной переменной id_song значение нажатой песни. Делаем:

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

  4.     if ( Song ) {

  5.     }
  6.     else {
  7.         id_song = id;
  8.         Song = new Audio(songs[id][2]);
  9.         Song.play();
  10.     }
  11. });

Так вот теперь мы можем проверить по какой из песен нажал пользователь.
Условие будет выглядеть так:
Если (id нажатой песни равно существующей глобальной переменной id_song) то
    песня на которую нажал пользователь уже была нажата до этого
в противном случае
    песня на которую нажал пользователь - новая.
Теперь пишем в коде:

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

  4.     if ( Song ) {
  5.        
  6. if ( id == id_song ) {
  7.         
  8.         }
  9.         else {
  10.         
  11.         }
  12.     }
  13.     else {
  14.         id_song = id;
  15.         Song = new Audio(songs[id][2]);
  16.         Song.play();
  17.     }
  18. });

Так вот, если id совпадают, то пользователь нажал ту же песню, тут остается только проверить запущена ли в данный момент песня или нет. Если песня не запущена - надо запустить, если же играет то нужно остановить.
Как проверить играет ли песня в данный момент? В это случае нам поможет свойство paused, оно имеет булево значение и вернет true если песня стоит на паузе и вернет false в противном случаем.
Пишем:

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

  4.     if ( Song ) {
  5.         if ( id == id_song ) {
  6.             if ( Song.paused ) {
  7.                 Song.play();
  8.             }
  9.             else {
  10.                 Song.pause();
  11.             }
  12.         }
  13.         else {
  14.         
  15.         }
  16.     }
  17.     else {
  18.         id_song = id;
  19.         Song = new Audio(songs[id][2]);
  20.         Song.play();
  21.     }
  22. });

Отлично, теперь если мы запустим трек он будет играть, если мы нажмем на него еще раз он встанет на паузу, если мы опять на него нажмем то он продолжит играть, то что нам было нужно =)
Теперь нужно заставить играть другие песни. Вернемся к условию, когда мы проверяем id нажатой песни. Рассмотрим тот случай, когда пользователь нажал на другую песню, то есть id не совпадает с переменной id_song.
А теперь все вместе логически продумаем:
Нажали на песню
Проверяем если аудио-объект создан то проверяем нажатое айди.
Так вот, если объект есть и айди не совпадает, значит нужно существующий аудио-объект остановить и создать новый и запустить песню, а так же поменять значение переменной id_song.
Пишем:

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

  4.     if ( Song ) {
  5.         if ( id == id_song ) {
  6.             if ( Song.paused ) {
  7.                 Song.play();
  8.             }
  9.             else {
  10.                 Song.pause();
  11.             }
  12.         }
  13.         else {
  14.             Song.pause();
  15.             id_song = id;
  16.             Song = new Audio(songs[id][2]);
  17.             Song.play();
  18.         }
  19.     }
  20.     else {
  21.         id_song = id;
  22.         Song = new Audio(songs[id][2]);
  23.         Song.play();
  24.     }
  25. });

Запускаем и проверяем, что получилось?
Нажимаем на песню - играет.
Нажимаем на эту же песню - останавливается.
Нажимаем на эту же песню - продолжает играть.
Нажимаем на другую - нажатая песня начинает играть, а предыдущая останавливается.
Отлично, то что нужно =)
Теперь давайте посмотрим на код, у нас есть действия в первом противном случае, когда Song не существует и когда айди не совпадают, действия похожи.
Давайте упростим задачу и вынесем эти действия в отдельную функцию.
Эти действия у нас отвечают запуск нового аудио-объекта.
Назовем функцию playNewSong и вместо действий вставим функцию.
Пишем:

  1.     
  2. function playNewSong(id) {
  3.         id_song = id;
  4.         Song = new Audio(songs[id][2]);
  5.         Song.play();
  6.     }

  7. $('.song').on('click', function(){
  8.     var
  9.     id = $(this).attr('id');

  10.     if ( Song ) {
  11.         if ( id == id_song ) {
  12.             if ( Song.paused ) {
  13.                 Song.play();
  14.             }
  15.             else {
  16.                 Song.pause();
  17.             }
  18.         }
  19.         else {
  20.             Song.pause();
  21.             playNewSong(id);
  22.         }
  23.     }
  24.     else {
  25.         playNewSong(id);
  26.     }
  27. });

В эту функцию мы передаем один параметр - айди нажатой песни.
Давайте теперь немного оживим сам плеер. При запуске новой песни мы будем менять в самом плеере название песни, будем менять айди у кнопки .play-pause в самом плеере.

  1. function playNewSong(id) {
  2.     $('.player .nameSong').text(songs[id][1]);
  3.     $('.play-pause').attr('id', id);
  4.     id_song = id;
  5.     Song = new Audio(songs[id][2]);
  6.     Song.play();
  7. }
  8. $('.song').on('click', function(){
  9.     var
  10.     id = $(this).attr('id');
  11.     
  12.     if ( Song ) {
  13.         if ( id == id_song ) {
  14.             if ( Song.paused ) {
  15.                 Song.play();
  16.             }
  17.             else {
  18.                 Song.pause();
  19.             }
  20.         }
  21.         else {
  22.             Song.pause();
  23.             playNewSong(id);
  24.         }
  25.     }
  26.     else {
  27.         playNewSong(id);
  28.     }
  29. });

Проверяем, нажимаем на песню из списка и в плеера появляется ее название. Отлично, идем дальше. Я предлагаю все эти условия вынести тоже в отдельную функцию и назову ее playPauseSong.

  1. function playNewSong(id) {
  2.     $('.player .nameSong').text(songs[id][1]);
  3.     $('.play-pause').attr('id', id);
  4.     id_song = id;
  5.     Song = new Audio(songs[id][2]);
  6.     Song.play();
  7. }

  8. function playPauseSong(id) {
  9.     if ( Song ) {
  10.         if ( id == id_song ) {
  11.             if ( Song.paused ) {
  12.                 Song.play();
  13.             }
  14.             else {
  15.                 Song.pause();
  16.             }
  17.         }
  18.         else {
  19.             Song.pause();
  20.             playNewSong(id);
  21.         }
  22.     }
  23.     else {
  24.         playNewSong(id);
  25.     }
  26. }
  27. $('.song').on('click', function(){
  28.     var
  29.     id = $(this).attr('id');
  30.     
  31.     playPauseSong(id);
  32. });

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

  1. меняем при нажатии на песню или кнопку на плеере
  2. меняем при несовпадении айди в условии, то есть тогда, когда нажали на другую песню
  3. меняем при останове и запуске песни, когда Song существует

Пишем:

  1. function playNewSong(id) {
  2.     $('.player .nameSong').text(songs[id][1]);
  3.     $('.play-pause').attr('id', id);
  4.     id_song = id;
  5.     Song = new Audio(songs[id][2]);
  6.     Song.play();
  7. }

  8. function playPauseSong(id) {
  9.     if ( Song ) {
  10.         if ( id == id_song ) {
  11.             if ( Song.paused ) {
  12.                 Song.play();
  13.                 $('.play-pause').css({'background-position':'8px -35px'});
  14.                 $('.song#'+id+' .play-pause_song').css({'background-position':'4px -17px'});
  15.             }
  16.             else {
  17.                 Song.pause();
  18.                 $('.play-pause').css({'background-position':'8px 8px'});
  19.                 $('.song#'+id+' .play-pause_song').css({'background-position':'4px 4px'});
  20.             }
  21.         }
  22.         else {
  23.             Song.pause();
  24.             $('.play-pause_song').css({'background-position':'4px 4px'});
  25.             $('.song#'+id+' .play-pause_song').css({'background-position':'4px -17px'});
  26.             playNewSong(id);
  27.         }
  28.     }
  29.     else {
  30.         playNewSong(id);
  31.     }
  32. }

  33. $('.song, .play-pause').on('click', function(){
  34.     var
  35.     id = $(this).attr('id');
  36.     $('.play-pause_song').css({'background-position':'4px 4px'});
  37.     playPauseSong(id);
  38. });

Почти готово, так же нужно менять кнопку при запуске новой песни

  1. function playNewSong(id) {
  2.     $('.player .nameSong').text(songs[id][1]);
  3.     $('.play-pause').attr('id', id);
  4.     id_song = id;
  5.     Song = new Audio(songs[id][2]);
  6.     $('.play-pause').css({'background-position':'8px -35px'});
  7.     $('.song#'+id+' .play-pause_song').css({'background-position':'4px -17px'});
  8.     Song.play();
  9. }

Запускаем и радуемся =)

Заключение

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

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