Jump to content

Text to Speech


Recommended Posts

Hello @FinTheHuman,

Yes, that is possible with the use of (SpeechSynthesisUtterance()) script. You may follow this steps to accomplish your workflow:

- Add a button with onclick function on your HTML Block:

<button type="button" class="speech" onclick="textToAudio()">Read Description</button>

- Next add this script on your Footer:

<script>
function textToAudio() {
let msg = document.getElementById("InsertRecordFIELDNAME").value;
               
let speech = new SpeechSynthesisUtterance();
    speech.lang = "en-US";
    speech.text = msg;
    speech.volume = 1;
    speech.rate = 1;
    speech.pitch = 2;
                
window.speechSynthesis.speak(speech);
}
  </script>

Note:

- On the code, change the "FIELDNAME" on your actual field where you want the text value to be converted on speech. 

Sample URL:  https://c1abv183.caspio.com/dp/48276000ffc1bb043d4844edac54

I hope this helps you :D 

Link to comment
Share on other sites

You're welcome @FinTheHuman, on the tabular report, try this workflow:

- Add 2 HTML Blocks on your report, for the 1st Block, you will place a <p> tag where you add the field which you want to be converted to speech:

<p id="text[@field:ID]"> [@field:YOURFIELDHERE] </p>

- On the 2nd Block, you will paste the this code:

<button type="button" class="speech" onclick="textToAudio[@field:ID]()">Read Description</button>
<script>
function textToAudio[@field:ID]() {
let msg = document.getElementById("text[@field:ID]").innerText;
                
let speech = new SpeechSynthesisUtterance();
    speech.lang = "en-US";
    speech.text = msg;
    speech.volume = 1;
    speech.rate = 1;
    speech.pitch = 2;
                
window.speechSynthesis.speak(speech);
}
</script>

Important Notes:

-  The code should be placed on HTML Block and not on the Footer to work.
- Notice on the code where it has "textToAudio[@field:ID]()" and "text[@field:ID]", both has a "[@field:ID]" on the end. The reason behind this is to have a unique identifier in every row of the report. So the code will not be confused on which text to be converted to speech.

Similar on this workflow: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/how-to-dynamically-change-the-background-of-a-results-page/

Sample URL: https://c1abv183.caspio.com/dp/4827600054b42c5595aa44bc9122

I hope this helps you :)

Link to comment
Share on other sites

  • 4 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...