FLASH mp3 player not playing mp3?

**ayusuits** · 11-15-2009, 10:46 PM

Hi! I found this site interesting:

http://flash-mp3-player.net/players/js/

and so I downloaded the file and edited the HTML for the links. When I try to play the mp3 player, it doesnt work. It has some javascript functions that are not working. I already tried the Global security functions and still not working.

Could somebody help me?

Here's the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Player MP3 JS</title>
		<style type="text/css">
		html {
			background-color: #7f7f8e;
			color: #fff;
		}
		body {
			background: #fff;
			color: #000;
			border: solid 5px #9494A5;
			padding: 1em;
			margin: 1em 2em 1em 2em;
		}
		h1 {
			text-align: center;
			border-bottom: solid 2px #ccc;
		}
		
		

/* ==================== Player ==================== */
		

#player {
			background-color: #e9f6ff;
			
color: #000;
			height: 20px;
			
width: 200px;
			border: solid 3px #ddd;
		}
		

#player .button {
			width: 20px;
			
height: 20px;
			background-repeat: no-repeat;
			

background-position: 2px 2px;
			float: left;
		}
		

#player .button a {
			display: block;
			
height: 20px;
			text-indent: -100em;
			
overflow: hidden;
		}
#player #timeline {
			position: relative;
		}
		
#player #timeline a {
			
position: absolute;
			left: 40px;
			
display: block;
			height: 20px;
			
width: 40px;
			text-indent: -100em;
			
overflow: hidden;
			background-image: url(images/control_slider.png);
		

}
		

#player #timeline a:hover {
			
background-image: url(images/control_slider_blue.png);
		}
#player .play {
			background-image: url(images/control_play.png);
		

}
#player .play:hover {
			
background-image: url(images/control_play_blue.png);
		}
#player .pause {
			
background-image: url(images/control_pause.png);
			
display: none;
		}
		
#player .pause:hover {
			
background-image: url(images/control_pause_blue.png);
		}
		
#player .stop {
			
background-image: url(images/control_stop.png);
		}
#player .stop:hover {
			
background-image: url(images/control_stop_blue.png);
		}
		
</style>
        

<script type="text/javascript">
        	
var myListener = new Object();
        	
        	

/**
        	 * Initialize
        	 */
        	
myListener.onInit = function()
        	{
        		

_addEventListener(document.getElementById("playerslider"), "mousedown", _sliderDown, false);
        	

_addEventListener(document, "mousemove", _sliderMove, false);
        		

_addEventListener(document, "mouseup", _sliderUp, false);
        	};
        	

/**
        	 * Update
        	 */
        	
myListener.onUpdate = function()
        	{
        		
var isPlaying = this.isPlaying;
           		
var url = this.url;
           		
var volume = this.volume;
           		
var position = this.position;
            	
var duration = this.duration;
            	
            	
var id3_artist = this.id3_artist;
            	
var id3_album = this.id3_album;
            	
var id3_songname = this.id3_songname;
            	
var id3_genre = this.id3_genre;
            	
var id3_year = this.id3_year;
            	
var id3_track = this.id3_track;
            	
var id3_comment = this.id3_comment;
            	
            	

document.getElementById("info_playing").innerHTML = isPlaying;
            	

document.getElementById("info_url").innerHTML = url;
            	

document.getElementById("info_volume").innerHTML = volume;
            	

document.getElementById("info_position").innerHTML = position;
            	

document.getElementById("info_duration").innerHTML = duration;
            	

document.getElementById("info_bytes").innerHTML = this.bytesLoaded + "/" + this.bytesTotal + " (" 

+ this.bytesPercent + "%)";
            	
            	

document.getElementById("info_id3_artist").innerHTML = id3_artist;
            	

document.getElementById("info_id3_album").innerHTML = id3_album;
            	

document.getElementById("info_id3_songname").innerHTML = id3_songname;
            	

document.getElementById("info_id3_genre").innerHTML = id3_genre;
            	

document.getElementById("info_id3_year").innerHTML = id3_year;
            	

document.getElementById("info_id3_track").innerHTML = id3_track;
            	

document.getElementById("info_id3_comment").innerHTML = id3_comment;
            	
            	

isPlaying = (isPlaying == "true");
           		

document.getElementById("playerplay").style.display = (isPlaying)?"none":"block";
           		

document.getElementById("playerpause").style.display = (isPlaying)?"block":"none";
           		


var timelineWidth = 160;
            	
var sliderWidth = 40;
            	
var sliderPositionMin = 40;
            	
var sliderPositionMax = sliderPositionMin + timelineWidth - sliderWidth;
            	
var sliderPosition = sliderPositionMin + Math.round((timelineWidth - sliderWidth)* position / 

duration);
            	
            	

if (sliderPosition < sliderPositionMin) {
            		
sliderPosition = sliderPositionMin;
            	}
            	
if (sliderPosition > sliderPositionMax) {
            		
sliderPosition = sliderPositionMax;
            	}
            	
            	

document.getElementById("playerslider").style.left = sliderPosition+"px";
        	};
        	
        	
/**
        	 * private functions
        	 */
        	
var sliderPressed = false;
        	function _getFlashObject()
        	{
        		

return document.getElementById("myFlash");
        	}
        	
function _cumulativeOffset (pElement)
        	{
				
var valueT = 0, valueL = 0;
				
do {
					
valueT += pElement.offsetTop  || 0;
					
valueL += pElement.offsetLeft || 0;
					
pElement = pElement.offsetParent;
				} 
while (pElement);
				
return [valueL, valueT];
			}
        	
