1

Edit, Updated

see my main goal is first to let the user request a specific (book_name) by the voice (speech to text) then the book open to read it loudly (text to speech) and the last step is to print this book to braille, my stuck points is I didn't found a way to open the book as pdf so I just left him as a text area, and I don't know how to convert the text to braille letters with this code https://gist.github.com/meh/141520


My goal is to open different pages when calling different variables but the code doesn't respond, only one variable open one page

 if (speechresult ) {

    //here I added speechrecognizer.stop for the commands to not get interrupted
    speechRecognizer.stop();
    var yourValue = 'Book 1';
      window.open("http://localhost/introductiontonetworking.html");
    responsiveVoice.speak(bookstart, "UK English Female", {
        //The pitch property of the SpeechSynthesisUtterance interface gets and sets the pitch at which the utterance will be spoken at. by default 1
        pitch: 1
    }, {
        //rate by default 1
        rate: 1
    });

}


else if (speechresult == book2) {

    speechRecognizer.stop();
            var yourValue = 'Book 2';
      window.open("http://localhost/ethicalhacking.html");
    responsiveVoice.speak(bookstart, "UK English Female", {

        pitch: 1
    }, {

        rate: 1
    });

}

I plan to use multiple books, so when said = book1 open the first book and book2 = open the second and so on?what is the problem of my code

guest271314
  • 1
  • 15
  • 104
  • 177

2 Answers2

0

SpeechSynthesis.speak() expects either a string or a SpeechSynthesisUtterance object, not a plain object


You can use Array.prototype.map() to convert the text of chapters of book to Braille.

Use data-* attribute at HTML to set JSON representation of chapters expected to be recognized by the service, for example both "chapter one" and "chapter 1" and "chapter two" and "chapter 2" respectively.

At result event of SpeechSynthesisUtterance filter <textarea> elements to select the corresponding chapter of the book as text. Restart the recognition service, e.g., webkitSpeechRecognition at end event of SpeechReconitionUtterance instance.

<!DOCTYPE html>
<html>

<head>
  <title>Ethical Hacking book</title>
  <style type="text/css">
    body {
      font-family: verdana;
    }

    .button {
      display: inline-block;
      background: #f6f6f6;
      padding: 10px 20px;
      color: #000;
      border: 1px solid #ccc;
      cursor: pointer;
      margin-top: 20px;
    }

    .button:hover {
      box-shadow: 4px 4px 10px 0 #ccc;
    }

    .container textarea,
    .container .brailleResult {
      width: 1333px;
      height: 1000px;
      resize: none;
      outline: none;
      border: 1px solid #ccc;
      box-shadow: 0 0 10px 0 #ddd;
      font-size: 14px;
    }
  </style>
</head>

