September 17, 2014

BrowseAloud(Text to speech) on my website


 BrowseAloud Configuration     

Step 1 :
As BrowseAloud only reads BrowseAloud-enabled sites , first of all we need to register our site with BrowseAloud.
Registered your site with  BrowseAloud via : http://www.browsealoud.com/au/browsealoud/requestform/.
BrowseAloud activated for your website within 24 hours of purchase.

Step 2 :
The page must have a valid <!DOCTYPE>  set at the top. An invalid or missing <!DOCTYPE> will cause the BrowseAloud logo to display and function incorrectly.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Step 3 :
Include below scripts in to your page (Here /httpdocs/joomla/templates/beez_20/index.php)
<script type="text/javascript">var _baLocale = 'de', _baUseCookies = true, _baHiddenMode = true;</script>
<script type="text/javascript" src="//www.browsealoud.com/plus/scripts/ba.js"></script>
Note : The javascript must render between the <body>…</body> tags of your page when shown in the browser.

Step 4 :
Include below HTML  script in to index.php at place where you want to display “Listen with BrowseAloud”  link.
<div id="website-audio-button">
    <a onclick="function getProtocol(){return window.location.href.indexOf('https')==0?'https':'http';}(function(){if(navigator.userAgent.indexOf('MSIE')!=-1&&getProtocol()=='https'){alert('You are viewing a secure website. We do not currently support BrowseAloud services on secure sites.');}else{document.getElementsByTagName('body')[0].appendChild(document.createElement('script')).src=getProtocol()+'://babm.texthelp.com/Bookmarklet.ashx?l=uk';}})();" href="#">Listen with BrowseAloud</a>
</div>

Step 5 :
Add styles to set position of link in CSS file (/httpdocs/joomla/templates/beez_20/css/general.css)
#website-audio-button {
    /*float: left;*/
    font-size: 12px;
    padding: 11px;
    text-align: center;
}  
#website-audio-button a {
    background: url("http://theram.ch/wordpress37/wp-content/uploads/2014/08/listen.jpg") no-repeat scroll 0 0 #ffffff;
    color: #4a8bca;
    padding: 5px 0 5px 28px;
    text-decoration: none;
}

Here “http://theram.ch/wordpress37/wp-content/uploads/2014/08/listen.jpg  is a link for speaker icon beside link.
Step 6 :
Now  BrowseAloud is ready to work with your site.
By clicking on link  Listen with BrowseAloud”,  one box appear on top –right corner of browser.

Click on Red button to start service.


Select text on webpage and click on Green play button.
Now you can hear selected text.
 
Step 7 :
There is some settings available with BrowseAloud.
You can access it by clicking on “Einstellungen” on top-right box.



No comments: