Echo html5 audio before usleep

Question

I want to echo a html5 audio tag to play while usleep. For some reason it's not working and the audio gets echoed after the usleep.

This is my code:

echo '<audio autoplay><source src="long_001.wav" type="audio/wav"></audio>';
usleep(5000000);
echo '<img class="bg1" src="RoodScherm.png">';

PHP doesn't work like that. You will be wanting javascript to *interact* with the elements on the server and the browser. — Martin, Mar 15 '18 at 13:29
I'm voting to close this question as off-topic because it's a misunderstanding of the languages: trying to use PHP as if it's Javascript. This question can not be answered with the languages specified. — Martin, Mar 15 '18 at 13:31
@Syscall `flush() has no effect on any client-side buffering in the browser.` — Martin, Mar 15 '18 at 13:32
Broad and complicate topic, way less trivial than you might think. Start with https://stackoverflow.com/questions/3133209/how-to-flush-output-after-each-echo-call — CBroe, Mar 15 '18 at 13:41

score 0 · Accepted Answer · answered Mar 15 '18 at 13:38

Rob think of it like this:

PHP is a cake; when you run the script on the server it mixes the ingredients and cooks the cake.

But when the browser displays the page; it's only eating the cake. You can not eat the first half of the cake while the other half is still cooking, PHP does not naively provide data in "chunks"; it's all or nothing from the server to the browser. It is an all-or-nothing delivery of cake.

Your efforts so far look like you're trying to "chunk" the data/cake and that simply won't work in PHP unless you employ possibly some needlessly complex system of output_buffering.

So; send EVERYTHING to the browser and use Javascript (jQuery) to tell the browser to use one DOM element before another.

Recommendations: Tell PHP simply to load both elements into the browser and use JQuery to then display one (the image) after the other (the sound) has played, using CSS transitions and JQuery event drivers.

Echo html5 audio before usleep

1 Answers1