Смена иконки (реализация)

126

17 июля 2019, 16:20

Ниже код, в котором должна иконка microphone меняться на microphone-slash и наоборот в зависимости от режима отображения (воспроизведение или пауза).

Но этого не происходит. Не могу понять, в чём дело!

let play = document.querySelector('.play'); 
// создаем объект AUDIO  
const audio = new Audio(); 
 
// сразу выставляем уровень звука на 20%  
let volume = .2 
audio.volume = volume; 
 
// присваиваем объекту AUDIO трек  
audio.src = 'ytytytytytyt.ru:8040/…'; 
 
// показываем какой уровень выставлен  
document.querySelector('.vol').innerHTML = audio.volume * 10; 
 
// функция для понижения уровня звука  
document.querySelector('.volume-down').addEventListener('click', () => { 
  if (audio.volume !== 0) { 
    volume -= .1; 
    // метод .toFixed() нужен для того чтобы убрать  
    // все лшние цифры кроме первой после точки  
    audio.volume = volume.toFixed(1); 
    document.querySelector('.vol').innerHTML = audio.volume * 10; 
    audio.muted = false; 
  } 
}); 
document.querySelector('.volume-up').addEventListener('click', () => { 
  if (audio.volume !== 1) { 
    volume += .1; 
    audio.volume = volume.toFixed(1); 
    document.querySelector('.vol').innerHTML = audio.volume * 10; 
    audio.muted = false; 
  } 
}); 
 
// функция для полного отключения звука  
document.querySelector('.mute').addEventListener('click', () => { 
  audio.muted = audio.muted == false ? true : false; 
}) 
 
 
// функция для запуска и паузы музыки  
play.addEventListener('click', () => { 
  if (audio.paused) { 
    audio.play(); 
    play.classList.add('fa fa-microphone slash'); 
    play.classList.remove('fa fa-microphone'); 
  } else { 
    audio.pause(); 
    play.classList.remove('fa fa-microphone-slash'); 
    play.classList.add('fa fa-microphone'); 
  } 
})

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous" /> 
<!--кнопка запуска плеера она же и пауза--> 
<button class="play fa fa-microphone"></button> 
<!--кнопка понижения звук--> 
<button class="volume-down">-</button> 
<!--кнопка повышение звука--> 
<button class="volume-up">+</button> 
<!--уровень звука--> 
<span class="vol"></span> 
<!--кнопка отключения звука--> 
<button class="mute">Mute</button>

Answer 1

Убери fa

play.addEventListener('click', () => {
  if (audio.paused) {
    audio.play();
    play.classList.add('fa-microphone-slash');
    play.classList.remove('fa-microphone');
  } else {
    audio.pause();
    play.classList.remove('fa-microphone-slash');
    play.classList.add('fa-microphone');
  }
})

Пример наглядный... Что бы удалять и добавлять методом classList.add( надо писать class-Ы через запятую каждый класс отдельным аргументом.

А у тебя play.classList.remove('fa fa-microphone');

let play = document.querySelector('.play') 
let flag = true; 
play.addEventListener('click', () => { 
  if (flag === true) { 
    play.classList.remove('fa', 'pa'); 
    play.classList.add('zz', 'rr'); 
    flag = false; 
    console.log(play); 
  } else { 
    play.classList.add('fa', 'pa'); 
    play.classList.remove('zz', 'rr'); 
    flag = true; 
    console.log(play); 
  } 
})