Jump to content
Sign in to follow this  
BenRobertson

How do I make a random audio file play

Recommended Posts

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>

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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]];

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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">

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites
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 by thescientist

Share this post


Link to post
Share on other sites

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?

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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
.
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 by BenRobertson

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...