用二进制音频数据嵌入 src

Question

我需要动态嵌入返回的音频数据，以便播放请求的 mpeg。

<embed src=正在寻找文件路径，但我本地没有文件。

我成功请求 returns audio/mpeg 二进制数据：

    $.get('testPHP.php?translate_tts?ie=utf-8&tl=zh-CN&q=你好',
        function (returned_data) {
            document.getElementById("audio").innerHTML=
                "<embed src=\""+returned_data+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
        }
    );

如何使用该数据创建音频元素？

PHP:

<?php
header('Content-type: text/plain; charset=utf-8');
$params = http_build_query(array("ie" => $_GET['ie'],"tl" => $_GET["tl"], "q" => $_GET["q"]));
$ctx = stream_context_create(array("http"=>array("method"=>"GET","header"=>"Referer: \r\n"))); //create and return stream context
$soundfile = file_get_contents("https://translate.google.com/translate_tts?".$params, false, $ctx); //reads file into string (string with params[utf-8, tl, q], use include path bool, custom context resource headers)

header("Content-type: audio/mpeg");
header("Content-Transfer-Encoding: binary");
header('Pragma: no-cache');
header('Expires: 0');

echo base64_encode($binary_data);

编辑：如果我直接从我的服务器中提取音频，我可以播放音频：

    var returned_data = '/recordings/subjects/Wo_I.mp3';
    document.getElementById("audio").innerHTML=
        "<embed src=\""+returned_data+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";

Resource interpreted as Document but transferred with MIME type audio/mpeg: "http://melon.localhost/recordings/subjects/Wo_I.mp3".

如果我在上面 PHP 中尝试使用 base64 编码...

'<embed src="data:audio/mpeg;base64,'+returned_data+'" hidden="true" autostart="true" loop="false"/>'

它用 MIME 传输到 audio/mpeg，但没有播放音乐。

Resource interpreted as Document but transferred with MIME type audio/mpeg: "data:audio/mpeg;base64,".

Answer 1

您可以使用 PHP 对音频文件进行 base64 编码，然后将数据直接放入 <embed> 标签中。

在您的 PHP 中，发送 header("Content-type: text/plain");（因为您现在将发送纯文本）并使用 base64_encode():

对音频文件进行 base64 编码

echo base64_encode($binary_data);

然后在你的 JavaScript 中，你可以将其直接放入 <embed> 标签中：

elem.innerHTML = '<embed src="data:audio/mpeg;base64,'+returned_data+'" hidden="true" autostart="true" loop="false"/>';

请注意，当您进行 base64 编码时，大小约为其等效二进制文件的 4/3，因此如果您要传输大型音频文件，最好使用 Javascript 进行编码。不幸的是，由于没有本机 javascript 函数来对二进制数据进行 base64 编码，因此 here's an example 如何做到这一点。

用二进制音频数据嵌入 src

embed src with binary audio data

php

rest

audio

binary