How to play audio javascript

Luciano Source

I have a website that accesses an API which does text to speech, returning an mp3 (or other formats). This is the code that makes the request and attempts to play the audio:

    url: '',
    type: 'post',
    data: '<speak version="1.0" xmlns="" 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) {
        new Audio(audio).play();

What is returned by the request is a string containing a lot of weird characters and "LAME3.99.5," and I don't know how to play this mp3. new Audio(audio).play(); doesn't work because I don't have a filename, but rather a raw file.



answered 2 months ago Karl-Henry Martinsson #1

I solved exactly the same problem a while back using an Iframe. The only difference is that I used IBM Cloud (back then called Bluemix) to run a Node-RED instance, which in turn called IBM Watson for the text-to-speech.

This is the jQuery code:

var audio = $('#audio');

//*** Button actions
$("#btnSpeak").on("click", function(e) {
    // Remove any existing iframe element
    // Set the location of Node-RED flow to use
    var baseURL = "";
    // 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>');

This is the HTML for the iframe:

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

answered 2 months ago Mike 'Pomax' Kamermans #2

In plain JS, you get your data, convert it to base64, add it as <source> to your <audio>, and then you just play it. For instance (,output):

var url = "";

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( Uint8Array(data)));
  source.src = `data:${source.type};base64,${base64}`;

  // And then we play it.;  

let handleMP3response = response => {

.catch(e => console.error(e));

comments powered by Disqus