PHP next($array) and Javascript

Question

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>

Take a look into the generated code of the website. Does it look correct? Also: next returns the next value already. So you can use it's return value straight away. — hakre
– hakre, Commented Oct 28, 2012 at 16:10

hakre · Accepted Answer · 2012-10-28 16:18:08Z

2

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.

answered Oct 28, 2012 at 16:18

hakre

200k55 gold badges454 silver badges865 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Revangelis Over a year ago

thanks a lot! honestly it did not occur to me that shuffle would return a boolean variable.

Revangelis Over a year ago

thanks again that was really helpful but now i can only access only the immediate next index. i mean the pointer is changed only somehow once in the nextelem function. i tried a bunch of things but can not seem to figure out the problem.

Revangelis Over a year ago

function nextelem(){ var nextElement = "./Sound data/<?php $current_id = current($files); $current_index = array_search($current_id, $files); $next_index = $current_index+1; //echo $next_index; echo $files[$next_index]; next($files); ?>"; //Play the next file document.getElementById('RandomAudio').src=nextElement; document.getElementById('position').innerHTML= nextElement; }

Revangelis Over a year ago

the function looks like this now sorry its not very readable in the comment. any tips you could give me?

Skpd · Accepted Answer · 2012-10-28 16:13:19Z

2

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.

answered Oct 28, 2012 at 16:13

Skpd

6703 silver badges17 bronze badges

Comments

bukart · Accepted Answer · 2012-10-28 16:11:46Z

0

Well you've a conflict with the PHP build in function next. Just try it whith another name.

answered Oct 28, 2012 at 16:11

bukart

4,9162 gold badges23 silver badges40 bronze badges

Collectives™ on Stack Overflow

PHP next($array) and Javascript

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related