title: How can I make my button toggle a mute and unmuted symbol as well as unmute and mute audio?
body: <p>My button will mute and unmute audio, however I can't figure out how to make the image change so whilst unmuted it shows a unmuted symbol and when muted shows an muted symbol. Here's my current code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function toggleMuted() {
    var sound = document.getElementById('sound');
    sound.muted = !sound.muted;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="mutebut"&gt;
    &lt;button id="soundbutton" onclick="toggleMuted()"&gt;Mute|Unmute&lt;/button&gt;
  &lt;/div&gt;
  &lt;audio id="sound" autoplay="autoplay" loop="loop"&gt;
    &lt;source src="../resources/audio/junglenoise.wav" type="audio/wav"&gt;
  &lt;/audio&gt;</code></pre>
  </div>
  </div>
  </p>