SharePoint 2016 / SharePoint Online

Text to speech Add-In for SharePoint

Ravichandran Krishnasamy6 Comments

Text to speech add-in can be used to speak text contents of the textarea in the SharePoint dashboard. Below you can see step by step instructions to develop this SharePoint Add-In. ,

SharePoint Text to Speak

Create new Project in the Visual Studio using “App for SharePoint” template, here I’m using visual studio 2015 version. In the new project wizard select SharePoint-Hosted and rest you can select based on your requirements. The provider-hosted application can also be selected.

I have used articulate.js to implement this add-in, you can find this JavaScript file in the project which is modified by me for fix some issues and some changes, and this JS file implemented using SpeechSynthesis, The SpeechSynthesis interface of the Web Speech API is the controller interface for the speech service;

Add new “Client Web Part (Host Web)” and select “Create a new app web page for the client web part content” (If you want this add-in in the Home page then we have to use new ASPX file instead of default one because it uses SharePoint master page), Edit newly created an ASPX page which is located in the Pages folder. Add below JavaScript code and HTML.

</div>
<div>

<%@ Page Language="C#" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<WebPartPages:AllowFraming ID="AllowFraming" runat="server" />

<html>
<head>
<title></title>

<script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/javascript" src="../Scripts/articulate.js"></script>
<script type="text/javascript">
// Set the style of the client web part page to be consistent with the host web.
(function () {
'use strict';

var hostUrl = '';
if (document.URL.indexOf('?') != -1) {
var params = document.URL.split('?')[1].split('&');
for (var i = 0; i < params.length; i++) {
var p = decodeURIComponent(params[i]);
if (/^SPHostUrl=/i.test(p)) {
hostUrl = p.split('=')[1];
document.write('	<link rel="stylesheet" href="' + hostUrl + '/_layouts/15/defaultcss.ashx" />');
break;
}
}
}
if (hostUrl == '') {
document.write('	<link rel="stylesheet" href="/_layouts/15/1033/styles/themable/corev15.css" />');
}
})();

</script>
</head>
<body>
<textarea id="texttospeck" style="height:200px;width:500px"></textarea>

<input type="button" id="btnSpeak" onclick="javascript: $('#texttospeck').articulate('speak');" value="Speak" />
<input type="button" id="btnPause" onclick="javascript: $('#texttospeck').articulate('pause');" value="Pause" />
<input type="button" id="btnResume" onclick="javascript: $('#texttospeck').articulate('resume');" value="Resume" />
<input type="button" id="btnStop" onclick="javascript: $('#texttospeck').articulate('stop');" value="Stop" />
</body>
</html>

</div>
<div>

Please feel free to let me know if you have any queries in the comment section, I’m happy to help you!!

6 thoughts on “Text to speech Add-In for SharePoint”

  1. Hi,
    By the line – “Text to speech add-in can be used to speak text contents of the textarea in the SharePoint dashboard”, does it mean that whenever user will highlight particular text in the SharePoint site (any page, form, list, library etc.), the user will hear spoken sound version of the text in a computer ?.

    Please confirm.

    Liked by 1 person

    Reply

  2. Hi Vipul,
    Yes, you are right, the user can hear spoken sound version of the text on their computer. The user can simply copy any of long text content from anywhere and paste inside the text area and start to hear the spoken sound. Please let me know if you have any further queries.

    Like

    Reply

  3. Thanks for the reply. However, my requirement is a bit different. Is it possible that whenever user just selects any text on the website, the computer should produce the sound as speech. I am not looking for any textarea where user need to copy/paste the text and then the sounds get produced.

    Is it possible, please let me know? OR Can you propose any other solution/approach (Not 3rd Party) ?

    Like

    Reply

    • Hi Vipul,
      Yes, possible. all you have to do is, spend some time in the development for complete your requirement.
      Step 1,
      you have to trigger an event when text selected and find the selected text content, this link may useful for you http://jsfiddle.net/2C6fB/1/
      Step 2,
      pass the selected text instead of the text area text to speech function
      Step 3,
      link your script in the SharePoint master page,

      You may also need to develop some floating interface for start to speak, pause, resume or stop

      Like

      Reply

  4. Thanks, I appreciate the quick response. Just a last question, that is the code going to be complete client-side (I know for AddIn we use CSOM only – just confirming :)) and that we can implement this functionality on SharePoint Publishing Pages (with custom Page Layout) also ? Please confirm.

    Like

    Reply

Comments