Question

当我点击图片时，我有一个代码开始播放音频。我需要帮助来编辑它。我想这样做，当我点击图像它应该开始播放音频，但也将图像更改为另一个。你知道怎么做吗？

代码：

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
      function playSound(el,soundfile) {
          if (el.mp3) {
              if(el.mp3.paused) el.mp3.play();
              else el.mp3.pause();
          } else {
              el.mp3 = new Audio(soundfile);
              el.mp3.play();
          }
      }
    </script>
  </head>
<body>
<span id="dummy" onclick="playSound(this, 'http://listen.shoutcast.com/newfm128mp3');">
  <img src="https://static.wixstatic.com/media/e2aefa_1969d5f605404431bb558b4ff9e60966~mv2.png/v1/crop/x_10,y_33,w_52,h_51/fill/w_52,h_51,al_c/e2aefa_1969d5f605404431bb558b4ff9e60966~mv2.png" name="Bottom-1" width="50" height="45" border="0" id="Bottom-1"/>
</span>
</body>
</html>

Answer 1

尝试这样的事情：

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
      //Create new function that will update the image source on click.
      function updateImage(el, soundfile) {
          //Determine if music is playing or paused then adjust image source accordingly.
          if(soundfile.mp3.paused) {
              el.src = "pausedImageSrc";
          } else {
              el.src = "playImageSrc";
          }
      };

      function playSound(el,soundfile) {
          if (el.mp3) {
              if(el.mp3.paused) el.mp3.play();
              else el.mp3.pause();
          } else {
              el.mp3 = new Audio(soundfile);
              el.mp3.play();
          }
          //Call new function made whenever the sound is toggled.
          updateImage(document.getElementById("Bottom-1"), el);
      };
    </script>
  </head>
<body>
<span id="dummy" onclick="playSound(this, 'http://listen.shoutcast.com/newfm128mp3');">
  <img src="https://static.wixstatic.com/media/e2aefa_1969d5f605404431bb558b4ff9e60966~mv2.png/v1/crop/x_10,y_33,w_52,h_51/fill/w_52,h_51,al_c/e2aefa_1969d5f605404431bb558b4ff9e60966~mv2.png" name="Bottom-1" width="50" height="45" border="0" id="Bottom-1"/>
</span>
</body>
</html>

我只是添加了一个名为updateImage的新函数，根据音频是否暂停来更改图像src。

JSFiddle：https://jsfiddle.net/b0wgh4em/1/

播放按钮动画

1 个答案: