如何播放音频javascript

我有一个网站，可以访问一个API，它可以将文本转换为语音，返回mp3（或其他格式）。这是发出请求并尝试播放音频的代码：

$.ajax({
    url: 'https://westus.tts.speech.microsoft.com/cognitiveservices/v1',
    type: 'post',
    data: '<speak version="1.0" xmlns="http://www.w3.org/2001/10/synthesis" xml:lang="en-US"><voice  name="Microsoft Server Speech Text to Speech Voice (en-US, JessaRUS)">Hello, world!</voice></speak>',
    headers: {
        'Content-Type': 'application/ssml+xml', 'X-Microsoft-OutputFormat': 'audio-16khz-64kbitrate-mono-mp3', 'User-Agent': 'Chat', 'Authorization': token
    },
    success: function (audio) {
        console.log(audio);
        new Audio(audio).play();
    }
});

$.ajax({
网址：'https://westus.tts.speech.microsoft.com/cognitiveservices/v1',
键入：“post”，
数据：“你好，世界！”，
标题：{
“内容类型”：“应用程序/ssml+xml”，“X-Microsoft-OutputFormat”：“音频-16khz-64kbitrate-mono-mp3”，“用户代理”：“聊天”，“授权”：令牌
},
成功：功能（音频）{
控制台日志（音频）；
新音频（Audio.play（）；
}
});

---

请求返回的是一个包含很多奇怪字符和“LAME3.99.5”的字符串，我不知道如何播放这个mp3<代码>新音频（音频）.play（）不起作用，因为我没有文件名，而是一个原始文件。

不久前，我使用Iframe解决了完全相同的问题。唯一的区别是，我使用IBMCloud（当时称为Bluemix）运行一个NodeRED实例，该实例又称为IBMWatson，用于文本到语音的转换

这是jQuery代码：

var audio = $('#audio');

//*** Button actions
$("#btnSpeak").on("click", function(e) {
    e.preventDefault();
    // Remove any existing iframe element
    $("#iframeHost").html("");
    // Set the location of Node-RED flow to use
    var baseURL = "https://texasswedenodered.mybluemix.net/speak";
    // Get text to convert to speech
    var text = $("#text").val();
    // Calculate the URL of speech file to insert into iframe
    var url = baseURL+"?text=" + text;
    // Create iframe element in memory
    var iframe = $('<iframe id="audioframe" src="'+url+'" frameborder="1" width="10px" height="10px" style="display:none;"></iframe>');
        $("#iframeHost").append(iframe);
     });

var audio=$（'#audio'）；
//***按钮动作
$（“#btnSpeak”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
//删除任何现有的iframe元素
$（“#iframeHost”）.html（“”）；
//设置要使用的节点红色流的位置
var baseURL=”https://texasswedenodered.mybluemix.net/speak";
//获取要转换为语音的文本
var text=$（“#text”）.val（）；
//计算要插入iframe的语音文件的URL
var url=baseURL+“？text=“+text；
//在内存中创建iframe元素
变量iframe=$（''）；
$（“#iframeHost”）.append（iframe）；
});

这是iframe的HTML：

<div id="iframeHost"></div>

---

在纯JS中，您获取数据，将其转换为base64，将其作为

添加到

）：

var url=”https://archive.org/download/testmp3testfile/mpthreetest.mp3";
让createAudioElement=数据=>{
//我们需要一个和一个元素，因为网络音频就是这样工作的：
让音频=新音频（）；
让source=document.createElement（'source'）；
//我们知道这是一个mp3，所以使用它
source.type=“音频/mpeg”；
让base64=btoa（String.fromCharCode（…新的Uint8Array（data））；
source.src=`data:${source.type}；base64，${base64}`；
音频。附加子（源）；
//然后我们玩它。
音频播放（）；
};
让handleMP3response=响应=>{
响应
.arrayBuffer（）
.然后（创建音频元素）；
};
获取（url）
.然后（HandleMP3响应）
.catch（e=>console.error（e））；
第1步：使用浏览器或curl访问该URL，而不是jQuery，然后查看返回的内容。它实际上是一个mp3文件吗？如果是这样的话，那么你得到一个“包含很多奇怪字符”的字符串的事实是无关紧要的，因为你知道它是一个真正的mp3文件。如果不是，首先修复它。如果它是一个真正的mp3，那么你应该能够将它转换成一个数据uri，并将其用作音频源。它是一个mp3。如何将其转换为数据uri？请参阅我关于如何在纯JS中实现这一点的答案（适应jquery需要确保在
success
中提取实际数据，这与我使用纯JS fetch api的方式类似。鉴于浏览器现在可以开箱即用，我再也不用jquery了）
var url = "https://archive.org/download/testmp3testfile/mpthreetest.mp3";

let createAudioElement = data => {
  // we need an <audio> and a <source> element, because that's how web audio works:
  let audio = new Audio();
  let source = document.createElement('source');

  // we know this is an mp3, so use that
  source.type = "audio/mpeg";
  let base64 = btoa(String.fromCharCode(...new Uint8Array(data)));
  source.src = `data:${source.type};base64,${base64}`;
  audio.appendChild(source);

  // And then we play it.
  audio.play();  
};

let handleMP3response = response => {
  response
    .arrayBuffer()
    .then(createAudioElement);
};

fetch(url)
.then(handleMP3response)
.catch(e => console.error(e));