It might also be worth taking a look at OOjs which seems to have some methods for building some of the components in php while still making them accessible from js. (I'm thinking the playback toolbar)

Are you thinking about having the same player UI when JS is disabled? I'm still not sure what (if any) of the functionality can be implemented without JS.

To set the sources for the audio elements, all the utterances will need to be requested on page load, unless there is a way to get around this using only PHP that I'm not aware of.

Since you don't want to load all the utterances if you're not interested in listening, there should be a link for "reloading with Wikispeech". This should also be accessible via URL parameter. It may be good to offer the possibility to load smaller parts of the page (e.g. one section). This would require reloading the page for each part.

This should be a separate task.

I think things have changed enough since this was created that it's better to start from scratch.