I have an app which allows users to upload music, but I'm having trouble setting up a player which allows them to then play that music.

On a user's page, this is a simplified example of his/her top tracks:

```
<% @top_tracks.each do |track| %>
  <div class="top-track">
    <button class="btn-play">
      <i class="icon-play"></i>
    </button>
    <span><%= track.title %></span>
  </div>
<% end %>

```

Each track has several properties, including but not limited to: `title` (self-explanatory), `album_id` (every track belongs to an album), `file_url` (URL of the MP3 file for the track), and `album_position` (order of the track within the album).

I would like to be able to click the `.btn-play` button for each track and have the corresponding audio play. Ideally, I would also have a dedicated player at the bottom of the page with full controls to pause, seek, adjust volume, and display the currently-playing song's information.

A simplified version of that player would look like this:

```
<div class="player">
  <button class="play">
    <i class="icon-play"></i>
  </button>
  <button class="pause">
    <i class="icon-pause"></i>
  </button>
  <div>
    <div class="now-playing">[currently playing track title would go here]</div>
    <div class="seekbar"></div>
  </div>
  <div>
    <button class="mute">
      <i class="icon-mute"></div>
    </button>
  </div>
</div>

```

I'm not overly familiar with Javascript, or how to use methods such as `.play()` or `.pause()`. I have looked into the [mediaelement\_rails gem](https://github.com/tobsch/mediaelement_rails), but I'm not sure if that would be useful in this case. To summarize, how would I hook up the tracks so that:

1) when I click the `.btn-play` button it plays the track

2) the track's info would populate the appropriate info in the player

3) the player's controls would control the currently-playing track