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

Answer 2

像这样修改你的javascript：

function aud_play_pause() {
  var myAudio = document.getElementById("myAudio");
  var myButton = document.getElementsByClassName("soundButton");
  if (myAudio.paused) {
    myAudio.play();
    myButton.style.background="background-image: url('image/speakerIconPause.png')";
  } else {
    myAudio.pause();
    myButton.style.background="background-image: url('image/speakerIconPlay.png')";
  }
}

当然你需要两张背景图片：

speakerIconPause.png
speakerIconPlay.png

Answer 3

你可以这样做：

<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");
  var button = document.getElementsByClassName('soundButton')[0];
  if (myAudio.paused) {
    myAudio.play();
    button.classList.remove('paused');
    button.classList.add('playing');
  } else {
    myAudio.pause();
    button.classList.remove('playing');
    button.classList.add('paused');
  }
}
</script>

有这些风格：

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

Answer 4

只需要两种样式来实现您想要实现的不同外观。然后使用JQuery来使用右侧。

例如

$('#button).removeClass('off').addClass('on')

反之亦然

打开和关闭音乐按钮的图像

4 个答案: