加载随机背景音乐并显示标题

时间:2016-01-18 23:36:52

标签: javascript html

我目前正在编写一个脚本来播放本地服务器上的随机mp3文件,并在屏幕顶​​部显示标题。但是,它似乎根本不起作用。

下面的一些代码已被删除,但这些是我用来随机选择一首歌然后显示标题的脚本,有什么建议吗?

<?php

// A Steam API Key is required so as to be able to contact steam and get a users profile image and name
// You can get a Steam API Key by visiting http://steamcommunity.com/dev/apikey
// Don't worry about the web address, it won't have any effect so just type in any web site
// Once you have your steam API Key simply paste the key below. (Make sure the quotation marks are still there or else it won't work)
$SteamAPIKey = "removed";


// Don't edit any of the PHP stuff here or else you may break the script
// If you website isn't displaying correctly then please make sure you have configured your loading url correctly
if (!isset($_GET["steamid"])) {
	die("Woops, you don't seem to be using the correct loading URL format, please make sure it has the correct extension it should look like this: www.yourdomain.com/loading/index.php?steamid=%s");
}

$steamid64 = $_GET["steamid"];

$url = "http://api.steampowered.com/ISteamUser/GetPlayerSummaries/v0002/?key=" . $SteamAPIKey . "&steamids=" . $steamid64;
$json = file_get_contents($url);
$table2 = json_decode($json, true);
$table = $table2["response"]["players"];

?>

<!DOCTYPE HTML>
<html>
	<head>
    <!-- Hello, your reading the source code for the server load page -->
	<!-- Created by CaptainMcMarcus for CoderHire -->
    <!-- This is the HTML code below and is safe to edit to your needs -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<meta name="description" content="Welcome to Crystal Load - Crystal Blue Persuassion!" /> <!-- Webpage Description --> 
	<title>Crystal Load</title> <!-- Webpage Title -->
	<link href="style.css" rel="stylesheet" type="text/css" /> <!-- Links to the Stylesheet -->
    <link href="colour.css" rel="stylesheet" type="text/css" /> <!-- Links to the Stylesheet for main colours -->
	
    <script type="text/javascript" src="scripts/jquery.js"></script><!-- Link to jquery so we can do cool stuff -->
    <script type="text/javascript" src="scripts/cycle.js"></script><!-- For Rotating Backgrounds -->
    
    <script type="text/javascript"><!-- Script to center content -->
	$(document).ready(function() {
		//Changes volume of song. 0.5=50% volume
		$('.audio').prop("volume", 0.5);
			
		//Perfectly centres content to the middle of the screen both vertically and horizontally
		$(window).resize(function(){
			  $('.core-wrapper').css({
			   position:'absolute',
			   left: ($(window).width() 
				 - $('.core-wrapper').outerWidth())/2,
			   top: ($(window).height() 
				 - $('.core-wrapper').outerHeight())/2
			  });	
		});
		// Initiate centre function
		$(window).resize();
		
		//Lets get thos backgrounds moving
		$('#background-scroll').cycle({ 
			fx: 'fade',
			pause: 0, 
			speed: 1800, //Time to fade into the next image [in milliseconds]
			timeout: 3500  //Time spent on image [in milliseconds]
		});
	});
    </script>
    

	</head>
	
	<body>
    
    <div id="background-scroll"><!-- Add Backgrounds so we can have multiple ones -->
    	<!-- IF YOU NEED LESS BACKGROUNDS JUST REMOVE THEM OUT OF THE LIST -->
        <!-- TO ADD EXTRA BACKGROUNDS YOU NEED TO MODIFY THE STYLESHEET [ADVANCED USERS ONLY] -->
    	<div id="bg1"></div><!-- BG 1 -->
        <div id="bg2"></div><!-- BG 2 -->
        <div id="bg3"></div><!-- BG 3 -->
        <div id="bg4"></div><!-- BG 4 -->
        <div id="bg5"></div><!-- BG 5 -->
        <div id="bg6"></div><!-- BG 6 -->
   	</div>
	
	<script type="text/javascript">
	
	var s;
	s = this.number;
		function Name(){
			
				if (number == (1)){
					
					s = "Tobu - Candyland"
				}
				if (number == (2)){
					
					s = "Tobu - Colors"
				}
				if (number == (3)){
					
					s = "Tobu - Dreams"
				}
				if (number == (4)){
					
					s = "Tobu - Seven"
				}
				if (number == (5)){
					
					s = "Tobu - Such Fun"
				}
		}
	
	
	</script>
	
	<script>
