Array to Provide One Random MP3 to Audio Tag

[Beverleyh]

The #info-box markup is placed before the PHP so the $ftext variable isn't available to be echo'd into the div. If you move the PHP above #info-box, it should work though.

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

<!-- 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 {
?>

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

And I would imagine that the text you're seeing when you resize the browser is from the echo lines - 2 slashes in front will comment them out so that they don't execute (lines in red), but you can still keep them for future reference.

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?

I'm not fully understanding what you mean by "one path to one song" and "no additional selections listed". Can you clarify please?

As for a different song loading on each page load, that's only because I have nothing in there to stop it after the first view. Its easier that way to demonstrate the PHP randomising effect when your press F5.

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

Which version of Firefox are you using and what OS? I'm on Windows 7 at the moment, running Firefox 29.0.1, and its OK on that. I'm just downloading an update so I'll see what happens when that's installed...

... waiting ...

Firefox 32.0.2, and we're still good there... but another update is downloading so I'll try again in a mo...

... more waiting ...

Firefox 35.0 and everything is still fine.

Try updating at your side and see if it works for you then.

[KennyP]

Thank you once again Beverley. Just as you said, by moving the #info-box markup below the php and commenting out //echo $fname; and //echo $ftext; it works just great in IE and Chrome. However, still for some reason nothing at all displays in firefox. It was version 34.0.5 and now updated to version 35. I also am running Windows 7. It's weird that the same version browser doesn't display the box for me. Any ideas?

[Beverleyh]

Hmmmm, I'm not a regular Firefox user (hence the version leaps on today's update) and I tend to skip around 3 or 4 desktop/laptops depending on which office I'm in or if I'm at home or my dad's, so maybe it's because the computer I was at today had a vanilla FireFox install -- no plugins or addons (whatever the prefered term is for Firefox). Could you have extra things installed that are maybe creating a conflict at your side? Are you able to reset it to default settings?

I will be able to check on a laptop tomorrow, and I'll make a point of checking on my dads PC when I see him on Monday.

I'll post back with my findings then.

Have a great weekend!

[jscheuer1]

Exsqueeze me please. I haven't read all of this but I have some observations. If this is a PHP issue - the browser shouldn't make any difference. But - that said, as I say, I haven't been paying that close attention.

Anyways, if your PHP writes something out, all browsers will see that. Now of course it's possible that what the PHP writes out isn't standard. If that's the problem, you need to find out what the standard code is for what you are trying to output is and have the PHP on your server write it that way. It's also possible that there is no standard for what you want - not yet. That can happen. If that's the case you need the PHP to write out the provisional code (code that can be read by various browsers depending upon their capabilities). Again though, if that's the issue - it's still not PHP. It's how that code needs to be written. Google that, then write your PHP code to produce it.

[KennyP]

Beverley / John:

Thank you both very much for your help and input. Unfortunately however, your advice is way over my head. Any additional help from you would be very much appreciated.

A great weekend also to you, thank you.

[jscheuer1]

OK, this page seems to work well in Firefox here:

http://www.billyjoeconor.com

What exactly is the problem? No sound? No overlay? something else?

[KennyP]

Thanks for checking John. In every version of Firefox, including the last update, version 35, there is no overlay to display the name of the selection. In other browsers, IE and Chrome, it works perfectly.

[Beverleyh]

Hmmm, interesting.

I'm on a laptop here and am now seeing a problem, even on my demo page: http://fofwebdesign.co.uk/template/_...om-caption.php

I have found a fix, but bear with me while I explain how I got to it...

It seems that the song plays fine but the overlay only shows on its second play, like the song needs to be cached and start playing immediately for Firefox to trigger the overlay. So, if you hit refresh several times you'll intermittently start seeing the overlay and it will get more and more frequent as all the songs start being cached.

So this got me thinking - the autoplay setting in the audio tag markup is the problem because that's not being controlled by JavaScript, while the overlay is. They are not bound together in any way.

So now the fix... If you take autoplay="autoplay" out of the markup, and trigger autoplay via JavaScript instead, everything seems to be fine $('#bgAudio').trigger('play');. The song will play when enough of it has loaded and then the event listener for 'playing' can trigger the #info-box overlay at the same time.

(Demo updated with working code)

[KennyP]

WOW - Beverley - I'm amazed how you were able to figure it out! I just replaced the autoplay code and It's working for me in Firefox as well.

Thank you so, so much.

-- By tomorrow I hope to have a timeline and pause button displaying on the fretboard.

[KennyP]

Beverley:

Now I was able to add a working timeline and a play/pause button with the second section of javascript below.

Everything works well except for the audio fade-in function that I had removed and now I put back. It worked

previously, so something in the rest of the script is over-riding it. Can you please see what it is so it can work again?

A final detail: Because the audio starts automatically on page load, the button continues to display the Play mode

when it should display Pause. Can it be made to display Pause initially?

Test Page

<?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;
?>        
<div style="background-image:url(/imgs/guitar-background.png); max-width:100%; background-position:center center; background-repeat: no repeat;" id="info-box">

<div style="float:left; width:382px; margin-left:15px; margin-top:141px; line-height:1.9;"><!--<span style="color:red;"><b>Now Playing</b></span> a Preview of<br>-->'<b><i><?php echo $ftext; ?></i></b>'<!--<br>from <b><span style="color:red;">Billy Joe's</span></b> Debut CD--></div>

<audio id="bgAudio" preload="true">
  <source src="<?php echo $fname; ?>">
</audio>
    
<div style="width:400px; float:right; margin-right:0px; margin-left:0px; margin-top:132px" id="audioplayer">

  <div style="margin-left:0px; float:left; width:253px;" id="timeline">    
  		  <div id="playhead">
  </div>
</div>

</div>

<?php
} 
?>

<script>
jQuery(function($) { 

    $('#bgAudio').trigger('play'); 

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

</script>

<script>
var duration; // Duration of audio clip
var pButton = document.getElementById('pButton'); // play button

// timeline width adjusted for playhead
var timelineWidth = timeline.offsetWidth - playhead.offsetWidth;

// timeupdate event listener
bgAudio.addEventListener("timeupdate", timeUpdate, false);

// timeUpdate 
// Synchronizes playhead position with current point in audio 
function timeUpdate() {
	var playPercent = timelineWidth * (bgAudio.currentTime / duration);
	playhead.style.marginLeft = playPercent + "px";
	if (bgAudio.currentTime == duration) {
	}
}

//Play and Pause
function play() {
	// start music
	if (bgAudio.paused) {
		bgAudio.play();
		// remove play, add pause
		pButton.className = "";
		pButton.className = "pause";
	} else { // pause music
		bgAudio.pause();
		// remove pause, add play
		pButton.className = "";
		pButton.className = "play";
	}
}

// Gets audio file duration
 bgAudio.addEventListener("canplaythrough", function () {
	duration = bgAudio.duration;  
}, false);  

</script>