Pause audio on click and change image of button
<p>I've not found any solution to having a single button change img when clicked, play audio, and then pause and return to original img on click again. I can get the img to swap, and audio to start with the code below, but no joy pausing it. </p>

<p><a href="https://jsfiddle.net/se4xqzsm/" rel="nofollow">https://jsfiddle.net/se4xqzsm/</a>
This is my Javascript</p>

<pre><code>    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();

}
</code></pre>

<p>HTML
    </p>

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

<p>CSS</p>

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

}
</code></pre>