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>
