Array to Provide One Random MP3 to Audio Tag

[KennyP]

Can you guys please tell me why the PHP code below fails to provide an MP3 file to the audio tag?

There are seven mp3 files in the folder "bgAudio" that is in the root directory.

<?php 
$files = glob('/bgAudio/*.mp3');  // get all seven .mp3 files in bgAudio directory - 1.mp3, 2.mp3, 3.mp3, 4.mp3, 5.mp3, 6.mp3, and 7.mp3
$fname = $files[array_rand($files)]; // get a random filename 
echo $fname;
?>

<audio autoplay="autoplay" id="bgAudio">
  <source src="<?php echo $fname; ?>"/>
</audio>

<script>
jQuery(function($) {
    $("#bgAudio").prop('volume', .7);

    window.setVolume = function(bgAudio,vol) {
        sounds[bgAudio].volume = .7;
    }
});
</script>

[Beverleyh]

Looks like its due to the first backslash here;

$files = glob('/bgAudio/*.mp3');

Putting a backslash at the start of a path translates as "from the root", which wont work on a server (although it will in client-side HTML/CSS when it can resolve to your domain).

Your actual server root path will be something like '/home/www/mywebsite.com/' or '/home/user/public_html/mywebsite/', etc., so you can either use an absolute path;

$files = glob('/home/www/mywebsite.com/path/to/bgAudio/*.mp3');

OR use a relative path;

$files = glob('bgAudio/*.mp3');

The good news is that your code works fine - I tested it with a relative path here

[KennyP]

Thank you for your reply Beverley. It's also working for me by just removing the backslash as ('bgAudio/*mp3');
However, I fail to understand just how the script is able to find the folder 'bgAudio', which is sitting in the root, which is about four to five levels away from the header.php file.

Wait a second... is it able to find it because the header file is actually being called by the index.php file that is also located in the root?

Just out of curiosity however, why won't it work by using the server root path... /home/billyjoe/public_html/bgAudio/*.mp3
I believe that path is correct; 'bgAudio' is in the 'public_html' folder.

Question: Can a fade-in function be added to the audio tag or the rest of the code? I thought it would be a good idea to fade-in the sound in order to prevent visitors from being jolted out of their seats in case their sound volume is up too high

Thanks again

EDIT: Beverley - I got it working

I added...

$("#bgAudio").animate({volume: 1}, 6000);

[Deadweight]

I am not sure if this is what you are entirely looking for:
http://www.html5tutorial.info/html5-audio.php

[KennyP]

Thanks for your feedback deadweight, but no, that is not it.
I wanted the audio to fade-in, and finally I got it working by adding...

$("#bgAudio").animate({volume: 1}, 6000);

[Beverleyh]

Wait a second... is it able to find it because the header file is actually being called by the index.php file that is also located in the root?

Yes. It doesn't matter where the header or any other included files are - if the main index file/page is the one that's pulling them all together when its viewed in a web browser, then the audio folder path will be relative to that.

It should work with a full/absolute server path. It does for me. Double check what that is to make sure you haven't mistyped.

Glad you got the audio fade working though.

[KennyP]

Thanks Beverley.

I tried using the server path again unsuccessfully. According to the cPanel, the path is /home/billyjoe
Then, the folder bgAudio is in the public_html folder, which contains the rest of the website.
Therefore, you would think /home/billyjoe/public_html/bgAudio/*.mp3 is the correct full path. Not so. That still doesn't work.

I'm glad bgAudio/*.mp3 does work, so I'll just leave it at that for now.

Beverley, there is one last function I've been trying to add to this audio setup unsuccessfully.

Do you know how I can get a small overlay to display over the page only during the time that a music selection is playing, in order to display its title?

Random music selections play here, but only on a visitor's first visit per browsing session, and after the close of the splash/welcome page.

Thanks

[Beverleyh]

Like this? http://fofwebdesign.co.uk/template/_...om-caption.php

To get the Song Title from $fname, do something like this;

$ftext = ucwords(str_replace('_', ' ', basename($fname, '.mp3')));

I use underscores instead of spaces in my filenames so I used str_replace() to switch them back.

[Beverleyh]

Can you guys please tell me why the PHP code below fails to provide an MP3 file to the audio tag?

You know, I read your first post again and the penny just dropped...

Ok, so when you use the absolute server path $files = glob('/home/www/mywebsite.com/path/to/bgAudio/*.mp3'); and read all the mp3s in to the $files array, the paths that they print out will each be like "/home/billyjoe/public_html/bgAudio/*.mp3", which of course won't work in an HTML page (in the audio src) because an absolute path in HTML need to be something like "http://billyjoe.com/bgAudio/*.mp3" or "/bgAudio/*.mp3" (the way you formatted the absolute path in you first post makes total sense now). You would need to manipulate the $fname variable to strip it back to an HTML-friendly path format.

Whereas the relative path suits the PHP and HTML audio src just fine.

Doh, I am dippy sometimes. I only realised what was happening after I manipulated it for the $ftext variable in my post/demo above (and had a break, and ate lunch...)

[KennyP]

Beverley:

Thank you so much. The demo you posted is exactly what I'm looking for.
However, I tried reproducing it and although the overlay does display, I
can't get the song title to display. Below is the full code if you could see
what I'm doing wrong:

Website

"The penny just dropped..." That is very funny. I've never heard it before.
I'll play around with the path again after completing this title overlay.
Thank you for that.

CSS

#info-box { width:800px; height:326px; float:right; display:none; color:#fff; text-align:center; vertical-align:middle; font:22px/1.85em Arial, Verdana, Helvetica, sans-serif; position:relative; top:20%; right:10%; color:white; z-index:55;}

SCRIPT

<!-- START | SONG PREVIEW  ONLY ON FIRST VISIT -->
<div style="background-image:url(/imgs/guitar-background.png); position:center center; repeat: no repeat;" id="info-box"><p style="margin-top:100px; margin-right:400px;">A Preview Of<br>' <b><?php echo $ftext; ?></b> '<br>from <b><span style="color:red;">Billy Joe's</span> Debut CD</b></p></div>
<?php
if($revisit){
?>

<? 
} else {
?>

<?php 
$files = glob('bgAudio/*.mp3');  // get all .mp3 files in the music directory
$fname = $files[array_rand($files)]; // get a random filename
echo $fname;
$ftext = ucwords(str_replace('_', ' ', basename($fname, '.mp3'))); // get song title from $fname for display 
echo $ftext;
?>

<audio autoplay="autoplay" id="bgAudio">
  <source src="<?php echo $fname; ?>"/>
</audio>

<script>
jQuery(function($) {
	$("#bgAudio").prop('volume', .7);

	window.setVolume = function(bgAudio, vol) {
		sounds[bgAudio].volume = .7;
		}

	$('#bgAudio').on('playing', function() {
		$("#info-box").fadeIn();
		});
	$('#bgAudio').on('ended', function() {
		$("#info-box").fadeOut();
		});
	});

</script>
<?php
} 
?>
<!-- END | SONG PREVIEW ONLY ON FIRST VISIT -->

Also, for some reason, in Firefox the title display doesn't work in the demo as well as on the website.

Thank you so much Beverley.

PS - On your demo page there is just one path to one song . There are no additional selections listed,
and yet, on new page loads a different song plays? How is that possible?

EDIT: When you resize the window as in the attached screenshot, the song title and path display at the left upper corner.