Jump to content

How do I make a random audio file play

BenRobertson

By BenRobertson
in General

 Share

Recommended Posts

BenRobertson Newbie

BenRobertson

Posted
Posted

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
Link to comment
Share on other sites
BenRobertson Newbie

BenRobertson

Posted
  • Author
Posted

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
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

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
BenRobertson Newbie

BenRobertson

Posted
  • Author
Posted

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
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

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
BenRobertson Newbie

BenRobertson

Posted
  • Author
Posted
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
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

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
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

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
BenRobertson Newbie

BenRobertson

Posted
  • Author
Posted

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
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

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
BenRobertson Newbie

BenRobertson

Posted
  • Author
Posted

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
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

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
BenRobertson Newbie

BenRobertson

Posted
  • Author
Posted

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
thescientist w3schools Guru

thescientist

Posted
Posted (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 by thescientist
Link to comment
Share on other sites
BenRobertson Newbie

BenRobertson

Posted
  • Author
Posted

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
Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

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
BenRobertson Newbie

BenRobertson

Posted
  • Author
Posted (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
.
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
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...