BenRobertson Posted November 28, 2012 Share Posted November 28, 2012 Here is my current code:<html><title>tunesmash</title><style type+text/css>body {color : black;}#body {left:15%;position:absolute;top:50%;width:85%;}#audio1 {left:30%;position:absolute;top:35%;width:10%;}#audio2 {left:55%;position:absolute;top:35%;width:10%;}#title {left:22%;position:absolute;top:25%;width:60%;}.bg {width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: -5000;}</style><img src="bgindex.jpg" class="bg"><div id=title><b><font face=verdana size=5 color=black>Tunesmash.com is designed to take the ridicule of bad music to the web.</font></b></div><div id=audio1><audio controls="controls"><source src="RIEY.m4a" type="audio/mpeg"> <!--Instead of "RIEY" playing I need a random file to play.--></audio></div><div id=audio2><audio controls="controls"><source src="CBFG.m4a" type="audio/mpeg"> <!--Instead of "CBFG" playing I need a random file to play--></audio></div><div id=body><font face=verdana size=5 color=black></font></div><a href=index.html><IMG STYLE="position:absolute; TOP:11.3%; LEFT:41.55%; WIDTH:86px; HEIGHT:40px" SRC="buttonhome.JPG"></a><a href=about.html><IMG STYLE="position:absolute; TOP:11.5%; LEFT:47.8%; WIDTH:86px; HEIGHT:38px" SRC="buttonabout.JPG"></a><a href=why.html><IMG STYLE="position:absolute; TOP:11.5%; LEFT:54.1%; WIDTH:63px; HEIGHT:39px" SRC="buttonwhy.JPG"></a><a href=upload.html><IMG STYLE="position:absolute; TOP:11.2%; LEFT:59.1%; WIDTH:103px; HEIGHT:41px" SRC="buttonupload.JPG"></a><a href=index.html><IMG STYLE="position:absolute; TOP:40%; LEFT:38%; WIDTH:29px; HEIGHT:37px" SRC="thumbsup.JPG"></a><a href=index.html><IMG STYLE="position:absolute; TOP:40%; LEFT:63%; WIDTH:29px; HEIGHT:37px" SRC="thumbsup.JPG"></a> 1 Link to comment Share on other sites More sharing options...
justsomeguy Posted November 28, 2012 Share Posted November 28, 2012 It would be easiest to use PHP to write the filename there if your server supports it. Link to comment Share on other sites More sharing options...
BenRobertson Posted November 29, 2012 Author Share Posted November 29, 2012 Hey Justsomeguy, Thanks for your quick reply, I am only 13 and have been learning web coding for around 2 months now. Me and a friend at school have decided to make a website focused on comparing two random, different songs with each other. I have the website looking nice, its just that I need the two side by side audio players to select a random song from a given folder, thus allowing the user to vote on which ever song he or she likes the most. I am not familiar with PHP yet and do not physically have a server set up or rented. Thanks in advance, Ben Robertson Link to comment Share on other sites More sharing options...
justsomeguy Posted November 29, 2012 Share Posted November 29, 2012 When you're picking a host, make sure they support PHP. It's really only a few lines of code to select a random file from a given folder. You can use the glob function to return a list of all of the files in a directory: http://www.php.net/manual/en/function.glob.php The array_rand function will get a random item from an array: http://www.php.net/manual/en/function.array-rand.php e.g.: <?php $files = glob('music/*.m4a'); // get all .m4a files in the music directory$fname = $files[array_rand($files)]; // get a random filenameecho $fname; ?> You can even get 2 random files at once: $files = glob('music/*.m4a');$random = array_rand($files, 2); // get 2 random keys that won't be the same$fname1 = $files[$random[0]];$fname2 = $files[$random[1]]; Link to comment Share on other sites More sharing options...
BenRobertson Posted November 29, 2012 Author Share Posted November 29, 2012 Thanks will try this when I get home tonight. Link to comment Share on other sites More sharing options...
BenRobertson Posted November 30, 2012 Author Share Posted November 30, 2012 Hi justsomeguy, Sorry to keep bothering you but would you mind explaining the issue a little more simply as I am unfamiliar with PHP. The idea of the website is that the user can choose what song they like out of two side by side songs. I have all of the music in a local directory on my PC: C:\Users\Movie\Desktop\TuneSmash\Audio. I need some help so that the website picks a random song out of that folder and the user then has the ability to play it. Would you mind implementing your code into the code that is at the top of the page? Thanks for all the help! Link to comment Share on other sites More sharing options...
justsomeguy Posted November 30, 2012 Share Posted November 30, 2012 You need to get a web server and upload all of the songs to it. If the songs are copyrighted then you might have legal issues with that. Once you have your site online then you can add the PHP code to your page that has the players on it. In the second piece of code it gets the 2 filenames, after that you can use echo or print to write those filenames in your HTML code where they go. You should familiarize yourself with the basics of PHP: http://www.w3schools.com/php/php_intro.asp The manual page for the echo statement has several examples: http://www.php.net/manual/en/function.echo.php Like the tutorials mention, you need to name your files with a .php extension in order for the PHP code to get executed. I would recommend you go through those tutorials to learn the basics of PHP. The only thing missing from the code above is the echo statements to write the filenames to your page where you want them to go, there are several examples of doing that in the tutorials. Link to comment Share on other sites More sharing options...
BenRobertson Posted November 30, 2012 Author Share Posted November 30, 2012 Thanks Link to comment Share on other sites More sharing options...
BenRobertson Posted December 4, 2012 Author Share Posted December 4, 2012 You need to get a web server and upload all of the songs to it. If the songs are copyrighted then you might have legal issues with that. Once you have your site online then you can add the PHP code to your page that has the players on it. In the second piece of code it gets the 2 filenames, after that you can use echo or print to write those filenames in your HTML code where they go. You should familiarize yourself with the basics of PHP: http://www.w3schools...p/php_intro.asp The manual page for the echo statement has several examples: http://www.php.net/m...nction.echo.php Like the tutorials mention, you need to name your files with a .php extension in order for the PHP code to get executed. I would recommend you go through those tutorials to learn the basics of PHP. The only thing missing from the code above is the echo statements to write the filenames to your page where you want them to go, there are several examples of doing that in the tutorials. Hi again, PHP will only work once the site is actually on a web based server, correct? Also, how to I get the two audio players to select the music once the PHP script has picked the two random audio files? Thank you very much for your time. Link to comment Share on other sites More sharing options...
justsomeguy Posted December 4, 2012 Share Posted December 4, 2012 PHP needs a web server to run. You can install your own web server to test locally if you want to, packages like WAMP and XAMPP try to make that easy. You just use PHP to output HTML code, so you'll have PHP output the HTML code that you want in order to get the files to play. You can take the code you have and substitute the filenames in that code with some PHP code that gets the filename and prints it in the code. In the end the browser just sees regular HTML code, it doesn't know or care that PHP created that code. Link to comment Share on other sites More sharing options...
BenRobertson Posted December 4, 2012 Author Share Posted December 4, 2012 So... For the part in my code - <source src="RIEY.m4a" type="audio/mpeg">. Would I put $fname1 were RIEY.m4a is currently positioned? Also can PHP go in any part of the code or does it have to be in say... the body section? Link to comment Share on other sites More sharing options...
justsomeguy Posted December 4, 2012 Share Posted December 4, 2012 You can put PHP wherever you want, PHP processes the file first and the result is sent to the browser. You can use PHP to output HTML, CSS, Javascript, whatever else goes on a page. The browser only sees the result, no PHP code gets sent to the browser. The browser can't execute PHP code. PHP can create images or PDF documents or whatever else you want to send. <source src="<?php echo $fname1; ?>" type="audio/mpeg"> Link to comment Share on other sites More sharing options...
BenRobertson Posted December 5, 2012 Author Share Posted December 5, 2012 Hi I set up a Local Host XAMPP server but the PHP code didn't work. Here is the code, would you mind pointing out any errors? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><title>tunesmash</title><style type+text/css>body {color : black;}a {text-decoration: none; color: white;}#motto {left:33%;position:absolute;top:6%;width:5s0%;}#header {left:5%;position:absolute;top:2%;width:50%;}#upload {left:23%;position:absolute;top:12%;width:50%;}#why {left:17%;position:absolute;top:12%;width:50%;}#about {left:11%;position:absolute;top:12%;width:50%;}#home {left:5%;position:absolute;top:12%;width:50%}#credits {left:40%;position:absolute;top:94%;width:50%;}#body {left:15%;position:absolute;top:45%;width:75%;}#audio1 {left:30%;position:absolute;top:35%;width:10%;}#audio2 {left:55%;position:absolute;top:35%;width:10%;}#title {left:23%;position:absolute;top:25%;width:70%;}.bg {width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: -5000;}</style><img src="bgindex2.jpg" class="bg"><div id=header><h2><font face=verdana color=white size=8>tunesmash.com</font></h2></div><div id=motto><font face=verdana size=5 color=white><b>smashing tunes just got better</b></div></font><div id=title><b><font face=verdana size=5 color=black>Tunesmash.com is designed to take the ridicule of bad music to the web</font></b></div><div id=audio1><audio controls="controls"><source src="<?php echo $fname1; ?>" type="audio/mpeg"></audio></div><div id=audio2><audio controls="controls"><source src="<?php echo $fname2; ?>" type="audio/mpeg"></audio></div><div id=body><font face=verdana size=4><center><p>To vote, simply click on the thumbs-up icon below the song you like the most. Tunesmash will automatically refresh the page with new songs.</p><p>If you like the song then download it. Right click on whichever song you like and select "Save audio as". Choose the local save directory for the audio and itwill download.</p><p>You must be using Google Chrome as this site has HTML5 elements in it.</p><p>Click <a href=legal.html><font color=navy blue>here</font></a> to view legal notes</a></p></center></font></div><div id=credits><font face=verdana size=2 color=black><b><p>a ben robertson and alister hughes production</p></b></font></div><font face=verdana size=5.5><div id=home><a href=index.html>home</a></div><div id=about><a href=about.html>about</a></div><div id=why><a href=why.html>why</a></div><b></b><div id=upload><a href=upload.html>upload</a></div></font><a href=index.html><IMG STYLE="position:absolute; TOP:40%; LEFT:38%; WIDTH:29px; HEIGHT:37px" SRC="thumbsup.JPG"></a><a href=index.html><IMG STYLE="position:absolute; TOP:40%; LEFT:63%; WIDTH:29px; HEIGHT:37px" SRC="thumbsup.JPG"></a><?php$files = glob('C:\xampp\htdocs\Audio*.m4a');$random = array_rand($files, 2); // get 2 random keys that won't be the same$fname1 = $files[$random[0]];$fname2 = $files[$random[1]];?></body></html> Link to comment Share on other sites More sharing options...
justsomeguy Posted December 5, 2012 Share Posted December 5, 2012 The code to get the random filenames is after the code to print them. When you print them you haven't gotten them yet, those variables are empty. Also, if Audio is a directory that contains your files then you need another slash after it, right now that glob pattern is looking for files in the htdocs directory that begin with "Audio" in the filename. Link to comment Share on other sites More sharing options...
BenRobertson Posted December 5, 2012 Author Share Posted December 5, 2012 It still won't work. I put the code to get a random filename above the code of the audio player and tried to no avail. I am beginning to think that the audio could be a sever related thing as all the files for the website are still stored on my pc, their just running through XAMPP in the browser. I have uploaded a screenshot of the issue here:http://s1340.beta.photobucket.com/user/RottenToads/media/tunesmashscreenschot.jpg.html?sort=3&o=0 and also the code again just to be doubly sure. Thanks <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><title>tunesmash</title><style type+text/css>body {color : black;}a {text-decoration: none; color: white;}a:hover {color: #B1B2B1;}#motto {left:33%;position:absolute;top:6%;width:5s0%;}#header {left:5%;position:absolute;top:2%;width:50%;}#upload {left:22%;position:absolute;top:12%;width:50%;}#why {left:17%;position:absolute;top:12%;width:50%;}#about {left:11%;position:absolute;top:12%;width:50%;}#home {left:5%;position:absolute;top:12%;width:50%}#credits {left:40%;position:absolute;top:94%;width:50%;}#body {left:15%;position:absolute;top:45%;width:75%;}#audio1 {left:30%;position:absolute;top:35%;width:10%;}#audio2 {left:55%;position:absolute;top:35%;width:10%;}#title {left:23%;position:absolute;top:25%;width:70%;}.bg {width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: -5000;}</style><img src="bgindex2.jpg" class="bg"><div id=header><h2><font face=verdana color=white size=8>tunesmash.com</font></h2></div><div id=motto><font face=verdana size=5 color=white><b>smashing tunes just got better</b></div></font><div id=title><b><font face=verdana size=5 color=black>Tunesmash.com is designed to take the ridicule of bad music to the web</font></b></div><?php$files = glob('C:\xampp\htdocs\Audio\*.m4a');$random = array_rand($files, 2);$fname1 = $files[$random[0]];$fname2 = $files[$random[1]];?><div id=audio1><audio controls="controls"><source src="<?php echo $fname1; ?>" type="audio/mpeg"></audio></div><div id=audio2><audio controls="controls"><source src="<?php echo $fname1; ?>" type="audio/mpeg"></audio></div><div id=body><font face=verdana size=4><center><p>To vote, simply click on the thumbs-up icon below the song you like the most. Tunesmash will automatically refresh the page with new songs.</p><p>If you like the song then download it. Right click on whichever song you like and select "Save audio as". Choose the local save directory for the audio and itwill download.</p><p>You must be using Google Chrome as this site has HTML5 elements in it.</p><p>Click <a href=legal.html><font color=navy blue>here</font></a> to view legal notes</a></p></center></font></div><div id=credits><font face=verdana size=2 color=black><b><p>a ben robertson and alister hughes production</p></b></font></div><font face=verdana size=5.5><div id=home><a href=index.html>home</a></div><div id=about><a href=about.html>about</a></div><div id=why><a href=why.html>why</a></div><b></b><div id=upload><a href=upload.html>upload</a></div></font><a href=index.html><IMG STYLE="position:absolute; TOP:40%; LEFT:38%; WIDTH:29px; HEIGHT:37px" SRC="thumbsup.JPG"></a><a href=index.html><IMG STYLE="position:absolute; TOP:40%; LEFT:63%; WIDTH:29px; HEIGHT:37px" SRC="thumbsup.JPG"></a></body></html> Link to comment Share on other sites More sharing options...
justsomeguy Posted December 5, 2012 Share Posted December 5, 2012 It seems fine to me. View the source code in the browser and make sure it's printing the correct stuff. You can also open your browser's developer tools to look for the requests going out for the audio files to see if the browser is finding them. Unless that page is inside the Audio directory then you'll need to add that directory to the path, the variables will only contain the actual filename without the directory path. Link to comment Share on other sites More sharing options...
BenRobertson Posted December 6, 2012 Author Share Posted December 6, 2012 When I used Ctrl-Shift-I on Google Chrome it brought up a set of developer tools. This code here: <?php$files = glob('C:\xampp\htdocs\Audio\*.m4a');$random = array_rand($files, 2);$fname1 = $files[$random[0]];$fname2 = $files[$random[1]];?> Appeared as if it was a comment, like this: <!--?php$files = glob('C:\xampp\htdocs\Audio\*.m4a');$random = array_rand($files, 2);$fname1 = $files[$random[0]];$fname2 = $files[$random[1]];?--> I'm not sure why, would you mind explaining? Link to comment Share on other sites More sharing options...
Ingolme Posted December 6, 2012 Share Posted December 6, 2012 That means that your server isn't executing the PHP and is sending it to the client as text.Does the file have a .php extension? Link to comment Share on other sites More sharing options...
BenRobertson Posted December 6, 2012 Author Share Posted December 6, 2012 Hey, No the file is only currently has an HTML extension as that was the first language I used. If I was to make it PHP would all of the html still run correctly? Link to comment Share on other sites More sharing options...
thescientist Posted December 6, 2012 Share Posted December 6, 2012 (edited) Like the tutorials mention, you need to name your files with a .php extension in order for the PHP code to get executed. I would recommend you go through those tutorials to learn the basics of PHP. Edited December 6, 2012 by thescientist Link to comment Share on other sites More sharing options...
BenRobertson Posted December 6, 2012 Author Share Posted December 6, 2012 Ok, so the PHP is working now but the play button on the audio is grayed out as you can see in this picture here: http://s1340.beta.ph...html?sort=3&o=0. The reason I can see that the PHP is being executed is if I right-click, then go "Inspect Element", then find the audio code and refresh the page you can see that the song title changes (but only in the code). Any ideas on how I can fix the issue involving the audio player being grayed out? 1 Link to comment Share on other sites More sharing options...
justsomeguy Posted December 6, 2012 Share Posted December 6, 2012 Is the filename correct? Can it find the file? You can use your browser's developer tools to see the request go out for the file to see if the browser finds it. Link to comment Share on other sites More sharing options...
thescientist Posted December 6, 2012 Share Posted December 6, 2012 as suggested, have you looked at the output of your code? I.e view source from the browser? Are all the tags opened and closed correctly? Try validating your code just make sure, and as also mentioned, make sure the paths to the audio files are correct. You should be able to open the path in your browser just as it is in the HTML, relative to the PHP file you are working on. Link to comment Share on other sites More sharing options...
BenRobertson Posted December 7, 2012 Author Share Posted December 7, 2012 (edited) Okay, so after a bit of delving into the code that is read by the browser I have discovered something that may be effecting the program. If I right click on the random audio files directory inside Google Chrome's "inspect element" interface and then press "open link in new tab" I am confronted with a page reading exactly this: Access forbidden!You don't have permission to access the requested object. It is either read-protected or not readable by the server.If you think this is a server error, please contact the webmaster. Error 403 localhost Apache/2.4.3 (Win32) OpenSSL/1.0.1c PHP/5.4.7 Could this mean that my local XAMPP server is not allowing me to access/play the file even though the PHP script can find it? Edited December 7, 2012 by BenRobertson Link to comment Share on other sites More sharing options...
justsomeguy Posted December 7, 2012 Share Posted December 7, 2012 Yeah, the permissions on that directory or file don't allow the web server to access it. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now