我正在使用此代码播放/暂停背景音频。
<div class="music-box">
<audio id="losAudio" src="images/honcayeu.mp3"></audio>
<button id="btn_playPause">
<i class="fa fa-music"></i>
</button>
</div>
var losAudio = document.getElementById("losAudio");
function losAudio_playPause() {
var isPaused = losAudio.paused;
losAudio[isPaused ? "play" : "pause"]();
}
document.getElementById("btn_playPause").addEventListener("click",losAudio_playPause);
但是现在我想当点击按钮时,图标会变成fa-pause图标。能告诉我一个简单的解决方法吗?谢谢
3条答案
按热度按时间deyfvvtc1#
要在播放音频时将按钮的图标从fa-music更改为fa-pause,您可以修改losAudio_playPause函数以相应地更新按钮图标。
试试这个:
它的作用是检查音频当前是否暂停或播放,并使用三元运算符将按钮图标分别设置为fa-music或fa-pause。然后使用innerHTML属性使用新图标更新按钮的内容。
qyswt5oh2#
您需要在函数内部执行一个操作,尝试获取元素(添加一个ID)并更改i元素的类
pexxcrt23#
可以使用
classList
、add()
和remove()
:第二种方法是使用
className
: