MP3 Player Broken

@derrickhand300
8 years ago
1,353 posts

I recently had an issue with the video player getting cut off at top and bottom
https://www.jamroom.net/the-jamroom-network/forum/my_posts/41328/video-player-size-getting-cut-off-again
I solved the issue by switching to a different video player
I notice that since switching players now my mp3 player is no longer working
I have removed all the custom coding and reverted back to the default without any luck
Please see screenshot- anyone encountered this and know how to fix?

updated by @derrickhand300: 12/22/16 11:55:59AM

@derrickhand300
8 years ago
1,353 posts

If I switch to BLUE MONDAY player everything seems to work in both video and MP3
If I switch to Midnight Player ( which is my preference) the MP3 player is broken as in screenshot..
I think my work around is going to be to use all the images from the midnight player and upload them as the Blue Monday player images..

@derrickhand300
8 years ago
1,353 posts

I think where I am running into problems is that I try to edit the player code to remove the [AUDIO] and the [ARTIST] ( by Roughneck City) in the player
See screenshot
I want to remove the AUDIO because everyone already knows its AUDIO ( its a song) and i want to remove "by Roughneck City" because i am not the artist-I am just the person who uploaded the song to the site
On my site I am the only person in quota config that can actually upload media- so i am trying to remove these two areas from my players ( screenshot)

Here is the code for the BLUE MONDAY PLAYER

{jrCore_module_url module=$params.module assign="murl"}

{assign var="ext" value="`$params.field`_extension"}

<script type="text/javascript">
    $(document).ready(function(){
        new jPlayerPlaylist({
            jPlayer: "#jquery_jplayer_{$uniqid}",
            cssSelectorAncestor: "#jp_container_{$uniqid}"
        },[
            {if is_array($media)}
            {foreach $media as $a}
            {if $a._item.$ext == 'mp3'}
            {
                title: "{$a.title}",
                artist: "{$a.artist}",
                mp3: "{$jamroom_url}/{$a.module_url}/stream/{$params.field}/{$a.item_id}/key=8R9melwwyEiw/file.mp3",
                {if strstr($formats, 'oga')}
                oga: "{$jamroom_url}/{$a.module_url}/stream/{$params.field}/{$a.item_id}/key=8R9melwwyEiw/file.ogg",
                {/if}
                poster: "{$jamroom_url}/{$a.module_url}/image/audio_image/{$a.item_id}/large"
            },
            {/if}
            {/foreach}
            {/if}
        ],{
            error: function(res) { jrCore_stream_url_error(res); },
            playlistOptions: {
                autoPlay: {$autoplay},
                displayTime: 'fast'
            },
            swfPath: "{$jamroom_url}/modules/jrCore/contrib/jplayer",
            supplied: "{$formats}",
            solution: "{$solution}",
            volume: 0.8,
            wmode: 'window',
            preload: 'none'
        });
    });
</script>

<div class="blue_monday_player" onclick="event.cancelBubble = true; if(event.stopPropagation) event.stopPropagation();">
    <div id="jquery_jplayer_{$uniqid}" class="jp-jplayer"></div>

    <div id="jp_container_{$uniqid}" class="jp-audio">
        <div class="jp-type-playlist">
            <div class="jp-gui">
                <div class="jp-video-play">
                    <a href="javascript:" class="jp-video-play-icon" tabindex="1">{jrCore_lang module="jrAudio" id="1" default="play"}</a>
                </div>
                <div class="jp-interface">
                    <div class="jp-seek-holder">
                        <div class="jp-progress">
                            <div class="jp-seek-bar">
                                <div class="jp-play-bar"></div>
                            </div>
                        </div>
                    </div>
                    <div class="jp-current-time"></div>
                    <div class="jp-duration"></div>
                    <div class="jp-controls-holder">
                        <ul class="jp-controls">
                            <li><a href="javascript:" class="jp-previous" tabindex="1" title="{jrCore_lang module="jrAudio" id="44" default="previous"}"></a></li>
                            <li><a href="javascript:" class="jp-play" tabindex="1" title="{jrCore_lang module="jrAudio" id="1" default="play"}"></a></li>
                            <li><a href="javascript:" class="jp-pause" tabindex="1" title="{jrCore_lang module="jrAudio" id="2" default="pause"}"></a></li>
                            <li><a href="javascript:" class="jp-next" tabindex="1" title="{jrCore_lang module="jrAudio" id="45" default="next"}"></a></li>
                            <li><a href="javascript:" class="jp-stop" tabindex="1" title="{jrCore_lang module="jrAudio" id="3" default="stop"}"></a></li>
                            <li><a href="javascript:" class="jp-mute" tabindex="1" title="{jrCore_lang module="jrAudio" id="4" default="mute"}"></a></li>
                            <li><a href="javascript:" class="jp-unmute" tabindex="1" title="{jrCore_lang module="jrAudio" id="5" default="unmute"}"></a></li>
                            <li><a href="javascript:" class="jp-volume-max" tabindex="1" title="{jrCore_lang module="jrAudio" id="6" default="max volume"}"></a></li>
                        </ul>
                        <div class="jp-volume-bar">
                            <div class="jp-volume-bar-value"></div>
                        </div>
                        <ul class="jp-toggles">
                            <li><a href="javascript:" class="jp-shuffle" tabindex="1" title="{jrCore_lang module="jrAudio" id="46" default="shuffle"}"></a></li>
                            <li><a href="javascript:" class="jp-shuffle-off" tabindex="1" title="{jrCore_lang module="jrAudio" id="47" default="shuffle off"}"></a></li>
                            <li><a href="javascript:" class="jp-repeat" tabindex="1" title="{jrCore_lang module="jrAudio" id="7" default="repeat"}"></a></li>
                            <li><a href="javascript:" class="jp-repeat-off" tabindex="1" title="{jrCore_lang module="jrAudio" id="8" default="repeat off"}"></a></li>
                        </ul>
                    </div>
                    <div class="jp-title">
                        <ul>
                            <li></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="jp-playlist">
                <ul>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>
</div>

When I try to edit out ARTIST using something like

{*artist: "{$a.artist}",*}

thats when things start to break...is there a way to edit out the areas in the screenshot that does not break the player?
In short- I just want the title of audio and video files to show- nothing else on the player
Thanks!

updated by @derrickhand300: 07/23/16 06:42:46AM

@douglas
8 years ago
2,790 posts

You can't comment out code in javascript using the smarty comment method, you have to use a double slash "//" for single line comments in js and use this for multi lines:

// Single line comment

/*
Multi
Line
Comment
*/

Hope this helps!

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
updated by @douglas: 07/23/16 06:46:40AM

@derrickhand300
8 years ago
1,353 posts

Thank you Douglas- I did not know that so thanks for teaching me!

Still...using that method i cannot get it to edit out what I am after...

@douglas
8 years ago
2,790 posts

derrickhand300:
If I switch to BLUE MONDAY player everything seems to work in both video and MP3
If I switch to Midnight Player ( which is my preference) the MP3 player is broken as in screenshot..
I think my work around is going to be to use all the images from the midnight player and upload them as the Blue Monday player images..

Something is not right with this. I tried to modify the widget with the player for you and it will not let me, should probably open a ticket on this. You might try deleting the widget and re-creating it and see if that fixes it.

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@douglas
8 years ago
2,790 posts

derrickhand300:
Thank you Douglas- I did not know that so thanks for teaching me!
Still...using that method i cannot get it to edit out what I am after...

In that template, change this:

                title: "[{$item.prefix}] {$item.title}",
                artist: "{$item._item.profile_name}",
                module: "{$item.module}",
                item_id: "{$item.item_id}",

to this:

//                title: "[{$item.prefix}] {$item.title}",
                title: "{$item.title}",
//                artist: "{$item._item.profile_name}",
                module: "{$item.module}",
                item_id: "{$item.item_id}",

Hope this helps!

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@derrickhand300
8 years ago
1,353 posts

Thanks Douglas..I added the code you shared with me and ended up with this

{jrCore_module_url module=$params.module assign="murl"}

{assign var="ext" value="`$params.field`_extension"}

<script type="text/javascript">
    $(document).ready(function(){
        new jPlayerPlaylist({
            jPlayer: "#jquery_jplayer_{$uniqid}",
            cssSelectorAncestor: "#jp_container_{$uniqid}"
        },[
            {if is_array($media)}
            {foreach $media as $a}
            {if $a._item.$ext == 'mp3'}
            {
//                title: "[{$item.prefix}] {$item.title}",
                  title: "{$item.title}",
//                artist: "{$item._item.profile_name}",
                module: "{$item.module}",
                item_id: "{$item.item_id}",
                mp3: "{$jamroom_url}/{$a.module_url}/stream/{$params.field}/{$a.item_id}/key=1/file.mp3",
                {if strstr($formats, 'oga')}
                oga: "{$jamroom_url}/{$a.module_url}/stream/{$params.field}/{$a.item_id}/key=1/file.ogg",
                {/if}
                poster: "{$jamroom_url}/{$a.module_url}/image/audio_image/{$a.item_id}/large"
            },
            {/if}
            {/foreach}
            {/if}
        ],{
            error: function(res) { jrCore_stream_url_error(res); },
            playlistOptions: {
                autoPlay: {$autoplay},
                displayTime: 'fast'
            },
            swfPath: "{$jamroom_url}/modules/jrCore/contrib/jplayer",
            supplied: "{$formats}",
            solution: "{$solution}",
            volume: 0.8,
            wmode: 'window',
            preload: 'none'
        });
    });
</script>

<div class="blue_monday_player" onclick="event.cancelBubble = true; if(event.stopPropagation) event.stopPropagation();">
    <div id="jquery_jplayer_{$uniqid}" class="jp-jplayer"></div>

    <div id="jp_container_{$uniqid}" class="jp-audio">
        <div class="jp-type-playlist">
            <div class="jp-gui">
                <div class="jp-video-play">
                    <a href="javascript:" class="jp-video-play-icon" tabindex="1">{jrCore_lang module="jrAudio" id="1" default="play"}</a>
                </div>
                <div class="jp-interface">
                    <div class="jp-seek-holder">
                        <div class="jp-progress">
                            <div class="jp-seek-bar">
                                <div class="jp-play-bar"></div>
                            </div>
                        </div>
                    </div>
                    <div class="jp-current-time"></div>
                    <div class="jp-duration"></div>
                    <div class="jp-controls-holder">
                        <ul class="jp-controls">
                            <li><a href="javascript:" class="jp-previous" tabindex="1" title="{jrCore_lang module="jrAudio" id="44" default="previous"}"></a></li>
                            <li><a href="javascript:" class="jp-play" tabindex="1" title="{jrCore_lang module="jrAudio" id="1" default="play"}"></a></li>
                            <li><a href="javascript:" class="jp-pause" tabindex="1" title="{jrCore_lang module="jrAudio" id="2" default="pause"}"></a></li>
                            <li><a href="javascript:" class="jp-next" tabindex="1" title="{jrCore_lang module="jrAudio" id="45" default="next"}"></a></li>
                            <li><a href="javascript:" class="jp-stop" tabindex="1" title="{jrCore_lang module="jrAudio" id="3" default="stop"}"></a></li>
                            <li><a href="javascript:" class="jp-mute" tabindex="1" title="{jrCore_lang module="jrAudio" id="4" default="mute"}"></a></li>
                            <li><a href="javascript:" class="jp-unmute" tabindex="1" title="{jrCore_lang module="jrAudio" id="5" default="unmute"}"></a></li>
                            <li><a href="javascript:" class="jp-volume-max" tabindex="1" title="{jrCore_lang module="jrAudio" id="6" default="max volume"}"></a></li>
                        </ul>
                        <div class="jp-volume-bar">
                            <div class="jp-volume-bar-value"></div>
                        </div>
                        <ul class="jp-toggles">
                            <li><a href="javascript:" class="jp-shuffle" tabindex="1" title="{jrCore_lang module="jrAudio" id="46" default="shuffle"}"></a></li>
                            <li><a href="javascript:" class="jp-shuffle-off" tabindex="1" title="{jrCore_lang module="jrAudio" id="47" default="shuffle off"}"></a></li>
                            <li><a href="javascript:" class="jp-repeat" tabindex="1" title="{jrCore_lang module="jrAudio" id="7" default="repeat"}"></a></li>
                            <li><a href="javascript:" class="jp-repeat-off" tabindex="1" title="{jrCore_lang module="jrAudio" id="8" default="repeat off"}"></a></li>
                        </ul>
                    </div>
                    <div class="jp-title">
                        <ul>
                            <li></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="jp-playlist">
                <ul>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Integrity Check-reset caches....still no change to the player
I also saved the template to the skin so it should be active

@douglas
8 years ago
2,790 posts

Well, I've got you closer. I've got you back on the dark player, I think that is what you wanted, in fact you can use any player you want now.

I've removed the "[audio]" and "by Artist Name" from the player playlist for the the dark and blue monday players, if you want me to remove them of the other two players let me know.

There is an issue with your Site Builder "Audio Player" widget, for some reason it will not load the audio, I just get a spinning loading image. It is the same of the other player widgets and I'm not sure what is going on there.

I've tried everything I can think of so I'll see if I can get on of the other guys to check it out.

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@michael
8 years ago
7,715 posts

douglas:.....There is an issue with your Site Builder "Audio Player" widget, for some reason it will not load the audio, I just get a spinning loading image. It is the same of the other player widgets and I'm not sure what is going on there.
I've tried everything I can think of so I'll see if I can get on of the other guys to check it out....

After checking this out, I found what I think is the source of the issue. Something on your server is changing the text 'javascript' to 'rocketscript'.

This is unrelated to anything jamroom. The templates in your ACP still read javascript (which is a web scripting language, not sure what a 'rocketscript' is, first time i've seen it.)

--edit--
Looks related to "Cloud Flare"
http://stackoverflow.com/questions/9681032/why-is-wordpress-placing-text-rocketscript-instead-of-text-javascript-when-u

--edit edit--
Yeah, thats the problem. Need to add

 data-cfasync="false"

to all the widget_(module name)_config_header.tpl to all the modules where this is an issue.

I've added it to your widget_youtube_config_header.tpl via the TEMPLATES editor in the ACP but you'll need to add it to the others not working, Audio, Video, Vimeo as its a server issue, not a jamroom issue and you might prefer to do it in template over-rides rather than the ACP. Your site, you can choose.

updated by @michael: 07/24/16 08:07:41PM

@douglas
8 years ago
2,790 posts

I went ahead and fixed this up for you, let me know if you see any issues.

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@derrickhand300
8 years ago
1,353 posts

Thank you Douglas and Michael
I cant tell you how much I appreciate your efforts as this has been a frustrating reoccurring problem for some time- you guys really always go "above and beyond" with support!
Douglas the changes you made are perfect and are exactly what I wanted-BUT for some reason now the MP3 player on the home page is broken ( see screenshot) although its working on other pages using a different playlist? ( screenshot)
Thanks Michael for the info on "Rocketscript" I will spend some time later today here reading and examining what you have found and did and try to wrap my head around it and understand it better- then will open a server ticket or cloudflare ticket to see if they can explain more?
Thank you both a million!

@derrickhand300
8 years ago
1,353 posts

Quick update:
Michael I went into my cloudflare account and found something called Rocket Loader that was enabled- its supposed to load JS faster- I have now disabled it ( looks like its in Beta) I have attached a screenshot
Maybe this will help others who experience the same

@derrickhand300
8 years ago
1,353 posts

Brian
I just noticed the players that are working are made using the AUDIO PLAYER tab in the embed media editor
The player that is NOT working is made using EMBED PLAYLIST option-maybe that will be a clue?
PS- THANKS for the ACP menu fix!
updated by @derrickhand300: 07/25/16 05:41:28AM

@derrickhand300
8 years ago
1,353 posts

I switched the player in the above from EMBED PLAYLIST to AUDIO EMBED but it does not seem to work well with surrounding widgets as its overlaid over the widget above it and the image in the player is in wrong place ( screenshot)
My goal for this particular player is to actually make it similar to a radio station-Upload 100 songs that play randomly and only display the current song playing...I think its possible using JR

@douglas
8 years ago
2,790 posts

The "Offshore Drilling Rig Virtual Tour" widget is whats messing up the player layout.

I moved it to the bottom of the side and the player looks fine now.

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@derrickhand300
8 years ago
1,353 posts

Thank you for all the help Douglas!

@douglas
8 years ago
2,790 posts

derrickhand300:
Thank you for all the help Douglas!

Your welcome!

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

solved MP3 Player Broken

Tags