title: How to use JavaScript to control audio element
body: <p>Firstly I'm trying not to use the default html5 standard controls and I'd be happy to use jQuery if possible but I've taken it out for now as I was unsure of what the problem is.</p>
  
  <p>At the moment I'm simply trying to have a play button which plays some music once clicked, which will change to a pause button. This pause button will then obviously pause the music once clicked.</p>
  
  <p>I will leave some annotation in so you can see some of the things I have tried. Currently the play button appears but nothing happens when it is clicked.</p>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;head&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="javascript/audio-controls.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="css/menu.css"&gt;
  &lt;/head&gt;
  
  &lt;div id="content-container"&gt;
       &lt;audio id="music"&gt;
       &lt;source src="media/mexico-music.mp3" type="audio/mpeg"/&gt;
       &lt;/audio&gt;
       &lt;button id="play-music-button" class="play"&gt;&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#play-music-button {
      height:60px;
      width: 60px;
      border: none;
      background-size: 50% 50%;
      background-position: center;
  }
  
  .play {
      background: url("../assets/play.png") no-repeat;
  }
  
  .pause {
      background: url("../assets/pause.png") no-repeat;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function() {
  var music = document.getElementById("music");
  var play_music_button = document.getElementById("play-music-button");
  
  function playAudio() {
      if (music.paused) {
          music.play();
          play_music_button.innerHTML = "Pause";
          /*play-music-button.className = "";
          play-music-button.className = "pause";*/
      } else {
          music.pause();
          play_music_button.innerHTML = "Resume";
          /*play-music-button.className = "";
          play-music-button.className = "play";*/
      }
      music.addEventListener('ended',function() {
          play_music_button.innerHTML = "Play";
      });
  }
  play-music-button.addEventListener("click", playAudio);
  });
  </code></pre>