css - 更改我的音乐按钮打开和关闭时的图像

Question

我的页面上有一个按钮可以打开和关闭音乐我已经用 css 设置了它的样式以显示自定义图像...我可以在打开和关闭时更改此按钮的图像吗 谢谢

这是我的音频代码

<audio id="myAudio"
                    <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4"
         type='audio/mp4'>
                    <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga"
         type='audio/ogg; codecs=vorbis'>
                    Your user agent does not support the HTML5 Audio element.
                    </audio>
                    <script>
function aud_play_pause() {
  var myAudio = document.getElementById("myAudio");
  if (myAudio.paused) {
    myAudio.play();
  } else {
    myAudio.pause();
  }
}
</script>

这是我的html按钮

<button class="soundButton" type="button" onclick="aud_play_pause()"></button>

这是我的CSS样式

.soundButton{
    width:23px;
    height:18px;
    border:none;
    background:url(../../images/speakerIcon.png);
    padding:0;
    margin:0;
}

Answer 1

你能试试这个吗，

function aud_play_pause(d) {
  var myAudio = document.getElementById("myAudio");
  if (myAudio.paused) {
     d.className = 'soundButton';
    myAudio.play();
  } else {
     d.className = 'soundOffButton';
    myAudio.pause();
  }
}

HTML:

<button class="soundButton" type="button" onclick="aud_play_pause(this)"></button>

CSS:

.soundOffButton{
    width:23px;
    height:18px;
    border:none;
    background:url(../../images/speakerIconOFF.png);
    padding:0;
    margin:0;
}