在 Rails 中播放上传的音乐

Question

我有一个允许用户上传音乐的应用程序，但我在设置允许他们播放该音乐的播放器时遇到了问题。

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

<% @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（URL 的 MP3 文件）和 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) 播放器的控件将控制当前播放的曲目

Answer 1

除了使用audio_tag as Antarr Byrd has suggested, you can use Javascript to manipulate the media as 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/ 目录中的文件名。

Answer 2

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

对于 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.

在 Rails 中播放上传的音乐

Play uploaded music in Rails

html

javascript

audio

ruby-on-rails

mediaelement.js