I recently started learning web developing and I am currently working on a web page that reads a number of audio files in a folder and lets the user write a transcript about what she/he had heard. I started a few days ago and I managed to get a list of files via php and play(let the user play actually) a random file via shuffling the array(to be clear, every time the page is loaded a random file is ready to be played). This seems to be working fine.
I also wanted to add to buttons that would let the user listen to the next/previous files, but whenever or wherever I write the next($array) line it doesn't work and what is worse is that the shuffle function also stops working. I don't know whether or not it is because I am using php in tags but something in my gut tells me so.
I don't know if I was clear enough but I would appreciate any help. So here is my code:
<html>
<head>
</head>
<body>
<p align="center">
<button><-</button>
<audio src="./Sound data/AAA2028C4_0.wav" type="audio/wav" align="center" id="RandomAudio" controls="controls">
</audio>
<button name="nextButton" onClick="next()">-></button>
</p>
<script language="JavaScript" type="text/javascript">
<?php
//Scan the sound data folder for files
$dir = './Sound data';
$files = scandir($dir);
$random_file = shuffle($files);
?>;
function load(){
var test = "./Sound data/<?php
//Select random element from files array
echo $files[$random_file];
?>";
//Play a random file
document.getElementById('RandomAudio').src=test;
}
function next(){
var next = "./Sound data/<?php
$next_file = next($random_file);
echo $files[$next_file];
?>";
//Play the next file
document.getElementById('RandomAudio').src=next;
}
window.onload = load;
</script>
<form method="post" action="testecho.php" align="center">
<strong><label>Transcript : </label></strong>
<br>
<textarea name ="transcript" rows="2" cols="40"> </textarea>
<input type="submit" />
</form>
</body>
</html>
For each function you use, take a look in the manual. That helps to get used to them.
Let's go through:
$random_file = shuffle($files);
The shuffle function returns TRUE or FALSE. So the $random_file variable is only of information if the array $files has been successfully shuffled or not.
echo $files[$random_file];
Is therefore totally bogus. $files has been shuffled already and $random_file is TRUE or FALSE. But array keys are integers or strings.
I'm pretty sure you figure it out how to fix that.
Similarly with next:
$next_file = next($random_file);
echo $files[$next_file];
Even though $next_file is the next file already if $random_file would have been the shuffled $files array (it is not, see above), there would be no need to use it as key in the next line:
echo $files[$next_file];
That does not make any sense. Write your code step by step. Use debugging function like var_dump to display what happens. Double-check the PHP manual for the function you're currently using. Then write the code line-by-line and you have it ready quickly and learned a lot.
Don't fly blind. Print out before and after each function call and check if what you expect the function to do is really done.
Well you've a conflict with the PHP build in function next. Just try it whith another name.
You can't do it this way because PHP part will be run once on page load. Try to convert PHP array in JSON and use it directly from JS, without PHP.