使用jQuery交换图像以静音/取消静音音频播放器

Question

I need to change the image "icontrue,jpg" with "iconfalse.jpg" when click on the img, and when I click another in this image I need to return to icontrue.jpg ,

When icon set on "iconfalse.jpg" I require this function:

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

and when return to "icontrue.jpg" I require the reverse:

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

I try over 10 methods for build this script, search in stackoverflow and other, but nothing methods is allowed.

All methods that I build not return to original image and not unmute the audio. Thanks for answers.

Answer 1

jsBin demo

Instead of images use <span> for your ico buttons:

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

Now let's simply create our "Play / Stop" icons for our SPAN elements,
On SPAN click we'll than toggle the .stop class using jQuery

CSS

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

jQuery

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