Javascript声音开始/停止和图像更改Part2

我想有一个小图像，当点击播放声音和改变到不同的图像。当按钮再次点击时，它会变回以前的图像并停止声音。

你可以把它想象成一个表示"开始"的按钮。当点击"开始"时，它循环播放声音并改变为"停止"，当点击"停止"时，它回到开始，声音停止播放。

我试着使用这个代码，它完美地为图像工作，但我似乎不能得到不同的声音播放2个图像。

Javascript声音开始/停止和图像更改

我还找到了单独的代码来播放和停止这个脚本的声音:

<script>
     $(document).ready(function() {
    var playing = false;
    $('a#button').click(function() {
        $(this).toggleClass("down");
        if (playing == false) {
            document.getElementById('player').play();
            playing = true;
            $(this).text("stop sound");
        } else {
            document.getElementById('player').pause();
            playing = false;
            $(this).text("restart sound");
        }

    });
});
  </script>
<div>
<a id="button">play sound</a> 
                <audio id="player" src="mysound.mp3" preload="auto"></audio>

我可以把这两个组合在一起吗?或者我没有正确使用第一个javascript代码?

<p>
   <a href="#" id="button"> <i class="fa fa-play fa-lg" aria-hidden="true"></i></a>
</p>
<audio id="player" src="http://soundbible.com/mp3/kids-record-player-daniel_simon.mp3" preload="auto"></audio>

  var playing = false;
  $('#button').click(function() {
    if (playing == false) {
      document.getElementById('player').play();
      playing = true;
      $(this).find('i').removeClass('fa-play');
      $(this).find('i').addClass('fa-pause');
    } else {
      document.getElementById('player').pause();
      playing = false;
      $(this).find('i').removeClass('fa-pause');
      $(this).find('i').addClass('fa-play');
    }
  });

 <audio name="player" src="http://soundbible.com/mp3/kids-record-player-daniel_simon.mp3" preload="auto" data-playing="false"></audio>

    var $button = $(this), // get the button
        $player = $button.next('[name=player]'); // button and player are siblings
    if ($player.data('playing') == false) {
      $player[0].play();
      $player.data('playing', true);
      ...
    } else {
      $player[0].pause();
      $player.data('playing', false);
      ...
    }