抓取通过 Paperclip 上传的歌曲，存储在 S3 中，使用 jPlayer (Ruby) 播放答案

【问题标题】：Grabbing a song uploaded via Paperclip, stored in S3, played with jPlayer (Ruby)抓取通过 Paperclip 上传的歌曲，存储在 S3 中，使用 jPlayer (Ruby) 播放
【发布时间】：2016-12-03 11:00:19
【问题描述】：

我正在努力解决以下问题：

在我的 web 应用程序中，我通过回形针上传 mp3 文件（或 mpeg），它在本地工作。我还将上传与 Amazon S3 链接，它也可以工作（我可以在我的存储桶中看到上传的歌曲，服务器端没有错误）。

所以，上传部分工作正常。

现在，我很难“抓取”我的音频文件并通过基于 jQuery 的媒体播放器 jPlayer 播放它们。

我用 URL 测试了播放器，效果很好。

这是我所做的，我正在使用 ruby 2.3.0 和 Rails 5。

型号：

class Episode < ApplicationRecord
  belongs_to :podcast

  has_attached_file :episode_thumbnail, styles: { large: "1000x1000#", medium: "550x550#" }
  validates_attachment_content_type :episode_thumbnail, content_type: /\Aimage\/.*\z/

  has_attached_file :mp3
  validates_attachment :mp3, :content_type => { :content_type => ["audio/mpeg", "audio/mp3"] }, :file_name => { :matches => [/mp3\Z/]}
end

我也允许在我的参数中使用 mp3：

控制器：

def episode_params
    params.require(:episode).permit(:title, :description, :episode_thumbnail, :mp3)
end

我的表单如下所示：

<div class="field">
        <%= f.label :mp3 %><br>
        <%= f.file_field :mp3 %>
</div>

最后，这是我与 jPlayer 一起使用的脚本，这就是我认为有问题的地方，我无法弄清楚：

<script>
 $(document).ready(function(){
  $("#jquery_jplayer_1").jPlayer({
   ready: function () {
    $(this).jPlayer("setMedia", {
        mp3: "<%= @episode.mp3.url %>";
    });
   },
   swfPath: "/js",
   supplied: "mp3"
  });
 });
</script>

播放器的视图如下所示：

<!-- jPlayer -->
    <div id="jquery_jplayer_1" class="jp-jplayer"></div>
    <div id="jp_container_1" class="jp-audio">
        <div class="jp-type-single">
            <div class="jp-gui jp-interface">
                <div class="jp-controls">
                    <li><a href="javascript:;" class="jp-play" tabindex="1">&#333333;</a></li>
                    <li><a href="javascript:;" class="jp-pause" tabindex="1">&#333333;</a></li>
                    <li><a href="javascript:;" class="jp-mute" tabindex="1">&#333333;</a></li>
                    <li><a href="javascript:;" class="jp-unmute" tabindex="1">&#333333;</a></li>
                </div>

                <div class="jp-progress">
                    <div class="jp-seek-bar">
                        <div class="jp-play-bar"></div>
                    </div>
                </div>

                <div class="jp-volume-bar">
                    <div class="jp-volume-bar-value"></div>
                </div>

                <div class="jp-time-holder">
                    <div class="jp-current-time"></div>
                </div>
            </div>

            <div class="jp-no-solution">
                <span>Update Required</span>
                To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
            </div>
        </div>
    </div>
<!-- end jPlayer -->

在我看来，可能是这里的问题，我再次尝试使用随机 URL 存储 MP3 文件，并且效果很好。

对此的任何想法将不胜感激。

提前致谢。

【问题讨论】：

你试过得到@episode.mp3.url并直接在浏览器中打开吗？可能是作为私有对象存储的 mp3。
当我尝试这个时文件路径显示是，所以我猜 mp3 对象是可访问的。

标签： jquery ruby-on-rails amazon-s3 paperclip jplayer

【解决方案1】：

问题终于解决了！

这是运行它所需的一段脚本！

<script>
 $(document).ready(function() {

  $("#jquery_jplayer_1").jPlayer({
    ready: function(event) {
      $(this).jPlayer("setMedia", {
        mp3: "<%= @episode.mp3.url %>",
      });
    },
    swfPath: "http://jplayer.org/latest/dist/jplayer",
    supplied: "mp3, oga",
    wmode: "window",
    useStateClassSkin: true,
    autoBlur: false,
    smoothPlayBar: true,
    keyEnabled: true,
    remainingDuration: true,
    toggleDuration: true
  });
});
</script>

【讨论】：