Andrew
Andrew

Reputation: 472

Play uploaded music in Rails

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, 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

Upvotes: 0

Views: 1191

Answers (2)

osxi
osxi

Reputation: 278

In addition to using audio_tag as Antarr Byrd has suggested, you can use Javascript to manipulate the media as described here.

For example, you could use the following:

<%= audio_tag @track.path, id: 'player' %>

<button id="play">Play</button>
<button id="pause">Pause</button>

With this accompanying Javascript:

  $('#play').click(function() {
    $('#player').get(0).play();
  });

  $('#pause').click(function() {
    $('#player').get(0).pause();
  });

One thing to note is that in the case of my example, @track.path refers to the name of the file in the /public/audios/ directory.

Upvotes: 2

trh
trh

Reputation: 7339

If you want a full-featured player, then mediaelement.js is a good way to go, as it has fallback players for older browsers. Note that you do not have to use the rails, it's essentially just a wrapper for the js itself. That's up to you and how you want your application assets to be used/stored/called.

For BASIC html5 audio output, this is what I would:

  1. Create a button with a data attribute of file source
  2. Use jquery to grab the click event when a user clicks the button
  3. Build an audio tag using the data attribute url with the autoplay option enabled (so it starts playing as soon as it's loaded)

So for a code example:

<button class="audioplay au-<%= upload.id %> btn btn-default" data-audiofile="/music.mp3">
  Play Now
</button>

<script>
  $(".audioplay").on("click", function(){
    var source = $(this).data("audiofile");
    var player = '<audio class="audioplayer" src="'+source+'" controls autoplay></audio>';
    $(this).after(player);
  });
</script>

Obviously, this is really really bare bones... it doesn't protect from clicking play multiple times, or removing any other players when a different song is selected, but those are things you can handle in javascript.

Upvotes: 2

Related Questions