Play audio from the IBM Watson Text to Speech service

This flow sets up a HTML page that automatically plays audio from the IBM Watson "Text to Speech" service.

There's a static web page (available @ '/audio') which listens on a WebSocket connection for incoming audio content. Each time a new message is received, the audio is automatically played through the browser using the HTML

We're connecting messages from the existing IBM Watson "Text to Speech" node, made available with this package, to a WebSocket output.

[{"id":"55d0a3b9.aa2f5c","type":"websocket-listener","path":"/ws/audio","wholemsg":"false"},{"id":"e004d52e.1ffb28","type":"watson-text-to-speech","name":"","lang":"english","voice":"en-US_MichaelVoice","x":418.90909576416016,"y":73.27272891998291,"z":"f006562d.0ff9a8","wires":[["ccc0d6a7.333f28"]]},{"id":"9bc0807a.643f8","type":"inject","name":"","topic":"","payload":"Hello my name is James","payloadType":"string","repeat":"","crontab":"","once":false,"x":164,"y":302,"z":"f006562d.0ff9a8","wires":[["e004d52e.1ffb28"]]},{"id":"4b07713c.b4f89","type":"websocket out","name":"","server":"55d0a3b9.aa2f5c","client":"","x":591,"y":280,"z":"f006562d.0ff9a8","wires":[]},{"id":"d40476c1.2bfb88","type":"http in","name":"","url":"/audio","method":"get","swaggerDoc":"","x":144.7272720336914,"y":399.63636112213135,"z":"f006562d.0ff9a8","wires":[["54f6b9f2.ab0948"]]},{"id":"4953a184.b6ac6","type":"http response","name":"","x":567.2727603912354,"y":407.90907764434814,"z":"f006562d.0ff9a8","wires":[]},{"id":"54f6b9f2.ab0948","type":"template","name":"","field":"","template":"<!DOCTYPE html>\n<html>\n<head>\n  <title>IBM Watson - Text To Speech</title>\n  <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js\"></script>\n  \n  <script type=\"text/javascript\">\n    var socketaddy = \"ws://\" + window.location.host + \"/ws/audio\";\n\n    $(document).ready(function(){\n      var output = document.getElementById('output')\n      $('#output').on('playing', function () {\n          $('#text').text('Playing audio.')\n          \n      });\n      $('#output').on('ended', function () {\n          $('#text').text('Waiting for audio...')\n          \n      });\n      sock = new WebSocket(socketaddy);\n      sock.onopen = function(){\n          $('#text').text('Waiting for audio...');\n          console.log(\"Connected websocket\");\n      };\n      sock.onerror = function(){ \n          console.log(\"Websocket error\"); \n      };\n      sock.onclose = function () {\n          $('#text').text('Not connected. Refresh the page?')\n      }\n      sock.onmessage = function(evt){\n        console.log(\"Websocket message\", evt); \n        output.src = window.URL.createObjectURL(evt.data);\n        output.play();\n      };\n    });\n  </script>\n  \n</head>\n<body style=\"font-size: 56px; font-family: helvetica; text-align: center; margin-top: 100px;\">\n  <div id=\"text\">Connecting...</div>\n  <audio id=\"output\"></audio>\n</body>\n</html>","x":361.7272720336914,"y":406.63636112213135,"z":"f006562d.0ff9a8","wires":[["4953a184.b6ac6"]]},{"id":"ccc0d6a7.333f28","type":"function","name":"","func":"msg.payload = msg.speech;\nreturn msg;","outputs":1,"noerr":0,"x":432.7272727272727,"y":191.8181818181818,"z":"f006562d.0ff9a8","wires":[["4b07713c.b4f89"]]}]
jthomas

Flow Info

created 1 year, 10 months ago

Node Types

Core
  • function (x1)
  • http in (x1)
  • http response (x1)
  • inject (x1)
  • template (x1)
  • websocket out (x1)
  • websocket-listener (x1)
Other

Tags

  • bluemix
  • watson
  • sound
  • audio
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option