Reputation: 472
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
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
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:
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