Javascript 播放或暂停音频时切换图标 问题

我有一个click处理程序，用于删除

.fa pause

类，然后在音频暂停时添加

.fa play

类（反之亦然）。但是，直到我第二次单击“播放”按钮时，它才会执行此操作

scripts.js

---

这是一个非常简单的工作版本，你正在尝试做什么

我想你的问题是你正在按类选择某个东西。音频播放，然后更改它的类。我觉得这有点可疑。在我的示例中，我将选择器更改为ID选择器

“#音频播放”

---

如果你不能让它工作，你需要从你的页面上发布更多的代码。

这里有一个非常简单的工作版本，你正在尝试做什么

我想你的问题是你正在按类选择某个东西。音频播放，然后更改它的类。我觉得这有点可疑。在我的示例中，我将选择器更改为ID选择器

“#音频播放”

---

如果你不能让它工作，你需要从你的页面上发布更多的代码。

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

例如，当

audio.paused==true

时，您正在使用

audio.play（）

播放音频。此时按钮图标不应该更改为暂停图标吗？如果是，则在暂停音频时，应删除fa播放并添加fa暂停，反之亦然

这对你有用吗

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();
    }
});

---

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

例如，当

audio.paused==true

时，您正在使用

audio.play（）

播放音频。此时按钮图标不应该更改为暂停图标吗？如果是，则在暂停音频时，应删除fa播放并添加fa暂停，反之亦然

这对你有用吗

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();
    }
});

---

默认情况下音频暂停吗？在单击功能的开头添加一点日志输出，以查看它是否均匀触发，并查看状态。console.log（音频暂停）@Carlos2W是的，它被暂停以启动。@spozun当我运行console.log（audio.paused）时，它是真的只要事件正确触发，您可能想用.attr（“class”，“newClass”）替换remove&add class。它更强大一点，因为它从元素中删除了所有其他类，这可能会处理某种冲突。默认情况下音频暂停吗？在单击函数的开头添加一点日志输出，以查看它是否触发，并查看状态。console.log（音频暂停）@Carlos2W是的，它被暂停以启动。@spozun当我运行console.log（audio.paused）时，它是真的只要事件正确触发，您可能想用.attr（“class”，“newClass”）替换remove&add class。更强大的一点是，它从元素中删除了所有其他类，这可能会处理某种冲突。是的，这只是我在else语句中添加和删除的类的混淆。是的，这只是我在else语句中添加和删除的类的混淆。