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

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...