function _xmouse(pEvent)
        	{
				
return pEvent.pageX || (pEvent.clientX + (document.documentElement.scrollLeft || 

document.body.scrollLeft));
        	}
        	
function _ymouse(pEvent)
        	{
				
return pEvent.pageY || (pEvent.clientY + (document.documentElement.scrollTop || 

document.body.scrollTop));
        	}
        	
function _findPosX(pElement)
        	{
				
if (!pElement) return 0;
				

var pos = _cumulativeOffset(pElement);
				
return pos[0];
			}
        	
function _findPosY(pElement)
        	{
				
if (!pElement) return 0;
				
var pos = _cumulativeOffset(pElement);
				
return pos[1];
			}
        	

function _addEventListener(pElement, pName, pListener, pUseCapture)
        	{
			

	if (pElement.addEventListener) {
					

pElement.addEventListener(pName, pListener, pUseCapture);
				} 

else if (pElement.attachEvent) {
					

pElement.attachEvent("on"+pName, pListener);
				}
			

}
			
function _sliderDown(pEvent)
			{
				

sliderPressed = true;
			}
			
function _sliderMove(pEvent)
			{
				
if (sliderPressed) {
					

var timelineWidth = 160;
					
var sliderWidth = 40;
	            	
var sliderPositionMin = 40;
	            	
var sliderPositionMax = sliderPositionMin + timelineWidth - sliderWidth;
				

	var startX = _findPosX(document.getElementById("timeline"));
				

	var x = _xmouse(pEvent) - sliderWidth / 2;
					
	

if (x < startX) {
						
var position = 0;
					} 
else if (x > startX + timelineWidth) {
						
var position = myListener.duration;
					} 
else {
						
var position = Math.round(myListener.duration * (x - startX - sliderWidth) / (startX + timelineWidth 

- sliderWidth - startX));
					}
				

_getFlashObject().SetVariable("method:setPosition", position);
				}
	

		}
			
function _sliderUp(pEvent)
			{
				

sliderPressed = false;
			}
        	
        	

/**
        	 * public functions
        	 */
            
function play() {
            	
if (myListener.url == "undefined") {
                	
_getFlashObject().SetVariable("method:setUrl", "test.mp3");
                }
                

//_getFlashObject().SetVariable("method:play", 

"http://scfire-nyk-aa01.stream.aol.com:80/stream/1074");
                

_getFlashObject().SetVariable("method:play", "");
            }
            

function pause() {
                
_getFlashObject().SetVariable("method:pause", "");
            }
            
function stop() {
                _getFlashObject().SetVariable("method:stop", "");
            }
        
</script>
        <!--[if IE]>
		<script type="text/javascript" 

event="FSCommand(command,args)" for="myFlash">
		eval(args);
		

</script>
		
<![endif]-->


		<h1>Thème JS</h1>
		<object type="application/x-shockwave-flash" id="flashMp3Player" 

data="../player_mp3_js.swf" height="0" width="0">
        <param name="swLiveConnect" value="true"/>
        <param name="movie" value="player_mp3_js.swf" />
        <param value="always" name="AllowScriptAccess"/>
        <param name="FlashVars" 

value="listener=atonkar.player.flashPlayerListener&interval=1000&useexternalinterface=0&enabled

=1" />
        
<embed src="player_mp3_js.swf" loop="false" quality="best" bgcolor="#d6d3ce" width="0" height="0" 

type="application/x-shockwave-flash" 

pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=Shockw

aveFlash" swLiveConnect="true" name="flashMp3Player">
        </embed>
</object>


	<div id="player">
			
<div id="playerplay" class="button play">
<a href="javascript:play()">PLAY</a></div>
			

<div id="playerpause" class="button pause"><a href="javascript:pause()">PAUSE</a></div>
		

<div id="playerstop" class="button stop"><a href="javascript:stop()">STOP</a></div>
			

<div id="timeline"><a id="playerslider" href="javascript:void(0);">SLIDER</a></div>
		

</div>
		

<h2>Informations</h2>
		
<ul>
			
<li>url : <span id="info_url">undefined</span></li>
			
<li>isPlaying : <span id="info_playing">undefined</span></li>
			
<li>bytes : <span id="info_bytes">undefined</span></li>
			
<li>position : <span id="info_position">undefined</span></li>
			

<li>duration : <span id="info_duration">undefined</span></li>
			
<li>volume : <span id="info_volume">undefined</span></li>
			
		

	<li>ID3 Artist : <span id="info_id3_artist">undefined</span></li>
			
<li>ID3 Album : <span id="info_id3_album">undefined</span></li>
			
<li>ID3 Songname : <span id="info_id3_songname">undefined</span></li>
			

<li>ID3 Genre : <span id="info_id3_genre">undefined</span></li>
			
<li>ID3 Year : <span id="info_id3_year">undefined</span></li>
			
<li>ID3 Track : <span id="info_id3_track">undefined</span></li>
			
<li>ID3 Comment : <span id="info_id3_comment">undefined</span></li>
		
</ul>
		

	</body>
</html>

Thanks in advance

**ayusuits** · 11-16-2009, 03:10 AM

I got it now... I dont know what I did but it's working now...

Now my problem is:

How to add positioning and duration (javascript) in a Nifty Player?

http://www.varal.org/media/niftyplayer/

Thread: FLASH mp3 player not playing mp3?

Thread Tools

Display

FLASH mp3 player not playing mp3?

Posting Permissions