点击播放/暂停按钮时切换Font Awesome图标实现方案咨询

你只需要在现有的losAudio_playPause函数里添加图标类名切换的逻辑即可，方案很简单：

修改后的完整JS代码： #

var losAudio = document.getElementById("losAudio");
// 获取按钮内的图标元素
var audioIcon = document.querySelector("#btn_playPause i");

function losAudio_playPause() {
  var isPaused = losAudio.paused;
  // 控制音频播放/暂停
  losAudio[isPaused ? "play" : "pause"]();
  
  // 切换图标类名
  if (isPaused) {
    // 播放状态：替换为暂停图标
    audioIcon.classList.remove("fa-music");
    audioIcon.classList.add("fa-pause");
  } else {
    // 暂停状态：换回音乐图标
    audioIcon.classList.remove("fa-pause");
    audioIcon.classList.add("fa-music");
  }
}

document.getElementById("btn_playPause").addEventListener("click", losAudio_playPause);

逻辑说明： #

1. 先通过querySelector获取按钮内的<i>图标元素，方便后续操作类名
2. 在点击函数中，根据音频当前的paused状态：
   • 如果原本是暂停状态（即将播放）：移除fa-music类，添加fa-pause类
   • 如果原本是播放状态（即将暂停）：移除fa-pause类，添加fa-music类

这样每次点击按钮，音频状态和图标就会同步切换了。

内容的提问来源于stack exchange，提问作者ToanBD