current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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>
share|improve this question
1  
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 Oct 28 '12 at 16:10

3 Answers 3

up vote 2 down vote accepted

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.

share|improve this answer
    
thanks a lot! honestly it did not occur to me that shuffle would return a boolean variable. –  Revangelis Oct 28 '12 at 22:42
    
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 Oct 30 '12 at 14:51
    
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 Oct 30 '12 at 14:52
    
the function looks like this now sorry its not very readable in the comment. any tips you could give me? –  Revangelis Oct 30 '12 at 14:52
up vote 0 down vote

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

share|improve this answer
up vote 2 down vote

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.

share|improve this answer
    
i will give it a try, thank you. –  Revangelis Oct 28 '12 at 22:42

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.