<body>

  <div class="container">
    <h3>Ethical Hacking</h3>
    <textarea class="myText" data-chapter='["chapter one", "chapter 1"]'>Chapter 1. Introduction to Hacking. There are many definitions for hacker. Ask this question from a phalanx, and you will get a new answer every time, because more mouths will have more talks, and this is the reason behind the different definitions
      of hackers, which in my opinion is quite justified for everyone has a right to think differently. In the early 1990s, the word hacker was used to describe a great programmer, someone who was able to build complex logics.
    </textarea>
    <div class="brailleResult"></div>
    <textarea class="myText" data-chapter='["chapter two", "chapter 2"]'>Chapter 2. Linux Basics. In order to become a good ethical hacker or penetration tester, you need to be conversant with Linux, which is by far one of the most powerful operating systems. Linux is really good for ethical hacking and penetration testing
      because it is compatible with a wide variety of related tools and software, whereas other operating systems such as Mac and Windows support fewer of these software and tools. In this chapter, I will teach you some of the very basics of operating
      a Linux OS. If you are already familiar with Linux basics, you can skip this chapter.</textarea>
    <div class="brailleResult"></div>
  </div>
  <script type="text/javascript">
    var braille = [
      ['1', '⠼⠁'],
      ['2', '⠼⠃'],
      ['3', '⠼⠉'],
      ['4', '⠼⠙'],
      ['5', '⠼⠑'],
      ['6', '⠼⠋'],
      ['7', '⠼⠛'],
      ['8', '⠼⠓'],
      ['9', '⠼⠊'],
      ['0', '⠼⠚'],

      ['A', '⠠⠁'],
      ['B', '⠠⠃'],
      ['C', '⠠⠉'],
      ['D', '⠠⠙'],
      ['E', '⠠⠑'],
      ['F', '⠠⠋'],
      ['G', '⠠⠛'],
      ['H', '⠠⠓'],
      ['I', '⠠⠊'],
      ['J', '⠠⠚'],
      ['K', '⠠⠅'],
      ['L', '⠠⠇'],
      ['M', '⠠⠍'],
      ['N', '⠠⠝'],
      ['O', '⠠⠕'],
      ['P', '⠠⠏'],
      ['Q', '⠠⠟'],
      ['R', '⠠⠗'],
      ['S', '⠠⠎'],
      ['T', '⠠⠞'],
      ['U', '⠠⠥'],
      ['V', '⠠⠧'],
      ['W', '⠠⠺'],
      ['X', '⠠⠭'],
      ['Y', '⠠⠽'],
      ['Z', '⠠⠵'],

      ['a', '⠁'],
      ['b', '⠃'],
      ['c', '⠉'],
      ['d', '⠙'],
      ['e', '⠑'],
      ['f', '⠋'],
      ['g', '⠛'],
      ['h', '⠓'],
      ['i', '⠊'],
      ['j', '⠚'],
      ['k', '⠅'],
      ['l', '⠇'],
      ['m', '⠍'],
      ['n', '⠝'],
      ['o', '⠕'],
      ['p', '⠏'],
      ['q', '⠟'],
      ['r', '⠗'],
      ['s', '⠎'],
      ['t', '⠞'],
      ['u', '⠥'],
      ['v', '⠧'],
      ['w', '⠺'],
      ['x', '⠭'],
      ['y', '⠽'],
      ['z', '⠵'],

      ['\\.', '⠲'],
      [',', '⠂'],
      ['\\?', '⠦'],
      [';', '⠆'],
      ['!', '⠖'],
      ['<', '⠦'],
      ['>', '⠴'],
      ['\\[', '⠶'],
      ['-', '⠤'],
      ["'", '⠄'],
    ];

    function checkCompatibilty() {
      if (!('speechSynthesis' in window)) {
        alert('Your browser is not supported. If google chrome, please upgrade!');
      }
    };
    checkCompatibilty();

    var chapters = document.querySelectorAll('.myText');
    var brailleResult = document.querySelectorAll(".brailleResult");
    var recognition = new webkitSpeechRecognition();
    recognition.continuous = true;
    recognition.interimResults = false;
    recognition.maxAlternatives = 1;
    recognition.onresult = handleRecognition;
    recognition.start();
    var book = new SpeechSynthesisUtterance();
    book.onend = resetRecognition;
    book.default = false;
    var voiceselect = window.speechSynthesis.getVoices();
    book.voice = voiceselect.filter(function(voice) {
      return voice.name == 'Google UK English Male';
    })[0];
    book.lang = 'en-EN';
    book.volume = 1;
    book.rate = 1;
    book.pitch = 1;

    function textToBraille(chapter) {
      return Array.prototype.map.call(chapter, function(text) {
        var result = braille.find(([key, prop]) => text === key);
        return result && result[1] || text
      }).join("")

    }

    function handleRecognition(event) {
      recognition.stop();
      var chapter = event.results[event.results.length - 1][0].transcript.trim();
      console.log(chapter);
      for (var i = 0; i < chapters.length; i++) {
        if (JSON.parse(chapters[i].dataset.chapter).some(function(ch) {
            return ch === chapter
          })) {
          speak(chapters[i].value);
          brailleResult[i].innerHTML = textToBraille(chapters[i].value)
        }
      }
    }

    function resetRecognition() {
      recognition.start();
    }

    function speak(chapter) {
      book.text = chapter;
      window.speechSynthesis.speak(book);
    };
  </script>


</body>

</html>

plnkr https://plnkr.co/edit/Xwc5iFtgbTnz13DDKC3z?p=preview