document.write('<div id="'+s+'" ></div>');
</script>
    
    <div class="core-wrapper"><!-- Opens the wrapper so we can contain and center everything -->
    	
        <img src="images/logo.png" width="960" height="120" alt="Your Logo" /><!-- This adds in the logo, simply change logo.png to make this look different -->
		
		
    
    	<div id="left-items"><!-- Opens the wrapper for the left content, there isn't really much to change on the left side as it's dynamic -->
    
			<?php
				//PHP Code for the avatar display, it's probably best to leave this section alone
				echo "<div id=\"profile-wrap\">";
					
					//Add in the players avatar
					echo "<div id=\"profile-top\">";
						echo "<div id=\"avatarimg\">";
		//					echo "<img src=\"" . $table["avatarfull"] . "\" />";
						echo "</div>";
					echo "</div>";
					
					//Adds in the players name
					echo "<div id=\"profile-bottom\">";
			//			echo "<p>" . $table["personaname"] . "</p>";
					echo "</div>";
					
				echo "</div>";
            ?>
            <div class="clear"></div>
            
            
            <div class="title server">
            	<h2>Server</h2><!-- Adds in the server title, you can change the text to be whatever you would like -->
           	</div>
            
            <!-- Lets get the server Details in here -->
            <ul id="server-list">
            	<li><img src="images/server-name.png" alt="Server Name" /> <span id="s-name">Server Name</span></li><!-- Dynamically adds the server name -->
                <li><img src="images/server-mode.png" alt="Game Mode" /> <span id="s-mode">Server Game Mode</span></li><!-- Dynamically adds game mode name -->
                <li><img src="images/server-map.png" alt="Map Name" /> <span id="s-map">Server Map Name</span></li><!-- Dynamically adds map name -->
           	</ul>
            
     	</div><!-- Close The Wrapper for the Left Items -->
        
        <div id="right-items"><!-- Open wrapper for the items on the right -->
        	
            <div class="title">
            	<h2>Staff</h2><!-- Adds in the rules title, you can change the text to be whatever you would like -->
           	</div>
            
            <!-- Let's add in all the rules, the number inside the <span></span> tags will appear in a brighter coloured box  -->
            <ul id="rules">
            	<li>Owner: Kaydax</li>
                <li>Owner: Name</li>
                <li>Co-Owner: Oilysgtjohnson</li>
                <li>Staff Director: UnknownKury</li>
            </ul>
            
      	</div><!-- This close the right content wrapper -->
        
        <div class="clear"></div><!-- This clears things up so that we can vertically align things correctly -->
        
        <!-- This adds in the progress bar -->
        <div id="bar">
        	<div id="bar-width" style="width: 0%;"></div>
       	</div>
        
        <!-- This adds in the progress percentage bar -->
        <div id="percentage">
        	<p></p>
       	</div>
        
        <!-- This adds the current item being downloaded, we use the word connecting by default because if we don't download anything then it won't change -->
        <div id="download-item">
        	<p>Connecting...</p>
      	</div>
    
    </div><!-- now we close the core wrapper to keep everything nicely contained and in the middle -->
    
    <!-- MUSIC SCRIPT -->
    <!-- To activate simply delete the comment tags and replace music.mp3 with the path to your sound file. -->
    <!-- Adding copyrighted music is illegal as you will be redistributing from the server this is hosted from, this means that you will be held liable -->
    
<script type="text/javascript">

var number;

function PlayIt(mp3){
	nummp3 = 5 
	day = new Date()
	z = day.getTime()
	y = (z - (parseInt(z/1000,10) * 1000))/10
	x = parseInt(y/100*nummp3,10) + 1
	if (x == (1)){
		mp3=("Candyland.mp3")	}
	if (x == (2)){
		mp3=("Colors.mp3")
	}
	if (x == (3)){
		mp3=("Dreams.mp3")
	}
	if (x == (4)){
		mp3=("Seven.mp3")
	}
	if (x == (5)){
		mp3=("SuchFun.mp3")
	}
	document.getElementById('music').innerHTML='<object width="300" height="44" '
    	+'classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" '
      	+'codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" '
      	+'<param name="url" value="'+mp3+'">'
      	+'<param name="uiMode" value="full">'
      	+'<param name="autoStart" value="true">'
      	+'<param name="loop" value="true">'
		+'<param name="volume" value="100">'
      	+'<embed type="application/x-mplayer2" '
      	+'pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" '
      	+'showcontrols="true" uimode="full" width="300" height="44" '
      	+'src="'+mp3+'" autostart="1" loop="true">'
		+'<\/object>';
	alert(mp3);
	number = x;
}
window.onload=PlayIt;
</script>
</head>
    
    <script type="text/javascript" src="scripts/main.js"></script><!-- Script to get downloads, map, players, game mode and sort out the loading bar -->

	</body><!-- Closes off the HTML Document -->
</html>

1 个答案:

答案 0 :(得分:0)

您展示的代码没有做任何事情,使我们难以调试。您应该避免的一件事是使用关键字Number作为变量名称。这是一个简单的随机歌曲名称选择器:

&#13;
&#13;
var songlist = ["Tobu - Candyland", "Tobu - Colors", "Tobu - Dreams", "Tobu - Seven", "Tobu - Such Fun"];

alert(songlist[Math.floor(Math.random() * songlist.length)]);
&#13;
&#13;
&#13;