Text to speech Add-In for SharePoint

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. Also, the complete project source code is available for download,

Souce Code Download link

174https://code.msdn.microsoft.com/Text-to-speech-Add-In-for-af5abf7f

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 JS 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!!

Souce Code Download link

174https://code.msdn.microsoft.com/Text-to-speech-Add-In-for-af5abf7f

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

  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

  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

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

  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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s