使用Javascript播放和暂停图像

我目前正在使用以下命令播放和暂停音乐曲目

function togglePlayPause() {
    var playpause = document.getElementById("playpause");
    if (audio.paused || audio.ended) {
        playpause.title = "pause";
        playpause.innerHTML = "pause";
        audio.play();
    } else {
        playpause.title = "play";
        playpause.innerHTML = "play";
        audio.pause();
    }
}

它工作得很好。再次按下按钮时，按钮上的文字显示“播放”，然后显示“暂停”

我想使用JavaScript将默认的浏览器播放按钮替换为一个图像，然后在再次按下时将该图像替换为另一个（暂停）图像

我想我需要为使用JavaScript播放和暂停图像添加一个额外的类

有人能帮我编辑代码吗？我必须使用图像，而不是现在使用的“播放”和“暂停”标题文本。

您可以定义使用图像作为背景的“播放”和“暂停”类。那就换个班吧

playpause.className = "myPauseClass"

---

嗯，我做得不对<代码>函数togglePlayPause（）{var playpause=document.getElementById（“playpause”）；if（audio.pause | | audio.end）{playpause.className=“PauseButton”；audio.play（）；}else{playpause.className=“PlayButton”；audio.pause（）；}并且我已经在css中设置了这两个类的样式，这是我的css:

.PlayButton{width:90px；height:89px；display:block；background:url（../img/play sm.png）不重复；border:none；}.PauseButton{width:90px；height:89px；display:block；background:url（../img/pause sm.png）不重复；border:none；}

我没有收到任何错误。按钮只是保持与浏览器默认按钮样式相同的样式。html是这样的：

奇怪。你能先试着设置背景颜色而不是背景图像，看看它是否有效吗？也许你的css不起作用。还有，你可以用代替。这太疯狂了。所以我的css因为某种原因不起作用，因为改变它的颜色也没有任何作用。另外，如果我使用而不是，那么什么都不会出现。啊。我真的很感谢你的帮助！