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 (www.billyjoeconor.com/)
<?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>