javascript - 音频播放或暂停时切换图标

Question

问题

我有一个点击处理程序，旨在删除 .fa-pause 类，然后在音频暂停时添加 .fa-play 类(并且反之亦然)。但是，直到我第二次单击播放按钮时它才会执行此操作。

脚本.js

var audio = document.getElementById("painter");

$(".audio__play").click(function(){
        if (audio.paused == true) {
            $(this).removeClass("fa-pause");
            $(this).addClass("fa-play");
            audio.play();
        } else {
            $(this).removeClass("fa-play");
            $(this).addClass("fa-pause");
            audio.pause();
        }
});

Answer 1

我只是猜测这个。您可能将要使用的图标与音频播放状态混淆了。

例如，当 audio.paused === true 时，您将使用 audio.play() 播放音频。此时您的按钮图标不应该更改为暂停图标吗？如果是，那么当您暂停音频时，您应该删除 fa-play 并添加 fa-pause，反之亦然。

这对你有用吗？

var audio = document.getElementById("painter");

$(".audio__play").click(function(){
    if (audio.paused == true) {
        // Audio is going to play so we set the
        // pause icon on the button.
        $(this).removeClass("fa-play");
               .addClass("fa-pause");

        audio.play();
    } else {
        // Audio is going to pause so we set the
        // play icon on the button.
        $(this).removeClass("fa-pause");
               .addClass("fa-play");
        audio.pause();
    }
});