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

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

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

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

Переключение песен в плеере

Начнем с того, что обучим плеер переключать песни, кнопки назад и вперед или следующая и предыдущая песня. За эту работу будут отвечать две стрелочки в плеере, они имеют класс ,sledbtn. Для начала вспомним обработчик события - нажатие на песню и нажатие на кнопку в плеере, то есть запуск песни или остановка. При этом событии мы получаем айди текущей песни, мы можем этим воспользоваться и в момент этого события присвоить атрибуту data-id класса .sledbtn значение следующей и предыдущей песни. Вот так:

  1. $('.song, .play-pause').on('click', function(){
  2. var
  3. id = $(this).attr('id');
  4. $('.play-pause_song').css({'background-position':'4px 4px'});
  5. playPauseSong(id);
  6. id++;
  7. $('.sledbtn#sled').attr('data-id', id);
  8. id--;id--;
  9. $('.sledbtn#pred').attr('data-id', id);
  10. });

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

  1. $('.sledbtn').on('click', function(){
  2. var
  3. id = $(this).attr('data-id');
  4. if (id != -1){
  5. $('.play-pause_song').css({'background-position':'4px 4px'});
  6. playPauseSong(id);
  7. id++;
  8. $('.sledbtn#sled').attr('data-id', id);
  9. id--;id--;
  10. $('.sledbtn#pred').attr('data-id', id);
  11. }
  12. });

Что делаем здесь? Здесь мы получаем то самый атрибут нажатой кнопки, в который мы вписывали значение при запуске новой песни, далее мы проверяем, чтобы значение атрибута не было равно -1, так как это значение по умолчанию, когда песня еще ни разу не запускалась, далее мы меняем кнопки у всех песен на стрелочку, потом запускаем воспроизведение песни, то есть следующей или предыдущей, в зависимости от айди, дальше мы просто повторяем те же действия, мы меняем атрибут data-id на новые значения. Вот и все, теперь можно запустить и проверить работу, песни переключаются. Вам осталось оставить все как есть или допилить под себя =)

Управляем громкостью аудио объекта

Тут тоже все предельно понятно и ясно, Начнем с того чтобы объявим две переменные, там же где объявляли массив с песнями, то есть сразу после document.ready.
Переменная volume - будет содержать значение для изменения громкости.
Переменная mute - будет иметь булево значение и будет отвечать за включение/выключение звука.

  1. $(document).ready(function(){
  2.     var
  3.     Song, i, id_song, массив песен, volume = 1, mute = false;
  4. });

Поехали дальше, начнем с простого научимся отключать и включать звук. За это у нас отвечает кнопка со значком ноты с классом .mute, при нажатии будет меняться цвет и выключаться звук и при последующем нажатии все наоборот - включаться звук и менять цвет на другой. Все предельно просто.
Пишем обработчик нажатия на тот самый значок нотки с классом .mute:

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

  2. });

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

  1. $('.mute').on('click', function(){
  2. if (Song){ 

  3. });

Теперь когда мы знаем, что объект аудио есть, мы можем управлять у него звуком, а иначе кому отключать звук?
Дальше нам нужно знать в каком положении сейчас звук, включен или выключен, можно сделать по разному, но я предлагаю проверить значение нашей переменной.
Если она равна false значит нужно присвоить ей true и поменять цвет значка, так же нужно поменять значение в регуляторе громкости на нуль, то есть отключаем звук. И в противном случае делаем все наоборот, в конце с помощью свойства muted меняем звук у песни.

  1. $('.mute').on('click', function(){
  2. if (Song){
  3. if (mute == false){
  4. mute = true;
  5. $('.mute').css({'color':'#C0392B'});
  6. $('.volume').val(0);
  7. }
  8. else {
  9. mute = false;
  10. $('.mute').css({'color':'#ECF0F1'});
  11. $('.volume').val(100);
  12. }
  13. Song.muted = mute;
  14. }
  15. });

Запускаем и проверяем, звук включается и выключается при нажатии на ноту =)
Идем дальше, теперь меняем громкость.
Тут мы пишем обработчик события - изменение значения input с классом .value.

  1. $('.value').on('change', function(){

  2. });

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

  1. $('.volume').on('change', function(){ 
  2. var 
  3. val = $(this).val();
  4. });

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

  1. $('.volume').on('change', function(){
  2. var
  3. val = $(this).val();
  4. if (Song){

  5. }
  6. });

Теперь мы знаем кому менять звук. В этом случае переменной volume нужно присвоить значение - переменная val деленное на сто. Почему на сто? Потому что свойство аудио и видео-объектов volume изменяется от 0 до 1, а значение в инпуте у нас меняется от 0 до 100. Дальше мы у нашего аудио-объекта меняем громкость на значение переменной volume:

  1. $('.volume').on('change', function(){ 
  2. var 
  3. val = $(this).val();
  4. if (Song){ 
  5. volume = val/100; 
  6. Song.volume = volume; 
  7. });

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

  1. $('.volume').on('change', function(){ 
  2. var 
  3. val = $(this).val();
  4. if (Song){
  5. volume = val/100; 
  6. Song.volume = volume; 
  7. if (val == 0){ 
  8. mute = true;
  9. $('.mute').css({'color':'#C0392B'}); 
  10. else if (val > 0){ 
  11. mute = false;
  12. $('.mute').css({'color':'#ECF0F1'}); 
  13. });

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

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

Запускаем и проверяем, все работает =)

Заключение

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

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