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的网址）该曲目的文件）和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作为Antarr Byrd建议的内容之外，您还可以使用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/目录中文件的名称。

Answer 2

如果你想要一个功能齐全的播放器，那么mediaelement.js是一个很好的方法，因为它有旧版浏览器的后备播放器。请注意，您不必使用rails，它实际上只是js本身的包装器。这取决于您以及您希望如何使用/存储/调用您的应用程序资产。

对于BASIC html5音频输出，我就是这样：

创建一个数据属性为文件来源
当用户点击按钮
使用启用了自动播放选项的数据属性网址构建音频标记（因此它会在加载后立即开始播放）

所以对于一个代码示例：

<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中播放上传的音乐

2 个答案: