{"id":1550,"date":"2023-02-17T04:53:55","date_gmt":"2023-02-17T04:53:55","guid":{"rendered":"https:\/\/www.tools.keywordfinder.us\/?page_id=1550"},"modified":"2023-02-17T04:53:55","modified_gmt":"2023-02-17T04:53:55","slug":"text-to-voice","status":"publish","type":"page","link":"https:\/\/tools.billionsideas.com\/es\/text-to-voice\/","title":{"rendered":"Text To Voice"},"content":{"rendered":"<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-base-3-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<section>\n<div class=\"voiceinator\">\n\n      <h1>Text To Voice<\/h1><br>\n<p>Select a voice<\/p>\n      <select id=\"voices\" name=\"voice\" style=\"font-weight: 700\">\n        <option value=\"\">Select A Voice<\/option>\n      <\/select>\n<br>\n      <label><b>Rate<\/b><\/label><br>\n      <input max=\"3\" name=\"rate\" type=\"range\" value=\"1\">\n<br>\n      <label><b>Pitch<\/b><\/label><br>\n\n      <input max=\"2\" name=\"pitch\" type=\"range\">\n      <textarea name=\"text\">Hello! I love emexee.com<\/textarea>\n      <button id=\"stop\">Stop!<\/button>\n      <button id=\"speak\">Speak<\/button><br><br>\n\n    <\/section>\n\n<script>\n  \/\/ Create new instance of speech\nconst msg = new SpeechSynthesisUtterance();\n\/\/ Initialize voices variable\nlet voices = [];\n\/\/ Grab voice selection\nconst voicesDropdown = document.querySelector('[name=\"voice\"]');\n\/\/ Grab options\nconst options = document.querySelectorAll('[type=\"range\"], [name=\"text\"]');\n\/\/ Grab buttons\nconst speakButton = document.querySelector('#speak');\nconst stopButton = document.querySelector('#stop');\n\/\/ Grab text to voice\nmsg.text = document.querySelector('[name=\"text\"]').value;\n\n\/\/ Create voice selection dropdown\nfunction populateVoices() {\n  voices = this.getVoices();\n  const voiceOptions = voices\n    .map(voice => `<option value=\"${voice.name}\">${voice.name} (${voice.lang})<\/option>`)\n    .join('');\n  voicesDropdown.innerHTML = voiceOptions;\n}\n\n\/\/ Find selected voice and set msg.voice\nfunction setVoice() {\n  console.log('Changing voice...');\n  msg.voice = voices.find(voice => voice.name === this.value);\n  \/\/ Stop and restart\n  toggle();\n}\n\n\/\/ Restart upon change in voice, options or text\nfunction toggle(startOver = true) {\n  \/\/ Cancel current speak\n  speechSynthesis.cancel();\n  if (startOver) {\n  \/\/ Restart\n  speechSynthesis.speak(msg);\n  }\n}\n\n\/\/ Change options and restart\nfunction setOption() {\n  console.log(this.name, this.value);\n  msg[this.name] = this.value;\n  toggle();\n}\n\n\/\/ Listen for changes in available voices\nspeechSynthesis.addEventListener('voiceschanged', populateVoices);\n\/\/ Listen for change in selected voice\nvoicesDropdown.addEventListener('change', setVoice);\n\/\/ Listen for change in options\noptions.forEach(option => option.addEventListener('change', setOption));\n\/\/ Listen for stop and speak buttons\nstopButton.addEventListener('click', () => toggle(false));\nspeakButton.addEventListener('click', toggle);\n  <\/script>\n\n<style>\nbody {\n  text-align: center;\n  \n}\nsection{\n         margin-top:60px;\n        width: 100%;\n        max-width: 970px;\n        background-color: #fff;\n        border: 1px solid #ddd;\n        padding: 25px;\n      }\n<\/style>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Text To Voice Select a voice Select A Voice Rate Pitch Hello! I love emexee.com Stop! Speak<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","footnotes":""},"class_list":["post-1550","page","type-page","status-publish"],"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"Billions Ideas","author_link":"https:\/\/tools.billionsideas.com\/es\/author\/loginbillionsideas-com\/"},"comment_info":0,"jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/tools.billionsideas.com\/es\/wp-json\/wp\/v2\/pages\/1550","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tools.billionsideas.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tools.billionsideas.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tools.billionsideas.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tools.billionsideas.com\/es\/wp-json\/wp\/v2\/comments?post=1550"}],"version-history":[{"count":0,"href":"https:\/\/tools.billionsideas.com\/es\/wp-json\/wp\/v2\/pages\/1550\/revisions"}],"wp:attachment":[{"href":"https:\/\/tools.billionsideas.com\/es\/wp-json\/wp\/v2\/media?parent=1550"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}