Question

我没有找到任何解决方案，单击按钮更改img，播放音频，然后暂停并再次点击返回原始img。我可以让img进行交换，音频从下面的代码开始，但没有快乐暂停它。

https://jsfiddle.net/se4xqzsm/ 这是我的Javascript

    function changeImage() {
    var image = document.getElementById('player');
  if (image.src.match("pauseicon")) {
    image.src = "http://igor.gold.ac.uk/~tprat001/fp_html/playicon.png";
} else {
    image.src = "http://igor.gold.ac.uk/~tprat001/fp_html/pauseicon.png";
}
}
    function play(){
    var audio = document.getElementById("audio");

    audio.play();

}

HTML

  <img id="player" onclick="play();changeImage();" src="http://igor.gold.ac.uk/~tprat001/fp_html/playicon.png" /><audio id="audio" src="http://igor.gold.ac.uk/~tprat001/fp_html/whale.mp3" loop autoloop ></audio>

CSS

#audioplayer{
position:absolute;
z-index: 100;
cursor: pointer;
height: 80px;
width: 80px;
border-radius: 50%;
background-color:#6854e7;

}

Answer 1

您还需要将pause()方法添加到您的函数中。

var playing = false;
function action(){
    var audio = document.getElementById("audio");
    if(playing === false){
        audio.play();
        playing = true;
    }else{
        audio.pause();
        playing = false;
    }
}

运行下面的代码段以查看全部操作。

#audioplayer {
  position: absolute;
  z-index: 100;
  cursor: pointer;
  height: 80px;
  width: 80px;
  border-radius: 50%;
  background-color: black;
}

#audioplayer:hover {
  -moz-box-shadow: 0 0 20px #6854e7;
  -webkit-box-shadow: 0 0 20px #6854e7;
  box-shadow: 0px 0px 20px #6854e7;
}

<script>
  function changeImage() {
    var image = document.getElementById('player');
    if (image.src.match("pauseicon")) {
      image.src = "http://igor.gold.ac.uk/~tprat001/fp_html/playicon.png";
    } else {
      image.src = "http://igor.gold.ac.uk/~tprat001/fp_html/pauseicon.png";
    }
  }
  var playing = false;

  function action() {
    var audio = document.getElementById("audio");
    if (playing === false) {
      audio.play();
      playing = true;
    } else {
      audio.pause();
      playing = false;
    }
  }

</script>

<div id="audioplayer">

  <img id="player" onclick="action();changeImage();" src="http://igor.gold.ac.uk/~tprat001/fp_html/playicon.png" />
  <audio id="audio" src="http://igor.gold.ac.uk/~tprat001/fp_html/whale.mp3" loop autoloop></audio>

</div>

点击暂停音频并更改按钮图像

1 个答案: