MyBB Community Forums

Anyone good at javascript willing to look at a free open source script I found that is giving me a super PITA?
It has absolutely no documentation to modify even though developer said there is doc. But there's not:
http://scmplayer.net/#development

It's a great little music player that will play continuous across all pages and page refreshes/loads.

I'm trying to:
1. make the player use CSS from the loaded theme's Global CSS
2. run the whole thing inline
3. Get rid of the use of all external http within the script

It's free... it's open source.. and it's a VERY small code.

Here's the stock template html code:

<!--SCM Music Player by Adrian C Shum - http://scmplayer.net-->
<script type="text/javascript" src="http://scmplayer.net/script.js" ></script>
<script type="text/javascript">
SCMMusicPlayer.init("{'skin':'skins/black/skin.css','playback':{'autostart':'false','shuffle':'false','volume':'70'},'playlist':[{'title':'Example 1','url':'http://example.com/music1.mp3'},{'title':'Example 2','url':'http://example.com/music2.mp3'}],'placement':'bottom','showplaylist':'false'}");
</script>
<!--End of SCM Music Player script-->

here's the script:

window.SCMMusicPlayer=window.SCMMusicPlayer||{firstRun:true,init:function(dataStr){if(this.firstRun)this.firstRun=false;else return;if(!document.body||!document.body.firstChild){alert("The SCM Music Player must be placed after the <body> tag.");return;}
this.host='http://scmplayer.net';this.dir='/';this.dataStr=dataStr;this.data=eval('('+dataStr+')');if(this.data.showplaylist=="large"){this.data.showplaylist=screen.width>1280?'true':'false';}
this.args='url='+ escape(location.href.replace(/scmplayer\=true/g,'scmplayer=false'))+'&place='+this.data.placement+'&showplaylist='+this.data.showplaylist+'&skin='+this.data.skin;this.src=this.host+this.dir+'container.html?210212#'+this.args;this.hasFrame=window.parent!=window;if(navigator.userAgent.match(/iPad|iPhone|Android|Blackberry/i)==null){if(!this.hasFrame||location.href.indexOf("scmplayer=true")>0){this.codeNonIE();this.initEventsWithPlayer();}else{this.initEventsWithoutPlayer();}}else{this.hideHref();}},codeNonIE:function(){var self=this;var scmCSSCode='<style type="text/css"> html,body{overflow:hidden;} body{margin:0;padding:0;border:0;} img,a,embed,object,div,address,table,iframe,p,span,form{ display:none;border:0;margin:0;padding:0; } #scmFrame{display:block; background-color:transparent; position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:167;} </style>';document.write(scmCSSCode);var scmCSS=document.createElement('div');scmCSS.id="scmCSS";scmCSS.innerHTML=scmCSSCode;var scmFrame=document.createElement('iframe');scmFrame.frameBorder=0;scmFrame.id="scmFrame";scmFrame.name="scmFrame";scmFrame.allowTransparency=true;scmFrame.src=this.src;document.body.insertBefore(scmFrame,document.body.firstChild);document.body.insertBefore(scmCSS,document.body.firstChild.nextSibling);var isie=(function(){var undef,v=3,div=document.createElement('div'),all=div.getElementsByTagName('i');while(div.innerHTML='<!--[if gt IE '+(++v)+']><i></i><![endif]-->',all[0]);return v>4?v:undef;}());if(!isie)
this.addEvent(window,'load',function(){var current=document.body.lastChild;while(current.id!="scmCSS"){document.body.removeChild(current);current=document.body.lastChild;}
current=document.body.firstChild;while(current.id!="scmFrame"){document.body.removeChild(current);current=document.body.firstChild;}},false);},initEventsWithPlayer:function(){var self=this;this.addEvent(window,"message",function(e){if(e.data=="SCMContainerReady"){var win=document.getElementById("scmFrame").contentWindow;win.postMessage("SCMDataReady"+self.dataStr,self.host);}});this.addEvent(window,'resize',function(){var myHeight=0;var myWidth=0;if(typeof(window.innerHeight)=='number'){myHeight=window.innerHeight;myWidth=window.innerWidth;}else if(document.documentElement&&document.documentElement.clientHeight){myHeight=document.documentElement.clientHeight;myWidth=document.documentElement.clientWidth;}else if(document.body&&document.body.clientHeight){myHeight=document.body.clientHeight;myWidth=document.body.clientWidth;}
var scmFrameStyle=document.getElementById('scmFrame').style;scmFrameStyle.height=myHeight;scmFrameStyle.width=myWidth;},false);this.addEvent(window,'load',function(){window.scrollTo(0,document.getElementById("scmFrame").offsetTop);document.body.style.margin="0";document.body.style.padding="0";document.body.style.border="0";document.body.style.overflow="hidden";},false);window.scrollTo(0,document.getElementById("scmFrame").offsetTop);document.body.style.overflow="hidden";},initEventsWithoutPlayer:function(){this.addEvent(window,'load',function(){var ls=['A','AREA'];for(var j=0;j<ls.length;j++){var l=document.getElementsByTagName(ls[j]);for(var i=0;i<l.length;i++)
if(l[i].href.indexOf('https://')==0||(l[i].href.indexOf(location.host)==-1&&l[i].href.indexOf("http://")==0))
l[i].target='_blank';}},false);this.hideHref();},hideHref:function(){var $link=document.getElementById("scmHref");if($link)$link.style.display="none";},getScript:function(){var po=document.createElement('script');po.type='text/javascript';po.async=true;po.src=src;var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(po,s);},addEvent:function(elm,evType,fn,useCapture){if(elm.addEventListener){elm.addEventListener(evType,fn,useCapture);return true;}else if(elm.attachEvent){var r=elm.attachEvent('on'+ evType,fn);return r;}else{elm['on'+ evType]=fn;}}}

Here's the CSS for an external file but would be great to just insert this into global CSS and still work

#player, #player a {
    color: #fff;
}
#player {
    background: url(sizerAndVol.png);
    background-position: bottom;
}
#player .mainImage {
    background: url(main.png);
}
#player #baseLeft {
    width: 93px;
}
#player #baseRight {
    width: 145px;
}
#player .button {
    width: 26px;
}
#player #play {
    background: url(playBtn.png);
}
#player #play, #player #pause {
    left: 26px;
}
#player #previous {
    left: 0px;
}
#player #next {
    left: 52px;
}
#player #title {
    left: 90px;
}
#player #tooltip {
    right: 196px;
}
#player #timer {
    right: 120px;
}
#player #list {
    right: 0px;
}
#player #seeker {
    right: 320px;
}
#player #seekerBase {
    border-color: #ccc;
}
#player #seekerBuffered {
    background-color: #4b575d;
}
#player #seekerSliderBase {
    background-color: #ccc;
}
#player #volume {
    width: 65px;
    right: 39px;
}
#player #volumeSlider {
    width: 8px;
    background: url(sizerAndVol.png);
}
#playlist, #playlist .module, #playlist h3 {
    border-color: #333;
}
#playlist .module {
    color: #333;
    background-color: #eee;
}
#playlist h3 {
    background: url(bar.jpg);
    color: #fff;
    background-color: #333;
}
#playlist .even {
    background-color: #eee;
}
#playlist .odd {
    background-color: #ddd;
}
#playlist .focus {
    background-color: #666;
    color: #FFF;
}

Please help if you have the skills and interest.

In the JavaScript I thought I could replace scmplayer.net with {$mybb->settings['bburl']} and place inline on MyBB header template but it didn't work.

GunnerAIO