tr_y2k
04-14-2007, 02:48 AM
Hello, i am hoping that someone can help me with a problem that i have been battling for the last month or so... I have a webpage that loads an 'trackless' windows media player (wmp from now on) and a playlist underneath it. When the user selects one of the songs a script dynamically removes the 'trackless' wmp and replaces it with a wmp that plays the track that user has selected. I have managed to achieve this in firefox/mozilla but i cannot get the child params of the wmp object tag to communicate with the wmp object tag. Because of this i have resorted (grudgingly because i would prefer to use w3c dom only) to using innerHTML when ie is detected and DOM when ff/moz is detected. However i now face a new problem in that the innerHTML seems to have a documented lag time when updating the document so what happens is after the user has clicked on their first song, and they then click on another one, the previous song continues to play for about 5-10secs in the background of the current song. This ofcourse is not acceptable:confused: :( !!! If the user then presses stop on the wmp then re-clicks on the current song within that 5-10sec period it does stop the previous song. Sorry the above is so long winded but in light of my stated problem i am hoping to get answers to these two questions... firstly is it possible to dynamically update wmp in ie either by using the param.setAttribute('Filename',url) method (which i have tried as well to no avail) or by using my moz/ff DOM method as shown below. And secondly, failing my first question, is it possible to implement the innerHTML method for ie without the ensuing lag-time? Any help would be very greatly appreciated. Many thanks. Derek.:thumbsup:
function playSnd(url, track){
// array that stores the track names
var song = new Array(13);
song[0] = "Peace Orchestra - Who Am I?";
song[1] = "Free Land - Big Wednesday";
song[2] = "Layo & Bushwacka - Blind Tiger1";
song[3] = "Supreme Beings of Leisure - Under the Gun";
song[4] = "Meat Beat Manifesto - Martenot Waves";
song[5] = "Photek - Ren 2";
song[6] = "Death in Vegas - Hands Around My Throat";
song[7] = "Junkie XL - Beauty Never Fades";
song[8] = "Overseer - Supermoves";
song[9] = "Juno Reactor - Conga Fury";
song[10] = "Don Davis - Red Pill, Blue Pill";
song[11] = "Don Davis - The Real";
song[12] = "The Animatrix CD - [Soundtrack]";
// this part updates a div in the html document
// that displays the name of the most currently playing song - works in ie and ff/moz
var playTitleId = document.getElementById('playtitle');
var playTitle = playTitleId.appendChild(document.createTextNode(song[track]));
clearInnerHTML(playTitleId);
document.getElementById('playtitle').appendChild(playTitle);
// this is the begining of the dynamic wmp update
var sndPlacer = document.getElementById('sndfile');
var sndObj = document.getElementById('ie_snd');
var sndObjH = sndObj.getAttribute('height');
if(window.ActiveXObject){ // ie method
clearInnerHTML(sndPlacer);
// clearInnerHTML(obj) looks like this: while(obj.firstChild) obj.removeChild(obj.firstChild);
sndPlacer.innerHTML =
'<object classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"'+
'codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112"'+
'type="audio/mpeg" standby="Loading Track..." height="'+sndObjH+'" width="278" id="ie_snd" name="ie_snd" title="">'+
'<param name="filename" value="'+url+'" \/>'+
'<param name="transparentatstart" value="-1" \/>'+
'<param name="balance" value="0" \/>'+
'<param name="volume" value="0" \/>'+
'<param name="uimode" value="full" \/>'+
'<param name="enablecontextmenu" value="-1" \/>'+
'<param name="enablepositioncontrols" value="-1" \/>'+
'<param name="enableselectioncontrols" value="-1" \/>'+
'<param name="enabletracker" value="-1" \/>'+
'<param name="showcontrols" value="-1" \/>'+
'<param name="showpositioncontrols" value="-1" \/>'+
'<param name="showtracker" value="0" \/>'+
'<\/object>';
}
else { // firefox/mozilla method
var param = document.createElement('param');
clearInnerHTML(sndPlacer);
ffObj = document.createElement('object');
ffObj.setAttribute('id','ie_snd');
ffObj.setAttribute('width','278');
ffObj.setAttribute('height',sndObjH);
ffObj.setAttribute('data',url);
ffObj.setAttribute('type','application/x-mplayer2');
ffObj.setAttribute('stanby','Loading Track...');
param;
param.setAttribute('name','transparentatstart');
param.setAttribute('value','-1');
ffObj.appendChild(param);
param;
param.setAttribute('name','autostart');
param.setAttribute('value','-1');
ffObj.appendChild(param);
param.setAttribute('name','autorewind');
param.setAttribute('value','-1');
ffObj.appendChild(param);
param;
param.setAttribute('name','playcount');
param.setAttribute('value','-1');
ffObj.appendChild(param);
param;
param.setAttribute('name','balance');
param.setAttribute('value','1');
ffObj.appendChild(param);
param;
param.setAttribute('name','volume');
param.setAttribute('value','1000');
ffObj.appendChild(param);
param;
param.setAttribute('name','enablecontextmenu');
param.setAttribute('value','-1');
ffObj.appendChild(param);
param;
param.setAttribute('name','enablepositioncontrols');
param.setAttribute('value','-1');
ffObj.appendChild(param);
param;
param.setAttribute('name','enableselectioncontrols');
param.setAttribute('value','-1');
ffObj.appendChild(param);
param;
param.setAttribute('name','enabletracker');
param.setAttribute('value','-1');
ffObj.appendChild(param);
param;
param.setAttribute('name','showcontrols');
param.setAttribute('value','-1');
ffObj.appendChild(param);
param;
param.setAttribute('name','showpositioncontrols');
param.setAttribute('value','-1');
ffObj.appendChild(param);
param;
param.setAttribute('name','showtracker');
param.setAttribute('value','0');
ffObj.appendChild(param);
sndPlacer.appendChild(ffObj);
}
}
.... and the xhtml 1.1 dtd document playlist with the original 'trackless' wmp...
<div id="sndfile">
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112" type="audio/mpeg" standby="Loading Track..." height="1" width="278" id="ie_snd" name="ie_snd" title="">
<param name="transparentatstart" value="-1" />
<param name="balance" value="0" />
<param name="volume" value="0" />
<param name="enablecontextmenu" value="-1" />
<param name="enablepositioncontrols" value="-1" />
<param name="enableselectioncontrols" value="-1" />
<param name="enabletracker" value="-1" />
<param name="showcontrols" value="-1" />
<param name="showpositioncontrols" value="-1" />
<param name="showtracker" value="0" />
<!--[if !IE]> <-->
<object type="application/x-mplayer2" height="1" width="278" id="snd" name="snd" title="">
<param name="pluginurl" value="http://www.microsoft.com/Windows/MediaPlayer/" />
<param name="transparentatstart" value="-1" />
<param name="balance" value="0" />
<param name="volume" value="0" />
<param name="enablecontextmenu" value="-1" />
<param name="enablepositioncontrols" value="-1" />
<param name="enableselectioncontrols" value="-1" />
<param name="enabletracker" value="-1" />
<param name="showcontrols" value="-1" />
<param name="showpositioncontrols" value="-1" />
<param name="showtracker" value="0" />
</object>
<!--> <![endif]-->
</object>
</div>
<div class="boxcontent">
<div>01. <a href="audio/01who.mp3" onclick="playSnd('audio/01who.mp3','0'); return false;">Peace Orchestra - Who Am I?</a></div>
<div>02. <a href="audio/02big.mp3" onclick="playSnd('audio/02big.mp3','1'); return false;">Free Land - Big Wednesday</a></div>
<div>03. <a href="audio/03tig.mp3" onclick="playSnd('audio/03tig.mp3','2'); return false;">Layo & Bushwacka - Blind Tiger</a></div>
<div>04. <a href="audio/04gun.mp3" onclick="playSnd('audio/04gun.mp3','3'); return false;">Supreme Beings of Leisure - Under the Gun</a></div>
<div>05. <a href="audio/05wav.mp3" onclick="playSnd('audio/05wav.mp3','4'); return false;">Meat Beat Manifesto - Martenot Waves</a></div>
<div>06. <a href="audio/06ren.mp3" onclick="playSnd('audio/06ren.mp3','5'); return false;">Photek - Ren 2</a></div>
<div>07. <a href="audio/07thr.mp3" onclick="playSnd('audio/07thr.mp3','6'); return false;">Death in Vegas - Hands Around My Throat</a></div>
<div>08. <a href="audio/08bty.mp3" onclick="playSnd('audio/08bty.mp3','7'); return false;">Junkie XL - Beauty Never Fades</a></div>
<div>09. <a href="audio/09sup.mp3" onclick="playSnd('audio/09sup.mp3','8'); return false;">Overseer - Supermoves</a></div>
<div>10. <a href="audio/10con.mp3" onclick="playSnd('audio/10con.mp3','9'); return false;">Juno Reactor - Conga Fury</a></div>
<div>11. <a href="audio/11pil.mp3" onclick="playSnd('audio/11pil.mp3','10'); return false;">Don Davis - Red Pill, Blue Pill</a></div>
<div>12. <a href="audio/12rea.mp3" onclick="playSnd('audio/12rea.mp3','11'); return false;">Don Davis - The Real</a></div>
<div id="sndcontrol"><a href="audio/playall.m3u" onclick="playSnd('audio/playall.m3u','12'); return false;">[Play All]</a></div>
</div>
function playSnd(url, track){
// array that stores the track names
var song = new Array(13);
song[0] = "Peace Orchestra - Who Am I?";
song[1] = "Free Land - Big Wednesday";
song[2] = "Layo & Bushwacka - Blind Tiger1";
song[3] = "Supreme Beings of Leisure - Under the Gun";
song[4] = "Meat Beat Manifesto - Martenot Waves";
song[5] = "Photek - Ren 2";
song[6] = "Death in Vegas - Hands Around My Throat";
song[7] = "Junkie XL - Beauty Never Fades";
song[8] = "Overseer - Supermoves";
song[9] = "Juno Reactor - Conga Fury";
song[10] = "Don Davis - Red Pill, Blue Pill";
song[11] = "Don Davis - The Real";
song[12] = "The Animatrix CD - [Soundtrack]";
// this part updates a div in the html document
// that displays the name of the most currently playing song - works in ie and ff/moz
var playTitleId = document.getElementById('playtitle');
var playTitle = playTitleId.appendChild(document.createTextNode(song[track]));
clearInnerHTML(playTitleId);
document.getElementById('playtitle').appendChild(playTitle);
// this is the begining of the dynamic wmp update
var sndPlacer = document.getElementById('sndfile');
var sndObj = document.getElementById('ie_snd');
var sndObjH = sndObj.getAttribute('height');
if(window.ActiveXObject){ // ie method
clearInnerHTML(sndPlacer);
// clearInnerHTML(obj) looks like this: while(obj.firstChild) obj.removeChild(obj.firstChild);
sndPlacer.innerHTML =
'<object classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"'+
'codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112"'+
'type="audio/mpeg" standby="Loading Track..." height="'+sndObjH+'" width="278" id="ie_snd" name="ie_snd" title="">'+
'<param name="filename" value="'+url+'" \/>'+
'<param name="transparentatstart" value="-1" \/>'+
'<param name="balance" value="0" \/>'+
'<param name="volume" value="0" \/>'+
'<param name="uimode" value="full" \/>'+
'<param name="enablecontextmenu" value="-1" \/>'+
'<param name="enablepositioncontrols" value="-1" \/>'+
'<param name="enableselectioncontrols" value="-1" \/>'+
'<param name="enabletracker" value="-1" \/>'+
'<param name="showcontrols" value="-1" \/>'+
'<param name="showpositioncontrols" value="-1" \/>'+
'<param name="showtracker" value="0" \/>'+
'<\/object>';
}
else { // firefox/mozilla method
var param = document.createElement('param');
clearInnerHTML(sndPlacer);
ffObj = document.createElement('object');
ffObj.setAttribute('id','ie_snd');
ffObj.setAttribute('width','278');
ffObj.setAttribute('height',sndObjH);
ffObj.setAttribute('data',url);
ffObj.setAttribute('type','application/x-mplayer2');
ffObj.setAttribute('stanby','Loading Track...');
param;
param.setAttribute('name','transparentatstart');
param.setAttribute('value','-1');
ffObj.appendChild(param);
param;
param.setAttribute('name','autostart');
param.setAttribute('value','-1');
ffObj.appendChild(param);
param.setAttribute('name','autorewind');
param.setAttribute('value','-1');
ffObj.appendChild(param);
param;
param.setAttribute('name','playcount');
param.setAttribute('value','-1');
ffObj.appendChild(param);
param;
param.setAttribute('name','balance');
param.setAttribute('value','1');
ffObj.appendChild(param);
param;
param.setAttribute('name','volume');
param.setAttribute('value','1000');
ffObj.appendChild(param);
param;
param.setAttribute('name','enablecontextmenu');
param.setAttribute('value','-1');
ffObj.appendChild(param);
param;
param.setAttribute('name','enablepositioncontrols');
param.setAttribute('value','-1');
ffObj.appendChild(param);
param;
param.setAttribute('name','enableselectioncontrols');
param.setAttribute('value','-1');
ffObj.appendChild(param);
param;
param.setAttribute('name','enabletracker');
param.setAttribute('value','-1');
ffObj.appendChild(param);
param;
param.setAttribute('name','showcontrols');
param.setAttribute('value','-1');
ffObj.appendChild(param);
param;
param.setAttribute('name','showpositioncontrols');
param.setAttribute('value','-1');
ffObj.appendChild(param);
param;
param.setAttribute('name','showtracker');
param.setAttribute('value','0');
ffObj.appendChild(param);
sndPlacer.appendChild(ffObj);
}
}
.... and the xhtml 1.1 dtd document playlist with the original 'trackless' wmp...
<div id="sndfile">
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112" type="audio/mpeg" standby="Loading Track..." height="1" width="278" id="ie_snd" name="ie_snd" title="">
<param name="transparentatstart" value="-1" />
<param name="balance" value="0" />
<param name="volume" value="0" />
<param name="enablecontextmenu" value="-1" />
<param name="enablepositioncontrols" value="-1" />
<param name="enableselectioncontrols" value="-1" />
<param name="enabletracker" value="-1" />
<param name="showcontrols" value="-1" />
<param name="showpositioncontrols" value="-1" />
<param name="showtracker" value="0" />
<!--[if !IE]> <-->
<object type="application/x-mplayer2" height="1" width="278" id="snd" name="snd" title="">
<param name="pluginurl" value="http://www.microsoft.com/Windows/MediaPlayer/" />
<param name="transparentatstart" value="-1" />
<param name="balance" value="0" />
<param name="volume" value="0" />
<param name="enablecontextmenu" value="-1" />
<param name="enablepositioncontrols" value="-1" />
<param name="enableselectioncontrols" value="-1" />
<param name="enabletracker" value="-1" />
<param name="showcontrols" value="-1" />
<param name="showpositioncontrols" value="-1" />
<param name="showtracker" value="0" />
</object>
<!--> <![endif]-->
</object>
</div>
<div class="boxcontent">
<div>01. <a href="audio/01who.mp3" onclick="playSnd('audio/01who.mp3','0'); return false;">Peace Orchestra - Who Am I?</a></div>
<div>02. <a href="audio/02big.mp3" onclick="playSnd('audio/02big.mp3','1'); return false;">Free Land - Big Wednesday</a></div>
<div>03. <a href="audio/03tig.mp3" onclick="playSnd('audio/03tig.mp3','2'); return false;">Layo & Bushwacka - Blind Tiger</a></div>
<div>04. <a href="audio/04gun.mp3" onclick="playSnd('audio/04gun.mp3','3'); return false;">Supreme Beings of Leisure - Under the Gun</a></div>
<div>05. <a href="audio/05wav.mp3" onclick="playSnd('audio/05wav.mp3','4'); return false;">Meat Beat Manifesto - Martenot Waves</a></div>
<div>06. <a href="audio/06ren.mp3" onclick="playSnd('audio/06ren.mp3','5'); return false;">Photek - Ren 2</a></div>
<div>07. <a href="audio/07thr.mp3" onclick="playSnd('audio/07thr.mp3','6'); return false;">Death in Vegas - Hands Around My Throat</a></div>
<div>08. <a href="audio/08bty.mp3" onclick="playSnd('audio/08bty.mp3','7'); return false;">Junkie XL - Beauty Never Fades</a></div>
<div>09. <a href="audio/09sup.mp3" onclick="playSnd('audio/09sup.mp3','8'); return false;">Overseer - Supermoves</a></div>
<div>10. <a href="audio/10con.mp3" onclick="playSnd('audio/10con.mp3','9'); return false;">Juno Reactor - Conga Fury</a></div>
<div>11. <a href="audio/11pil.mp3" onclick="playSnd('audio/11pil.mp3','10'); return false;">Don Davis - Red Pill, Blue Pill</a></div>
<div>12. <a href="audio/12rea.mp3" onclick="playSnd('audio/12rea.mp3','11'); return false;">Don Davis - The Real</a></div>
<div id="sndcontrol"><a href="audio/playall.m3u" onclick="playSnd('audio/playall.m3u','12'); return false;">[Play All]</a></div>
</div>