拼搶通過回形針上傳一首歌曲，存儲在S3中，有jPlayer（紅寶石）發揮

我用下面的掙扎：通過回形針拼搶通過回形針上傳一首歌曲，存儲在S3中，有jPlayer（紅寶石）發揮

在我的webapp，我上傳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

我也允許在我的PARAMS的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 -->

在我看來，在<％= @ episode.mp3.url％>可以在這裏是問題，再次，我已經嘗試用隨機URL存儲MP3文件，而且運作良好。

對此的任何想法將不勝感激。

在此先感謝。

來源

2016-12-03 Boris SB

您是否試過'@ episode.mp3.url'並直接在瀏覽器中打開它？可能將mp3存儲爲私人對象。 –

當我嘗試這個時，文件路徑顯示是的，所以我猜測mp3對象是可訪問的。 –

問題解決了，最後！

這是一段比你需要使用它的腳本！

<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>

來源

2016-12-03 14:59:54

拼搶通過回形針上傳一首歌曲，存儲在S3中，有jPlayer（紅寶石）發揮

回答

相關問題