Rails 4将多个音频文件添加到audio_tag

时间:2015-10-31 05:35:24

标签: javascript ruby-on-rails audio

因此,对于我正在研究的项目的一部分,我正在尝试构建一个轨道播放列表。我使用MediaElement.js创建音频播放器,使用mep-feature-playlist创建播放列表。我能够将我想要的所有音频文件加载到我的Rails应用程序中,但它们都使用实际文件名Track 1.m4a而不是曲目本身的名称Track 1进行渲染。我知道如果我只使用一个音频文件,我可以使用title:属性来设置轨道的标题。我的问题是,如何在单个audio_tag中为多个曲目添加多个标题?如果我创建单独的audio_tags MediaElement.js和mep-feature-playlist将创建单独的音频播放器。这就是我的代码现在的样子:

播放列表/ show.html.erb:

<h1>Playlist Example</h1>

<%= audio_tag("Track 1.m4a", "Track 2.m4a", "Track 3.m4a", "Track 4.m4a", "Track 5.m4a", "Track 6.m4a", "Track 7.m4a") %>

<script>
    $(function(){
      $('audio,video').mediaelementplayer({
          loop: true,
          shuffle: true,
          playlist: true,
          audioHeight: 30,
          playlistposition: 'bottom',
          features: ['playlistfeature', 'prevtrack', 'playpause', 'nexttrack', 'loop', 'shuffle', 'playlist', 'current', 'progress', 'duration', 'volume']
      });
    });
</script>

1 个答案:

答案 0 :(得分:0)

audio_tag帮助程序似乎不支持在提供多个音频源时设置标题。但是你写自己的帮手。

鉴于来源

sources = [{src: path_to_audio('1.mp3'), title: 'soo'}, {src: path_to_audio('2.mp3'), title: 'haa'}]

您可以编写以下帮助程序:

# Methods added to this helper will be available to all templates in the application.
module ApplicationHelper
  def audio_tag_multiple(sources)
    content_tag(:audio) do
      sources.map do |source|
        safe_concat(tag :source,source, true)
      end
    end
  end
end

这将产生类似于下面给出的标记:

<audio>
  <source src="1.mp3" title="soo">
  <source src="2.mp3" title="haa">
</audio>

希望有所帮助