I have the jPlayer audio player working fine locally, but when I deploy to Heroku, it no longer works and I get the following error in Chrome's console:
Uncaught TypeError: Object [object Object] has no method 'jPlayer'
Here's the Javascript for jPlayer in my application.html.erb layout:
<script type="text/javascript">
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "http://test.com/song.mp3",
// m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
// oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
});
},
swfPath: "/javascriptipts",
supplied: "mp3, m4a, oga"
});
});
I'm noticing that the way the scripts are included seems to be working differently than it is on Heroku. For my local instance (which works) the scripts included look like this in the source:
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap-responsive.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/calls.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jplayer.blue.monday.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/main.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-alert.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-button.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-carousel.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-collapse.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-modal.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-popover.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-tab.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-transition.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.min.js?body=1" type="text/javascript"></script>
<script src="/assets/calls.js?body=1" type="text/javascript"></script>
<script src="/assets/custom.js?body=1" type="text/javascript"></script>
<script src="/assets/google-code-prettify/prettify.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.jplayer.min.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
On Heroku, where jPlayer is not working, the scripts loaded look like this in the source for some reason:
<link href="/assets/application-7d9d2071282c290d4dd4bb767188d15f.css" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/application-679ead39cc620e8b5be4723def8305ce.js" type="text/javascript"></script>
Here's how I include them in my application.html.erb layout:
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
Anyone have any thoughts what might be causing this and how I can fix it?
Thanks in advance!