jPlayer MP3 Issue

Discussion in 'JavaScript' started by Infranight, Jun 18, 2011.

  1. #1
    I can't seem to play MP3s with jPlayer, only OGG.
    Any ideas? My custom code is below:

    <script type="text/javascript">
    //<![CDATA[
    var audioPlaylist;
    var Playlist;
    jQuery(document).ready(function(){
    
        Playlist = function(instance, playlist, options) {
            var self = this;
    
            this.instance = instance; // String: To associate specific HTML with this playlist
            this.playlist = playlist; // Array of Objects: The playlist
            this.options = options; // Object: The jPlayer constructor options for this playlist
    
            this.current = 0;
    
            this.cssId = {
                jPlayer: "jquery_jplayer_",
                interface: "jp_interface_",
                playlist: "jp_playlist_"
            };
            this.cssSelector = {};
    
            jQuery.each(this.cssId, function(entity, id) {
                self.cssSelector[entity] = "#" + id + self.instance;
            });
    
            if(!this.options.cssSelectorAncestor) {
                this.options.cssSelectorAncestor = this.cssSelector.interface;
            }
    
            jQuery(this.cssSelector.jPlayer).jPlayer(this.options);
    
            jQuery(this.cssSelector.interface + " .jp-previous").click(function() {
                self.playlistPrev();
                jQuery(this).blur();
                return false;
            });
    
            jQuery(this.cssSelector.interface + " .jp-next").click(function() {
                self.playlistNext();
                jQuery(this).blur();
                return false;
            });
        };
    
        Playlist.prototype = {
            displayPlaylist: function() {
                var self = this;
                jQuery(this.cssSelector.playlist + " ul").empty();
                for (i=0; i < this.playlist.length; i++) {
                    var listItem = (i === this.playlist.length-1) ? "<li class='jp-playlist-last'>" : "<li>";
                    listItem += "<a href='#' id='" + this.cssId.playlist + this.instance + "_item_" + i +"' tabindex='1'>"+ this.playlist[i].name +"</a>";
    
                    // Create links to free media
                    if(this.playlist[i].free) {
                        var first = true;
                        listItem += "<div class='jp-free-media'>(";
                        jQuery.each(this.playlist[i], function(property,value) {
                            if(jQuery.jPlayer.prototype.format[property]) { // Check property is a media format.
                                if(first) {
                                    first = false;
                                } else {
                                    listItem += " | ";
                                }
                                listItem += "<a id='" + self.cssId.playlist + self.instance + "_item_" + i + "_" + property + "' href='" + value + "' tabindex='1'>" + property + "</a>";
                            }
                        });
                        listItem += ")</span>";
                    }
    
                    listItem += "</li>";
    
                    // Associate playlist items with their media
                    jQuery(this.cssSelector.playlist + " ul").append(listItem);
                    jQuery(this.cssSelector.playlist + "_item_" + i).data("index", i).click(function() {
                        var index = jQuery(this).data("index");
                        if(self.current !== index) {
                            self.playlistChange(index);
                        } else {
                            jQuery(self.cssSelector.jPlayer).jPlayer("play");
                        }
                        $(this).blur();
                        return false;
                    });
    
                    // Disable free media links to force access via right click
                    if(this.playlist[i].free) {
                        jQuery.each(this.playlist[i], function(property,value) {
                            if(jQuery.jPlayer.prototype.format[property]) { // Check property is a media format.
                                jQuery(self.cssSelector.playlist + "_item_" + i + "_" + property).data("index", i).click(function() {
                                    var index = $(this).data("index");
                                    jQuery(self.cssSelector.playlist + "_item_" + index).click();
                                    jQuery(this).blur();
                                    return false;
                                });
                            }
                        });
                    }
                }
            },
            playlistInit: function(autoplay) {
                if(autoplay) {
                    this.playlistChange(this.current);
                } else {
                    this.playlistConfig(this.current);
                }
            },
            playlistConfig: function(index) {
                jQuery(this.cssSelector.playlist + "_item_" + this.current).removeClass("jp-playlist-current").parent().removeClass("jp-playlist-current");
                jQuery(this.cssSelector.playlist + "_item_" + index).addClass("jp-playlist-current").parent().addClass("jp-playlist-current");
                this.current = index;
                jQuery(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]);
            },
            playlistChange: function(index) {
                this.playlistConfig(index);
                jQuery(this.cssSelector.jPlayer).jPlayer("play");
            },
            playlistNext: function() {
                var index = (this.current + 1 < this.playlist.length) ? this.current + 1 : 0;
                this.playlistChange(index);
            },
            playlistPrev: function() {
                var index = (this.current - 1 >= 0) ? this.current - 1 : this.playlist.length - 1;
                this.playlistChange(index);
            },
            supplied: "mp3",
            addMedia: function(media){
                this.playlist.push(media);
                this.playlistNext();
            }
        };
    
    });
    
    var last_el='';
    jQuery('.track .wrap .play').click(function(){
        var cur_img = jQuery(this).css('backgroundImage');
        if(cur_img.substring(cur_img.length-10)=='play.png")'){
            if(last_el!=''){
                last_el.css('background-image','url("img/play.png")');
            }
            var el = jQuery(this);
            last_el = el;
            parent.frames[1].addSong(el.attr("title"),el.attr("mp3"),el.attr("ogg"));
            el.css('background-image','url("img/pause.png")');
        }else{
            parent.frames[1].pauseSong();
        }
    });
    jQuery('.jp-interface .jp-pause').click(function(){
        last_el.css('background-image','url("img/play.png")');
    });
    jQuery('body a').click(function(){
        var el = jQuery(this);
        var href = el.attr('href');
        if(href.substring(0,1)=='/'){
            parent.location.href = parent.location.href + href.substring(1,href.length);
        }    
    });
    
    //]]>
    </script>  
    Code (markup):
    I have the Jplayer.swf in multiple folders too to prevent path errors, but that still seems to not help. Anybody?
     
    Infranight, Jun 18, 2011 IP
  2. Jan Novak

    Jan Novak Peon

    Messages:
    121
    Likes Received:
    5
    Best Answers:
    1
    Trophy Points:
    0
    #2
    Your domain's server must give the correct response for MP3 and OGG files.

    MP3 files should have the content type (MIME Type) of audio/mpeg. Browsers do not appear to be affected by the MP3 MIME type.
    Disable GZIP encoding of MP3 files, otherwise the Adobe Flash Plugin will experience issues.

    from http://www.jplayer.org/latest/developer-guide/
     
    Jan Novak, Jun 19, 2011 IP
  3. Infranight

    Infranight Member

    Messages:
    319
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    28
    #3
    It seems to, do you mean if the MP3s will play when I go to the direct path?
     
    Infranight, Jun 19, 2011 IP
  4. Jan Novak

    Jan Novak Peon

    Messages:
    121
    Likes Received:
    5
    Best Answers:
    1
    Trophy Points:
    0
    #4
    Yes. I think the problem will not be in the plugin.
     
    Jan Novak, Jun 19, 2011 IP
  5. Infranight

    Infranight Member

    Messages:
    319
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    28
    #5
    Seems as though the MP3s play directly, do you want the URL?
     
    Infranight, Jun 20, 2011 IP