javascript - 在 Rails 中播放上传的音乐

Question

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

在用户的页面上，这是他/她的热门轨道的简化示例:

<% @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 ，但我不确定这在这种情况下是否有用。总而言之，我将如何连接 rails 以便:

1) 当我单击 .btn-play 按钮时，它会播放轨道

2) 轨道信息将填充播放器中的相应信息

3)播放器的控件将控制当前播放的轨道

Answer 1

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

对于 BASIC html5 音频输出，这就是我想要的:

1. 创建一个按钮，其数据属性为文件源
2. 使用jquery抓取用户点击按钮时的点击事件
3. 使用数据属性 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 中处理的事情。