javascript - 单击时暂停音频并更改按钮的图像

Question

我还没有找到任何解决方案来让单个按钮在单击时更改 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>