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 tag.
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"]]}] |
Thanks for sharing - just an FYI in case others encounter the same issue, to overcome a Firefox Websocket security issue, I had to change ws:// to wss:// in the HTML template.
Excellent idea! I adapted this for use in a late-night hackathon idea!