Javascript 单击时暂停音频并更改按钮的图像

我还没有找到任何解决办法，让一个按钮改变img点击时，播放音频，然后暂停，并返回到原来的img再次点击。我可以用下面的代码来交换img和音频，但是暂停它并没有什么乐趣

这是我的Javascript

    function changeImage() {
    var image = document.getElementById('player');
  if (image.src.match("pauseicon")) {
    image.src = "http://igor.gold.ac.uk/~tprat001/fp_html/playicon.png";
} else {
    image.src = "http://igor.gold.ac.uk/~tprat001/fp_html/pauseicon.png";
}
}
    function play(){
    var audio = document.getElementById("audio");

    audio.play();

}

HTML

---

您还需要将

pause（）

方法添加到函数中

var playing = false;
function action(){
    var audio = document.getElementById("audio");
    if(playing === false){
        audio.play();
        playing = true;
    }else{
        audio.pause();
        playing = false;
    }
}

运行下面的代码片段以查看所有操作

#音频播放器{
位置：绝对位置；
z指数：100；
光标：指针；
高度：80px；
宽度：80px；
边界半径：50%；
背景色：黑色；
}
#音频播放器：悬停{
-moz盒阴影：0 20px#6854e7；
-网络工具包盒阴影：0 20px#6854e7；
盒影：0px 0px 20px#6854e7；
}

函数changeImage（）{
var image=document.getElementById（'player'）；
if（image.src.match（“pauseicon”））{
image.src=”http://igor.gold.ac.uk/~tprat001/fp_html/playcon.png”；
}否则{
image.src=”http://igor.gold.ac.uk/~tprat001/fp_html/pauseicon.png”；
}
}
var=false；
函数动作（）{
var audio=document.getElementById（“音频”）；
如果（播放===错误）{
音频播放（）；
玩=真；
}否则{
audio.pause（）；
玩=假；
}
}

谢谢你，保罗-有没有办法把它做成一个按钮？这是可行的，但我现在展示两个buttons@Oliverater是的，看更新的帖子。我更改了代码，因此如果声音正在播放，您单击“暂停”，否则它将播放。运行代码片段以在操作中查看它这是fab Paul，是的，这现在更有意义了，再次感谢您！

#audioplayer{
position:absolute;
z-index: 100;
cursor: pointer;
height: 80px;
width: 80px;
border-radius: 50%;
background-color:#6854e7;

}

var playing = false;
function action(){
    var audio = document.getElementById("audio");
    if(playing === false){
        audio.play();
        playing = true;
    }else{
        audio.pause();
        playing = false;
    }
}