Grabbing ein Lied über Paperclip hochgeladen, in S3 gespeichert, gespielt mit JPlayer (Rubin)

Question

ich mit dem folgenden bin zu kämpfen:

In meinem Webapp, ich MP3-Dateien bin das Hochladen (oder mpeg) über Büroklammer, die auf Werke lokal. Ich verbinde auch den Upload mit Amazon S3, was auch funktioniert (ich sehe in meinem Eimer die hochgeladenen Lieder, keine Fehler auf der Serverseite).

So funktioniert der Upload-Teil gut.

Jetzt habe ich es schwer, meine Audiodateien zu "greifen" und sie über jPlayer, einen jQuery-basierten Media Player, abzuspielen.

Ich habe den Player mit einer URL getestet, und es funktioniert einwandfrei. Hier

ist das, was ich getan habe, ich bin mit Rubin 2.3.0 und Rails 5.

Modell:

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 

Ich bin auch erlaubt, die mp3 in meinem params:

Controller:

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

Meine Form wie folgt aussieht:

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

Schließlich, hier ist das Skript, das ich mit JPlayer verwenden, und das ist, wo ich denke, es ist etwas nicht in Ordnung, dass ich nicht herausfinden kann:

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

Der Blick auf dem Spieler sieht wie folgt aus :

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

meiner Meinung nach kann die <% = @ episode.mp3.url%> wieder das Problem hier sein, einmal habe ich mit einem zufälligen URL versucht, eine MP3-Datei zu speichern, und es funktioniert gut .

Alle Gedanken dazu werden sehr geschätzt.

Vielen Dank im Voraus.

Answer 1

PROBLEM LÖSEN, ENDLICH!

Hier ist das Stück Skript, das Sie brauchen, um es laufen zu lassen!

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