Javascript 使用jquery为静音/取消静音音频播放器交换图像

单击img时，我需要更改图像icontrue，jpg和iconfalse.jpg，当我单击此图像中的另一个图像时，我需要返回icontrue.jpg

在iconfalse.jpg上设置图标时，我需要此功能：

document.getElementById('myaudio').muted = true;

当返回到icontrue.jpg时，我需要反转：

document.getElementById('myaudio').muted = false;

我尝试了10多种方法来构建这个脚本、在stackoverflow中搜索和其他方法，但不允许使用任何方法

我构建的所有方法都不会返回到原始图像，也不会取消音频静音。 谢谢你的回答

使用ico按钮代替图像：

<span data-audio="song1.ogg"></span> 
<span data-audio="song2.ogg"></span>

jQuery

---

你应该给我们一个脚本来帮助你。你在点击图标时注册了回调吗？你试过了吗：document.getElementById'myaudio.src=icontrue.jpg？$'img'。{'click'上：函数{var src=$this.attr'src'==='icontrue.jpg'？'iconfalse.jpg'：'icontrue.jpg'；$this.attr'src'，src；}；这是为图像changin，不工作我感谢你的脚本，但我不想要这个方法…我想要一个简单的显示按钮为我的背景音乐网站，当我点击图像，我想切换到第二个图像和->静音背景音乐，如果我单击第二张图片，我想返回显示第1张图片并取消背景音乐播放器的静音…@Marcingraiti，那么您将不得不显示比您更多的代码。你到底需要什么还不清楚。设置演示：jsbin.com或jsfiddle.net可能会有所帮助。

[data-audio]{
    cursor:pointer;
    display:inline-block;
    vertical-align:middle;
    width:20px;
    height:20px;
    background: url(ico-play.jpg);
}
[data-audio].stop{
    background: url(ico.stop.jpg);
}

var $btn  = $("[data-audio]"),
    AUDIO = new Audio();

$btn.click(function() {     
    $btn.not(this).removeClass('stop');
    $(this).toggleClass('stop');    
    AUDIO.src = $(this).data().audio;
    AUDIO[ $(this).hasClass('stop') ? "play" : "pause" ]();
});