react-speech
Version:
React component for the web speech synthesis api
1 lines • 16.2 kB
JavaScript
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactSpeech=t(require("react")):e.ReactSpeech=t(e.React)}(window,(function(e){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=7)}([function(t,n){t.exports=e},function(e,t,n){e.exports=n(4)()},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(6),r=Object.prototype.hasOwnProperty,s=Array.prototype.splice,a=Object.prototype.toString;function i(e){return a.call(e).slice(8,-1)}var u=Object.assign||function(e,t){return c(t).forEach((function(n){r.call(t,n)&&(e[n]=t[n])})),e},c="function"==typeof Object.getOwnPropertySymbols?function(e){return Object.keys(e).concat(Object.getOwnPropertySymbols(e))}:function(e){return Object.keys(e)};function p(e){return Array.isArray(e)?u(e.constructor(e.length),e):"Map"===i(e)?new Map(e):"Set"===i(e)?new Set(e):e&&"object"==typeof e?u(Object.create(Object.getPrototypeOf(e)),e):e}var l=function(){function e(){this.commands=u({},h),this.update=this.update.bind(this),this.update.extend=this.extend=this.extend.bind(this),this.update.isEquals=function(e,t){return e===t},this.update.newContext=function(){return(new e).update}}return Object.defineProperty(e.prototype,"isEquals",{get:function(){return this.update.isEquals},set:function(e){this.update.isEquals=e},enumerable:!0,configurable:!0}),e.prototype.extend=function(e,t){this.commands[e]=t},e.prototype.update=function(e,t){var n=this,s="function"==typeof t?{$apply:t}:t;Array.isArray(e)&&Array.isArray(s)||o(!Array.isArray(s),"update(): You provided an invalid spec to update(). The spec may not contain an array except as the value of $set, $push, $unshift, $splice or any custom command allowing an array value."),o("object"==typeof s&&null!==s,"update(): You provided an invalid spec to update(). The spec and every included key path must be plain objects containing one of the following commands: %s.",Object.keys(this.commands).join(", "));var a=e;return c(s).forEach((function(t){if(r.call(n.commands,t)){var o=e===a;a=n.commands[t](s[t],a,s,e),o&&n.isEquals(a,e)&&(a=e)}else{var u="Map"===i(e)?n.update(e.get(t),s[t]):n.update(e[t],s[t]),c="Map"===i(a)?a.get(t):a[t];n.isEquals(u,c)&&(void 0!==u||r.call(e,t))||(a===e&&(a=p(e)),"Map"===i(a)?a.set(t,u):a[t]=u)}})),a},e}();t.Context=l;var h={$push:function(e,t,n){return y(t,n,"$push"),e.length?t.concat(e):t},$unshift:function(e,t,n){return y(t,n,"$unshift"),e.length?e.concat(t):t},$splice:function(e,t,n,r){return function(e,t){o(Array.isArray(e),"Expected $splice target to be an array; got %s",e),b(t.$splice)}(t,n),e.forEach((function(e){b(e),t===r&&e.length&&(t=p(r)),s.apply(t,e)})),t},$set:function(e,t,n){return function(e){o(1===Object.keys(e).length,"Cannot have more than one key in an object with $set")}(n),e},$toggle:function(e,t){d(e,"$toggle");var n=e.length?p(t):t;return e.forEach((function(e){n[e]=!t[e]})),n},$unset:function(e,t,n,o){return d(e,"$unset"),e.forEach((function(e){Object.hasOwnProperty.call(t,e)&&(t===o&&(t=p(o)),delete t[e])})),t},$add:function(e,t,n,o){return v(t,"$add"),d(e,"$add"),"Map"===i(t)?e.forEach((function(e){var n=e[0],r=e[1];t===o&&t.get(n)!==r&&(t=p(o)),t.set(n,r)})):e.forEach((function(e){t!==o||t.has(e)||(t=p(o)),t.add(e)})),t},$remove:function(e,t,n,o){return v(t,"$remove"),d(e,"$remove"),e.forEach((function(e){t===o&&t.has(e)&&(t=p(o)),t.delete(e)})),t},$merge:function(e,t,n,r){var s,a;return s=t,o((a=e)&&"object"==typeof a,"update(): $merge expects a spec of type 'object'; got %s",a),o(s&&"object"==typeof s,"update(): $merge expects a target of type 'object'; got %s",s),c(e).forEach((function(n){e[n]!==t[n]&&(t===r&&(t=p(r)),t[n]=e[n])})),t},$apply:function(e,t){var n;return o("function"==typeof(n=e),"update(): expected spec of $apply to be a function; got %s.",n),e(t)}},f=new l;function y(e,t,n){o(Array.isArray(e),"update(): expected target of %s to be an array; got %s.",n,e),d(t[n],n)}function d(e,t){o(Array.isArray(e),"update(): expected spec of %s to be an array; got %s. Did you forget to wrap your parameter in an array?",t,e)}function b(e){o(Array.isArray(e),"update(): expected spec of $splice to be an array of arrays; got %s. Did you forget to wrap your parameters in an array?",e)}function v(e,t){var n=i(e);o("Map"===n||"Set"===n,"update(): %s expects a target of type Set or Map; got %s",t,n)}t.isEquals=f.update.isEquals,t.extend=f.extend,t.default=f.update,t.default.default=e.exports=u(t.default,t)},function(e,t){e.exports={container:{width:"100%"},text:{width:"100%",display:""},play:{hover:{backgroundColor:"GhostWhite"},button:{width:"34",height:"34",cursor:"pointer",pointerEvents:"none",outline:"none",backgroundColor:"Gainsboro",border:"solid 1px rgba(255,255,255,1)",borderRadius:6}},stop:{hover:{backgroundColor:"GhostWhite"},button:{width:"34",height:"34",cursor:"pointer",pointerEvents:"none",outline:"none",backgroundColor:"Gainsboro",border:"solid 1px rgba(255,255,255,1)",borderRadius:6}},pause:{hover:{backgroundColor:"GhostWhite"},button:{width:"34",height:"34",cursor:"pointer",pointerEvents:"none",outline:"none",backgroundColor:"Gainsboro",border:"solid 1px rgba(255,255,255,1)",borderRadius:6}},resume:{hover:{backgroundColor:"GhostWhite"},button:{width:"34",height:"34",cursor:"pointer",pointerEvents:"none",outline:"none",backgroundColor:"Gainsboro",border:"solid 1px rgba(255,255,255,1)",borderRadius:6}}}},function(e,t,n){"use strict";var o=n(5);function r(){}function s(){}s.resetWarningCache=r,e.exports=function(){function e(e,t,n,r,s,a){if(a!==o){var i=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw i.name="Invariant Violation",i}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:s,resetWarningCache:r};return n.PropTypes=n,n}},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,n){"use strict";e.exports=function(e,t,n,o,r,s,a,i){if(!e){var u;if(void 0===t)u=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,o,r,s,a,i],p=0;(u=new Error(t.replace(/%s/g,(function(){return c[p++]})))).name="Invariant Violation"}throw u.framesToPop=1,u}}},function(e,t,n){"use strict";n.r(t);var o=n(0),r=n.n(o),s=n(1),a=n.n(s),i=n(2),u=n.n(i),c=n(3),p=n.n(c);function l(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}var h=function(){function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.utterance=new window.SpeechSynthesisUtterance,this.selected=e.getVoice(t.voice),this.utterance.voice=this.selected,this.utterance.text=t.text.replace(/\n/g,""),this.utterance.lang=t.lang||"en-GB",this.utterance.pitch=parseFloat(t.pitch,10)||.8,this.utterance.rate=parseFloat(t.rate,10)||1,this.utterance.volume=parseFloat(t.volume,10)||1}var t,n,o;return t=e,o=[{key:"supported",value:function(e){return window.speechSynthesis}},{key:"getVoice",value:function(e){var t=window.speechSynthesis.getVoices(),n=t.find((function(t){return t.name===e}));return void 0!==n?n:t[0]}}],(n=[{key:"onend",value:function(e){this.utterance.onend=e}},{key:"onerror",value:function(e){this.utterance.onerror=e}},{key:"speak",value:function(){window.speechSynthesis.cancel(),window.speechSynthesis.speak(this.utterance)}},{key:"pause",value:function(){window.speechSynthesis.pause()}},{key:"cancel",value:function(){window.speechSynthesis.cancel()}},{key:"resume",value:function(){window.speechSynthesis.resume()}}])&&l(t.prototype,n),o&&l(t,o),e}();function f(e){return(f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function y(){return(y=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}function d(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function b(e){return(b=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function v(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function m(e,t){return(m=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}var g=function(e){function t(e){var n,o,r;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),o=this,(n=!(r=b(t).call(this,e))||"object"!==f(r)&&"function"!=typeof r?v(o):r).state={focus:!1,hover:!1,color:n.props.styles.button.Color,backgroundColor:n.props.styles.button.backgroundColor},n.enter=n.enter.bind(v(n)),n.leave=n.leave.bind(v(n)),n}var n,o,s;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&m(e,t)}(t,e),n=t,(o=[{key:"enter",value:function(){this.setState({hover:!0})}},{key:"leave",value:function(){this.setState({hover:!1})}},{key:"render",value:function(){var e=this.state.hover?this.props.styles.hover.backgroundColor:this.state.backgroundColor,t=this.state.hover?this.props.styles.hover.color:this.state.color,n=Object.assign({},this.props.styles.button,{color:t,backgroundColor:e});return r.a.createElement("button",y({type:"button"},this.props,{style:n,onMouseEnter:this.enter,onMouseLeave:this.leave}))}}])&&d(n.prototype,o),s&&d(n,s),t}(o.Component);function w(e){return(w="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function x(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function E(e){return(E=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function O(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function S(e,t){return(S=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}g.propTypes={styles:a.a.object.isRequired,onClick:a.a.func.isRequired},n.d(t,"default",(function(){return k}));var k=function(e){function t(e){var n,o,r;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),o=this,(n=!(r=E(t).call(this,e))||"object"!==w(r)&&"function"!=typeof r?O(o):r).state={styles:void 0!==n.props.styles?n.props.styles:p.a},n.play=n.play.bind(O(n)),n.pause=n.pause.bind(O(n)),n.resume=n.resume.bind(O(n)),n.stop=n.stop.bind(O(n)),n.onend=n.onend.bind(O(n)),n.onerror=n.onerror.bind(O(n)),n}var n,o,s;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&S(e,t)}(t,e),n=t,(o=[{key:"componentDidMount",value:function(){this.setButtonState("all","none","none","none")}},{key:"setButtonState",value:function(e,t,n,o){var r=u()(this.state,{styles:{play:{button:{pointerEvents:{$set:e}}},stop:{button:{pointerEvents:{$set:t}}},pause:{button:{pointerEvents:{$set:n}}},resume:{button:{pointerEvents:{$set:o}}}}});this.setState(r)}},{key:"setSpeechSynthesis",value:function(){this.speechSynthesis=new h(this.props),this.speechSynthesis.onend(this.onend),this.speechSynthesis.onerror(this.onerror)}},{key:"play",value:function(){this.setSpeechSynthesis(),this.speechSynthesis.speak(),this.setButtonState("none","all","all","none")}},{key:"pause",value:function(){this.speechSynthesis.pause(),this.setButtonState("none","all","none","all")}},{key:"resume",value:function(){this.speechSynthesis.resume(),this.setButtonState("none","all","all","none")}},{key:"stop",value:function(){this.speechSynthesis.cancel(),this.setButtonState("all","none","none","none")}},{key:"onend",value:function(){this.stop()}},{key:"onerror",value:function(){this.stop()}},{key:"render",value:function(){return this.props.disabled||!h.supported()?r.a.createElement("span",{className:"rs-container",style:this.state.styles.container},r.a.createElement("span",{className:"rs-text",style:this.state.styles.text},this.props.text)):(e=this.props.textAsButton?r.a.createElement(g,{className:"rs-play",styles:this.state.styles.play,onClick:this.play},r.a.createElement("span",{className:"rs-text",style:this.state.styles.text},this.props.displayText||this.props.text)):r.a.createElement(g,{className:"rs-play",styles:this.state.styles.play,onClick:this.play},r.a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:this.state.styles.play.width,height:this.state.styles.play.height,viewBox:"0 0 24 24"},r.a.createElement("path",{d:"M8 5v14l11-7z"}),r.a.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))),this.props.stop&&(t=r.a.createElement(g,{className:"rs-stop",styles:this.state.styles.stop,onClick:this.stop},r.a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:this.state.styles.stop.width,height:this.state.styles.stop.height,viewBox:"0 0 24 24"},r.a.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),r.a.createElement("path",{d:"M6 6h12v12H6z"})))),this.props.pause&&(n=r.a.createElement(g,{className:"rs-pause",styles:this.state.styles.pause,onClick:this.pause},r.a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:this.state.styles.pause.width,height:this.state.styles.pause.height,viewBox:"0 0 24 24"},r.a.createElement("path",{d:"M6 19h4V5H6v14zm8-14v14h4V5h-4z"}),r.a.createElement("path",{d:"M0 0h24v24H0z",fill:"none"})))),this.props.resume&&(o=r.a.createElement(g,{className:"rs-resume",styles:this.state.styles.resume,onClick:this.resume},r.a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:this.state.styles.resume.width,height:this.state.styles.resume.height,viewBox:"0 0 24 24"},r.a.createElement("path",{d:"M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"}),r.a.createElement("path",{d:"M0 0h24v24H0z",fill:"none"})))),r.a.createElement("span",{className:"rs-container",style:this.state.styles.container},e," ",t," ",n," ",o));var e,t,n,o}}])&&x(n.prototype,o),s&&x(n,s),t}(o.Component);k.propTypes={styles:a.a.object,text:a.a.string.isRequired,pitch:a.a.string,rate:a.a.string,volume:a.a.string,lang:a.a.string,voiceURI:a.a.string,voice:a.a.string,textAsButton:a.a.bool,displayText:a.a.string,disabled:a.a.bool,stop:a.a.bool,pause:a.a.bool,resume:a.a.bool}}])}));