guest271314
  • 1
  • 15
  • 104
  • 177
  • where should I but these or replace with what? – Samar Dahan Nov 04 '17 at 18:17
  • @SamarDahan Have you tried code at jsfiddle? Is `"UK English Female"` a defined voice? – guest271314 Nov 04 '17 at 18:42
  • Yes I tried and I am still work in to fit my code, where should I put the link of the books? – Samar Dahan Nov 04 '17 at 19:21
  • What do you mean by "link of the books?"? – guest271314 Nov 04 '17 at 19:23
  • http://localhost/introductiontonetworking.html ( this link is for a page have text area (the book ) and it convert text to speech) – Samar Dahan Nov 04 '17 at 19:34
  • That is a link to your local server. Cannot view it online – guest271314 Nov 04 '17 at 19:38
  • Yes, my local server. is there is a way to let this book instead of (text area include text) let it as pdf and read it loudly automatic – Samar Dahan Nov 05 '17 at 17:09
  • @SamarDahan How do you propose for the service to parse a PDF where the expected argument to `.speak()` is plain text or a `SpeechSynthesisUtterance` object? – guest271314 Nov 05 '17 at 17:11
  • no no just forget my question sorry for bothering u – Samar Dahan Nov 05 '17 at 17:25
  • @SamarDahan Your inquiry is not bothering this user. Attempting to gather what you are trying to achieve. Convert the data to text format and pass the text to `.speak()`, see also [How to create or convert text to audio at chromium browser?](https://stackoverflow.com/questions/44346410/how-to-create-or-convert-text-to-audio-at-chromium-browser) – guest271314 Nov 05 '17 at 17:27
  • 1
    see my main goal is first to let the user request a specific (book_name) by the voice (speech to text) then the book open to read it loudly (text to speech) and the last step is to print this book to braille, my stuck points is I didn't found a way to open the book as pdf so I just left him as a text area, and I don't know how to convert the text to braille letters with this code https://gist.github.com/meh/141520 – Samar Dahan Nov 05 '17 at 17:33
  • Have not yet tried to achieve the last step, the first two steps should be possible. Is the book formatted as plain text? – guest271314 Nov 05 '17 at 17:34
  • _"my stick points is I didn't found a way to open the book as pdf"_ Why do you want to open the book as a PDF? Given the link the last step should be possible as well. – guest271314 Nov 05 '17 at 17:38
  • Have you considered including the full text and link at your comment https://stackoverflow.com/questions/47113870/using-multiple-variables-to-open-different-links/47113924?noredirect=1#comment81199176_47113924 at the text of the Question? – guest271314 Nov 05 '17 at 17:39
  • let the book as a PDF will be more effective coz as a text is not a practical it is work only to test and show our idea but when we want to let access to the book for the blind student's book that has pdf format will not work, then we need to copy each page and put in the text area – Samar Dahan Nov 05 '17 at 17:49
  • The PDF portion of requirement appears to limit the accessibility of the application rather than extend the accessibility of the application. There are probably approaches using JavaScript which can extract the text content of a properly formatted PDF. What are the specific reasons for you describing the use of plain text as "not a practical"? – guest271314 Nov 05 '17 at 17:52
  • I have the idea to extract the text content to text area but how to make it work tried but not work with me so then when i stuck I used the simple way to present my idea – Samar Dahan Nov 05 '17 at 18:00
  • What is the issue with code at linked jsfiddle? Is the present inquiry how to extract text from a PDF to achieve same result at existing code at linked jsfiddle? Since you already have the text you can convert the book to braile format at any time, yes? – guest271314 Nov 05 '17 at 18:01
  • No, I put the code to let see that this my simple code If you notice that the text is writing in the code so each time I will change it, I didn't extract it from a pdf? – Samar Dahan Nov 05 '17 at 18:28
  • "Since you already have the text you can convert the book to braile format at any time" I just found the code here https://gist.github.com/meh/141520 but i don't know how to mix it with the code in jsfiddle to let work and print in braille – Samar Dahan Nov 05 '17 at 18:29
  • Thank you so much you really give me this idea to make it as chapters, I change my code and it work – Samar Dahan Nov 06 '17 at 19:34
  • Now I have this code to print normally without Braille letters https://jsfiddle.net/Samar19/6d3pL6og/ I add it and it works.but the problem I face is that only take one value childWindow.document.write(document.getElementById('chapter 1').value.replace(/\n/gi,'
    ')); only will print chapter 1 , how Can I make it to take options in case i have in one page 3 chapters or more ?
    – Samar Dahan Nov 06 '17 at 19:40
  • You can pass `this` to `printTextArea(this)` at `` attribute event handler and use `.nextElementSibling` to reference the next sibling ` – guest271314 Nov 07 '17 at 01:33
0

You can try associate array to store book name & link as

link_arr['book1']='linkforbook1'; link_arr['book2']='linkforbook2'; . . .

Get link for respective book by

link=link_arr[bookVal];

Satish
  • 696
  • 1
  • 11
  • 22