If you really have to proxy it over your script (if there was any Google API auth token), then package up the binary data into a base64
data: URL for the
<?php // Content-Type for whole PHP output remains text/html $voice = file_get_contents('http://translate.google.com/translate_tts?tl=' . urlencode($_POST['language']) . '&q=' . urlencode($_POST['word']) . ''); ?> <audio controls="controls" autoplay> <source src="data:audio/mpeg;base64,<?php echo base64_encode($voice); ?>" /> </audio>
However that's a larger transfer.
The actual answer, as already given, is that you should separate content types. Your script should only return the audio data, not mixed html and binary content. In essence it should just be:
<?php header("Content-Type: audio/mpeg"); readfile('http://translate.google.com/translate_tts?tl=' . urlencode($_POST['language']) . '&q=' . urlencode($_POST['word']) . ''); ?>
So instead you had to construct the
<audio> tag via jQuery (insted of ajax loading it):
$("#speakWord") .html("<audio... src='speakWord.php?language=nl&word=test'></audio>");
src= attribute retrieves the output from your speakWord script, which in turn pulls it over from the translate service.