Javascript 音频播放暂停切换按钮

如何使一个svg图像在悬停和单击时稍微改变颜色切换到另一个svg图像，然后再次单击可切换回原始图像（相同的悬停效果）。单击时，应播放/暂停源音频文件

正文{
背景：黑色；
}

---

我添加了jQuery来播放和暂停音频，隐藏和显示按钮

$（“#播放”）。单击（函数（）{
$（“#音频文件”）.trigger（'play'）；
$（this.hide（）；
$（“#暂停”）.show（）；
});
$（“#暂停”）。单击（函数（）{
$（“#音频文件”）.trigger（'pause'）；
$（this.hide（）；
$（'#play'）.show（）；
});
正文{
背景：#242626
}
B.布洛克{
边框：6px实心#181919；
背景：#181919；
}
B.区块B{
边框：6px实心#2c3030；
背景#2c3030；
显示：内联块；
保证金：8px 8px 8px 8px；
}
B.blockC{
边框：6px实心#242626；
背景：#242626；
}
.标题悬停{
边框：4px实心透明；
宽度：200px；
身高：301px；
显示：块；
}
.titleHover>img{
最大宽度：100%；
身高：100%；
}
.标题悬停：悬停{
边框颜色：#49bdba；
}
a:链接{
颜色：#49bdba；
背景：透明；
}
a:参观了{
颜色：#49bdba；
}
a:悬停{
颜色：#49bdba；
背景：透明；
}
a:主动的{
}
.sBC{
显示：内联块；
光标：指针；
}
.sBB1、.sBB2、.sBB3{
宽度：35px；
高度：5px；
背景色：#333；
利润率：6px0；
过渡：0.4s；
}
/*旋转第一根杆*/
.change.sBB1{
-webkit变换：旋转（-45度）平移（-9px，6px）；
变换：旋转（-45度）平移（-9px，6px）；
}
/*淡出第二条*/
.change.sBB2{
不透明度：0；
}
/*旋转最后一条*/
.change.sBB3{
-webkit变换：旋转（45度）平移（-8px，-8px）；
变换：旋转（45度）平移（-8px，-8px）；
}
保险商实验室{
背景色：#181919；
列表样式类型：无；
保证金：0；
填充：1；
}
.btn中学{
颜色：#fff；
背景色：#242626；
边框颜色：#242626；
}
.btn次要：焦点{
盒影：0.3pxRGBA（0,0,0,0）；
}
.封锁{
显示：内联块；
}
.底杆{
底部：0；
左：0；
位置：固定；
右：0；
文本对齐：居中；
}
姆布顿霍夫先生{
填充：#49bdba；
光标：指针；
}
.mbuttonhover:悬停{
填充：rgb（36100,98）；
}
我想您需要javascript来切换按钮图像。