title: How to load a mp3 link into an audio player on a click
body: <p>I'm trying to find a way to load an mp3 file when I click on a div called 'front-start-play' and loads the mp3 into <code>audio-player</code>. I'm not familiar with <code>data-rel</code> and I looked at other questions that are similar but they deal with the link of the url already in the code where as this is going to be used on a site with 10+ posts with different urls and need to be loaded into the play when they are clicked.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="front-start-play" data-rel="http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"&gt; Load "Song1" &lt;/div&gt;
  
  &lt;div class="audio-player-wrapper"&gt;
  &lt;div class="mejs__button mejs__group-left"&gt;
  &lt;div class="rewind-btn"&gt;
    &lt;button title="Rewind 15 seconds"&gt;15&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="playpause-btn"&gt;
    &lt;button title="Play" class="play" id="ppbtn"&gt;&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="forward-btn"&gt;
    &lt;button title="Forward 15 seconds"&gt;15&lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="current-time"&gt;00:00&lt;/div&gt;
  &lt;div class="duration-time"&gt;00:00&lt;/div&gt;
  &lt;div class="mejs__button mobile-mute"&gt;
  &lt;button class="mobile-mute-btn mobile-mute-off"&gt;&lt;/button&gt;
  &lt;/div&gt;
  &lt;audio width="100%" height="75px" id="audio-player" src="" type="audio/mp3" controls="controls"&gt;&lt;/audio&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(".front-start-play").click(function(){
  var mp3Url = $(this).data('rel');
  $("#audio-player").load();
  });
  </code></pre>