div中的標題（“Content-Type：audio / mpeg”）

Question

我有一個文件speakWord.php：

<?php
header("Content-Type: audio/mpeg");
$voice = file_get_contents('http://translate.google.com/translate_tts?tl=' . urlencode($_POST['language']) . '&q=' . urlencode($_POST['word']) . '');
?>

<audio controls="controls" autoplay>
    <source src="<?php echo $voice; ?>"  />
</audio>

現在我想使用jquery加載這個mp3文件的結果並將其輸出到div中：

$("#speakWord")
.load("speakWord.php", {
    language: "nl",
    word: "test"
});

當我檢查div的來源時，它會變成奇怪的東西：

<source src="��@��#a�F(��y2i���Ǵ1�L A�@���'!D����΂��8" �="">

我認為在裝入div時，speakWord.php中的標題信息丟失了，我想我錯過了一個部分..

Answer 1

如果您真的必須通過腳本代理它（如果有任何Google API身份驗證令牌），則將二進制數據打包為base64 data: src=屬性的URL。

<?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>

然而，這是一個更大的轉移。

已經給出的實際答案是您應該分離內容類型。 您的腳本應僅返回音頻數據，而不是混合的html和二進制內容。 本質上它應該只是：

<?php
  header("Content-Type: audio/mpeg");
  readfile('http://translate.google.com/translate_tts?tl=' . urlencode($_POST['language']) . '&q=' . urlencode($_POST['word']) . '');
?>

所以你必須通過jQuery構建<audio>標簽（加載它的ajax）：

$("#speakWord")
.html("<audio... src='speakWord.php?language=nl&word=test'></audio>");

所以這個src=屬性從speakWord腳本中檢索輸出，然后從translate服務中提取它。

Answer 2

src=意味着指向一個URL，而不是用二進制數據填充。

你必須要么

• 使用適當的標頭發送二進制數據
• 或者發送一個HTML片段，引用（但不包含 ）二進制數據。

不是兩個在同一時間。