在 Rails 中播放上传的音乐答案

【问题标题】：Play uploaded music in Rails在 Rails 中播放上传的音乐
【发布时间】：2015-09-03 01:46:47
【问题描述】：

我有一个允许用户上传音乐的应用程序，但我无法设置一个允许他们播放音乐的播放器。

在用户的页面上，这是他/她的热门曲目的简化示例：

<% @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 %>

每首曲目都有几个属性，包括但不限于：title（不言自明）、album_id（每首曲目都属于专辑）、file_url（曲目的 MP3 文件的 URL）、和album_position（专辑中曲目的顺序）。

我希望能够单击每个曲目的.btn-play 按钮并播放相应的音频。理想情况下，我还会在页面底部有一个专用播放器，它可以完全控制暂停、搜索、调整音量和显示当前播放歌曲的信息。

该播放器的简化版本如下所示：

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

我不太熟悉 Javascript，或者如何使用 .play() 或 .pause() 等方法。我已经查看了mediaelement_rails gem，但我不确定这在这种情况下是否有用。总而言之，我将如何连接轨道以便：

1) 当我点击.btn-play 按钮时，它会播放曲目

2) 曲目的信息将填充到播放器中的相应信息

3) 播放器的控件将控制当前播放的曲目

【问题讨论】：

为什么不使用audio_tag？

标签： javascript ruby-on-rails html audio mediaelement.js

【解决方案1】：

如果您想要一个功能齐全的播放器，那么 mediaelement.js 是一个不错的选择，因为它为旧版浏览器提供了备用播放器。请注意，您不必使用 rails，它本质上只是 js 本身的包装器。这取决于您以及您希望如何使用/存储/调用您的应用程序资产。

对于 BASIC html5 音频输出，我会这样做：

创建一个带有文件源数据属性的按钮
当用户点击按钮时，使用 jquery 抓取点击事件
使用启用了自动播放选项的数据属性 url 构建音频标签（因此它在加载后立即开始播放）

所以对于一个代码示例：

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

显然，这真的很简单......它不能防止多次点击播放，或者在选择不同的歌曲时删除任何其他播放器，但这些都是您可以在 javascript 中处理的事情。

【讨论】：

感谢您的帮助！为了利用“全功能播放器”，我将如何将播放器连接到 mediaelement_rails？我已经在 application.js 中包含了 gem 并需要资产，但在这种情况下我知道该怎么做

【解决方案2】：

除了像 Antarr Byrd 建议的那样使用 audio_tag 之外，您还可以使用 Javascript 以 described here 来操作媒体。

例如，您可以使用以下内容：

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

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

使用随附的 Javascript：

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

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

需要注意的是，在我的示例中，@track.path 指的是/public/audios/ 目录中的文件名。

【讨论】：