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.