Как играть аудио JavaScript

Question

У меня есть веб-сайт, который обращается к 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();
    }
});

Запрос возвращает строку, содержащую много странных символов и "LAME3.99.5", и я не знаю, как воспроизвести этот mp3. new Audio(audio).play(); не работает, потому что у меня нет имени файла, а есть необработанный файл.

Answer 1

Я решил точно такую ​​же проблему некоторое время назад, используя Iframe. Единственное отличие состоит в том, что я использовал IBM Cloud (тогда еще называвшийся Bluemix) для запуска экземпляра Node-RED, который, в свою очередь, называл IBM Watson для преобразования текста в речь.

Это код 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);
     });

Это HTML-код для iframe:

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

Answer 2

В простом JS вы получаете свои данные, конвертируете их в base64, добавляете их как <source> на ваш <audio>, а потом ты просто играешь. Например ( http://jsbin.com/xuvemuziko/edit?js,output):

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));