Search code examples
javascripthtmltext-to-speecharticulate-storylinearticulate

the speack function i.e articulate js which is not working


I'm using articulate.js to add text to speech to the website. the code is as follows :

<body>
<div class="articulate-area">
  <button onclick="speak('article')">Speak All</button>
  <button onclick="speak('div.intro')">Speak Intro</button>
  <button onclick="speak('div.speech')">Speak Speech</button>
  <button onclick="pause()">Pause</button>
  <button onclick="resume()">Resume</button>
</div>

<article>
  <div class="intro">
    <h1>The Gettysburg Address</h1>
    <h2>Delivered by Abraham Lincoln on November 19, 1863</h2>
    <h3>Beginning with the iconic phrase <q>Four score and seven years ago,</q> this speech is generally regarded as the most famous in American history.</h3>
  </div>

  <div class="speech">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/915932/lincoln.jpg" alt="A Portrait of the Sixteenth President">

    <p>Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.</p>    
    <p>Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.</p>

  </div>
</article>
<body>
<script>
function speak(obj) {
  $(obj).articulate('speak');
};

function pause() {
  $().articulate('pause');
};

function resume() {
  $().articulate('resume');
};
</script>

the above is the code to add tts to the webpage which is not working , do i need to add any other script to the webpage ?? the official articulate.js website tells that , it is compatible with chrome. but i'm not getting the speech output.


Solution

  • You should add jquery at the beginning https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js