나는 다음과 사투를 벌인하고 jPlayer (루비)와 함께 연주 S3에 저장된 종이 클립을 통해 업로드 된 노래,

Question

잡아 :에 작동 클립을 통해 내 웹 애플리케이션에서

를, 내가 업로드하고 mp3 파일 (또는 MPEG)을, 노동 조합 지부. 나는 또한 Amazon S3와 업로드를 연결하고 있는데, 이것은 또한 작동한다 (나는 버킷에 업로드 된 노래를 볼 수있다. 서버 측에 오류가 없다).

업로드 부분이 정상적으로 작동합니다.

이제 오디오 파일을 "잡아"jPlayer (jQuery 기반 미디어 플레이어)를 통해 재생하는 데 어려움을 겪고 있습니다.

URL을 사용하여 플레이어를 테스트했는데 완벽하게 작동합니다. 여기

내가, 내가 루비 2.3.0를 사용하고 수행 및 레일 한 것입니다 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 

내 양식은 다음과 같습니다

,536

이

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

플레이어의보기는 다음과 같습니다 : 뭔가 잘못은 내가 알아낼 수있을 것 같아요 곳결국

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

, 여기 그건 내가 jPlayer으로 사용하고있는 스크립트이며, :

제 생각에는

<!-- 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 %> 여기에 문제가 될 수있다, 다시 한번, 나는 MP3 파일을 저장하는 임의의 URL을했는데, 한 그것은 잘 작동 .

이 문제에 대한 의견은 크게 부탁드립니다.

미리 감사드립니다.

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