title: Why isn't my audio player visible, and how can i fix it?
body: <p>I made a playlist of songs with my <code>&lt;a&gt;</code> tags, and i made a <strong><em>player</em></strong>, so when i click the item from list the player plays the song, but i can't see the player and control it, how can this be fixed, so i can see the player and still choose the song from the list? <em>(I did not style the audio player...)</em></p>
  
  <p>Here is my <strong>HTML</strong>:</p>
  
  <pre><code>&lt;audio preload="auto" src="#" autoplay="true"&gt;&lt;/audio&gt;
  
  &lt;a class="trigger" href="#" data-src="audio/song1.mp3"&gt;Song #1&lt;/a&gt;
  &lt;a class="trigger" href="#" data-src="audio/song2.mp3"&gt;Song #2&lt;/a&gt;
  &lt;a class="trigger" href="#" data-src="audio/song3.mp3"&gt;Song #3&lt;/a&gt;
  &lt;a class="trigger" href="#" data-src="audio/song4.mp3"&gt;Song #4&lt;/a&gt;
  </code></pre>
  
  <p>And the <strong>JQUERY</strong> i used for changing the source from audio tag</p>
  
  <pre><code>$('.trigger').on('click', function () {
      $('audio').prop('src', $(this).data('src'));
  });
  </code></pre>