Clever Geek Handbook

Le guide ultime de l'utilisation pratique de l'API Web Speech



Dans cet article, je souhaite partager avec vous les résultats de l'étude des principales fonctionnalités Web Speech API



(plus loin - WSA



).







introduction



WSA



Est une technologie expérimentale composée de deux interfaces: SpeechSynthesis



(interface pour la synthèse vocale) et SpeechRecognition



(interface pour la reconnaissance vocale).







, MDN ( , , - ).







, Can I use:











, SpeechSynthesis



. , SpeechRecognition



. " ", SpeechRecognition



-, . , .







4 , 2 :







  1. , SpeechSynthesis



    , ()
  3. ""
  4. , , , ( ),


, .









:







<div id="wrapper">
  <h1>Speech Synthesis - Player</h1>
  <label
    >Text:
    <textarea id="textarea">!  ?</textarea>
  </label>
  <label
    >Voice:
    <select id="select"></select>
  </label>
  <label
    >Volume:
    <input id="volume" type="range" min="0" max="1" step="0.1" value="1" />
    <span>1</span>
  </label>
  <label
    >Rate:
    <input id="rate" type="range" min="0" max="3" step="0.5" value="1" />
    <span>1</span>
  </label>
  <label
    >Pitch:
    <input id="pitch" type="range" min="0" max="2" step="0.5" value="1" />
    <span>1</span>
  </label>
  <div id="buttons">
    <button class="speak">Speak</button>
    <button class="cancel">Cancel</button>
    <button class="pause">Pause</button>
    <button class="resume">Resume</button>
  </div>
</div>


(textarea



), ; (select



) , ; - (volume



), (rate



) (pitch



), (speak



), (cancel



), (pause



) (resume



) . , .







min



, max



, step



value



. , , .. . . id



, .







JavaScript



. SpeechSynthesisUtterance



("utterance" " "):







const U = new SpeechSynthesisUtterance()


( "", , , Chrome ):







let voices = speechSynthesis.getVoices()


getVoices()



voiceschanged



. "" :







speechSynthesis.onvoiceschanged = () => {
  voices = speechSynthesis.getVoices()
  populateVoices(voices)
}


( ) :







0: SpeechSynthesisVoice
  default: true
  lang: "de-DE"
  localService: false
  name: "Google Deutsch"
  voiceURI: "Google Deutsch"


:







function populateVoices(voices) {
  //      `option`  
  //   `option`   ,   -     
  voices.forEach((voice, index) => {
    select.options[index] = new Option(voice.name, index)
  })

  //     `Google `
  //    ,    `Microsoft`
  const defaultVoiceIndex = voices.findIndex(
    (voice) => voice.name === 'Google '
  )
  select.selectedIndex = defaultVoiceIndex
  //     
  initializeHandlers()
}


:







function initializeHandlers() {
  //     ,       
  U.onstart = () => console.log('Started')
  U.onend = () => console.log('Finished')
  U.onerror = (err) => console.error(err)
  //       
  U.onpause = () => console.log('Paused')
  U.onresume = () => console.log('Resumed')

  //   
  wrapper.onchange = ({ target }) => {
    if (target.type !== 'range') return
    handleChange(target)
  }

  //   
  buttons.addEventListener('click', ({ target: { className } }) => {
    // SpeechSynthesis     `speak()`, `cancel()`, `pause()`  `resume()`
    //   `speak()`   
    //  ,            `speaking`
    //    : `pending`  `paused`,       
    switch (className) {
      case 'speak':
        if (!speechSynthesis.speaking) {
          convertTextToSpeech()
        }
        break
      case 'cancel':
        return speechSynthesis.cancel()
      case 'pause':
        return speechSynthesis.pause()
      case 'resume':
        return speechSynthesis.resume()
      default:
        return
    }
  })
}


:







function handleChange(el) {
  el.nextElementSibling.textContent = el.value
}


:







function convertTextToSpeech() {
  //  
  const trimmed = textarea.value.trim()
  if (!trimmed) return
  //    `SpeechSynthesisUtterance`
  U.text = trimmed
  //   
  const voice = voices[select.value]
  //      
  U.voice = voice
  // 
  U.lang = voice.lang
  // 
  U.volume = volume.value
  // 
  U.rate = rate.value
  //  
  U.pitch = pitch.value
  //  !
  speechSynthesis.speak(U)
}


SpeechSynthesisUtterance



:







SpeechSynthesisUtterance
  lang: "ru-RU"
  onboundary: null
  onend: () => console.log('Finished')
  onerror: (err) => console.error(err)
  onmark: null
  onpause: () => console.log('Paused')
  onresume: () => console.log('Resumed')
  onstart: () => console.log('Started')
  pitch: 1
  rate: 1
  text: "!  ?"
  voice: SpeechSynthesisVoice { voiceURI: "Google ", name: "Google ", lang: "ru-RU", localService: false, default: false }
  volume: 1


:







window.onkeydown = ({ key }) => {
  switch (key.toLowerCase()) {
    case 's':
      if (!speechSynthesis.speaking) {
        convertTextToSpeech()
      }
      break
    case 'c':
      return speechSynthesis.cancel()
    case 'p':
      return speechSynthesis.pause()
    case 'r':
      return speechSynthesis.resume()
    default:
      return
  }
}


:











SpeechSynthesis



, , - , . .







SpeechSynthesis



. , , , , , - . , , .







:







<div id="wrapper">
  <h1>Speech Synthesis - Page Reader</h1>
  <div>
    <button class="play" tabindex="1"></button>
    <p>
      JavaScript —   . 
      -,    .
         ECMAScript ( ECMA-262).
    </p>
  </div>
  <div>
    <button class="play" tabindex="2"></button>
    <p>
      JavaScript       
         .     
            
      -.
    </p>
  </div>
  <div>
    <button class="play" tabindex="3"></button>
    <p>
        :  , 
      ,   , 
      ,     .
    </p>
  </div>
</div>


(div



) (play



) , , , ( JavaScript



). , tabindex



, tab



space



. , , tabindex



, tab



.







, :







//         
let voices = speechSynthesis.getVoices()
let defaultVoice

speechSynthesis.onvoiceschanged = () => {
  voices = speechSynthesis.getVoices()
  defaultVoice = voices.find((voice) => voice.name === 'Google ')

  wrapper.addEventListener('click', handleClick)
  window.addEventListener('keydown', handleKeydown)
}

const PLAY = 'play'
const PAUSE = 'pause'
const RESUME = 'resume'

function handleClick({ target }) {
  switch (target.className) {
    case PLAY:
      //    `play`     ,
      //        
      speechSynthesis.cancel()

      const { textContent } = target.nextElementSibling

      //    . 
      textContent.split('.').forEach((text) => {
        const trimmed = text.trim()
        if (trimmed) {
          const U = getUtterance(target, text)
          speechSynthesis.speak(U)
        }
      })
      break
    case PAUSE:
      // CSS-        
      // ``- /, `` - /, `` - 
      //  ``     ,   
      target.className = RESUME
      speechSynthesis.pause()
      break
    case RESUME:
      target.className = PAUSE
      speechSynthesis.resume()
      break
    default:
      break
  }
}

//   `escape`   
//    
function handleKeydown({ code }) {
  switch (code) {
    case 'Escape':
      return speechSynthesis.cancel()
    default:
      break
  }
}

function getUtterance(target, text) {
  const U = new SpeechSynthesisUtterance(text)
  U.voice = defaultVoice
  U.lang = defaultVoice.lang
  U.volume = 1
  U.rate = 1
  U.pitch = 1

  //         / 
  U.onstart = () => {
    console.log('Started')
    target.className = PAUSE
  }
  U.onend = () => {
    console.log('Finished')
    target.className = PLAY
  }
  U.onerror = (err) => console.error(err)

  return U
}


— ( (.



)), , (, ) — textContent.split('.').forEach(...)



. , 220 ( Chrome). text-to-long



( ), , , , SpeechSynthesis



( ). , .







:









""



, SpeechSynthesis



, , , , , , WSA



— SpeechRecoginition



.







:







<div id="wrapper">
  <h1>Speech Recognition - Dictaphone</h1>
  <textarea id="final_text" cols="30" rows="10"></textarea>
  <input type="text" id="interim_text" />
  <div id="buttons">
    <button class="start"></button>
    <button class="stop"></button>
    <button class="abort"></button>
    <button class="copy"></button>
    <button class="clear"></button>
  </div>
</div>


() (final_text



) ( ) (interim_text



), (buttons



). textarea



input



, , , . , , , Chrome .







(start



, stop



abort



), Clipboard API



.







:







let final_transcript = ''
let recognizing = false


, SpeechRecognition



:







// ,  `WSA`,  , , , `SpeechRecognition`  
const speechRecognition =
  window.SpeechRecognition || window.webkitSpeechRecognition
//   `SpeechRecognition`
const recognition = new speechRecognition()
//  `continuous` ,         
recognition.continuous = true
//   
recognition.interimResults = true
//     
recognition.maxAlternatives = 3
// 
recognition.lang = 'ru-RU'


, :







recognition.onstart = () => {
  console.log('  ')
}
recognition.onerror = ({ error }) => {
  console.error(error)
}
recognition.onend = () => {
  console.log('  ')
  //   ,     `true`
  if (!recognizing) return
  recognition.start()
}


SpeechRecognition



, , "" . "" . , :







const DICTIONARY = {
  : '.',
  : ',',
  : '?',
  : '!',
  : ':',
  : '-',
  : '\n',
  : '\t'
}


, , , SpeechGrammar



SpeechGrammarList



, JSpeech Grammar Format



, , .







/, . , . , , , , " ", " " .. , : '?'



, .







:







function editInterim(s) {
  return s
    .split(' ')
    .map((word) => {
      word = word.trim()
      return DICTIONARY[word.toLowerCase()] ? DICTIONARY[word.toLowerCase()] : word
    })
    .join(' ')
}

function editFinal(s) {
  return s.replace(/\s{1,}([\.+,?!:-])/g, '$1')
}


editInterim()



, , . , . word = word.trim()



, "" , .







editFinal()



— editInterim()



. , .







, , — result



. :







recognition.onresult = (e) => {
  //       
  let interim_transcript = ''
  //     ,      
  for (let i = e.resultIndex; i < e.results.length; i++) {
    //  `isFinal`   ,   
    if (e.results[i].isFinal) {
      //   
      const result = editInterim(e.results[i][0].transcript)
      //      
      final_transcript += result
    } else {
      //   ,      
      interim_transcript += e.results[i][0].transcript
    }
  }
   //     `input`
  interim_text.value = interim_transcript
  //   
  final_transcript = editFinal(final_transcript)
  //     `textarea`
  final_text.value = final_transcript
}


:







SpeechRecognitionEvent
  bubbles: false
  cancelBubble: false
  cancelable: false
  composed: false
  currentTarget: SpeechRecognition {grammars: SpeechGrammarList, lang: "ru-RU", continuous: true, interimResults: true, maxAlternatives: 3, …}
  defaultPrevented: false
  emma: null
  eventPhase: 0
  interpretation: null
  isTrusted: true
  path: []
  resultIndex: 1
  //     
  results: SpeechRecognitionResultList {0: SpeechRecognitionResult, 1: SpeechRecognitionResult, length: 2}
  returnValue: true
  srcElement: SpeechRecognition {grammars: SpeechGrammarList, lang: "ru-RU", continuous: true, interimResults: true, maxAlternatives: 3, …}
  target: SpeechRecognition {grammars: SpeechGrammarList, lang: "ru-RU", continuous: true, interimResults: true, maxAlternatives: 3, …}
  timeStamp: 59862.61999979615
  type: "result"


(SpeechRecognitionResultList) :







results: SpeechRecognitionResultList
  0: SpeechRecognitionResult
    0: SpeechRecognitionAlternative
      confidence: 0.7990190982818604
      transcript: ""
    isFinal: true
    length: 1
  length: 1


e.results[i][0].transcript



. , maxAlternatives = 3



, SpeechRecognitionAlternative



. ( 0



) .







, , :







buttons.onclick = ({ target }) => {
  switch (target.className) {
    case 'start':
      //     
      final_transcript = ''
      //  
      recognition.start()
      //      `true`
      recognizing = true
      //  `textarea`
      final_text.value = ''
      //  `input`
      interim_text.value = ''
      break
    case 'stop':
      //  
      recognition.stop()
      //       `false`
      recognizing = false
      break
    case 'abort':
      //  
      recognition.abort()
      recognizing = false
      break
    case 'copy':
      //    `textarea`   
      navigator.clipboard.writeText(final_text.value)
      //    
      target.textContent = ''
      const timerId = setTimeout(() => {
        target.textContent = ''
        clearTimeout(timerId)
      }, 3000)
      break
    case 'clear':
      //     
      final_transcript = ''
      //  `textarea`
      final_text.value = ''
      break
    default:
      break
  }
}


. "", , ( speechstart



), ( ), , " ". input



- " ", textarea



". ?". , .







:









, , . : () => removeLastWord()



( , typeof DICTIONARY[word] === 'function'



) :







function removeLastWord() {
  const oldStr = final_text.value
  const newStr = oldStr.substring(0, oldStr.lastIndexOf(' '))
  final_text.value = newStr
}


, — , , .









SpeechRecognition



, , .







, .







pages



:







// home.js
export default /*html*/ `
<div id="wrapper">
  <div>Section 1</div>
  <div>Section 2</div>
  <div>Section 3</div>
  <div>Section 4</div>
  <div>Section 5</div>
  <div>Section 6</div>
  <div>Section 7</div>
  <div>Section 8</div>
  <div>Section 9</div>
</div>
`

// product.js
export default /*html*/ `
<h1>This is the Product Page</h1>
`

// about.js
export default /*html*/ `
<h1>This is the About Page</h1>
`


:







import HomePage from './pages/home.js'
import ProductPage from './pages/product.js'
import AboutPage from './pages/about.js'

const { body } = document
body.innerHTML = HomePage


:







//   
const DOWN = 'down'
const UP = 'up'
const RIGHT = 'right'
const LEFT = 'left'

// 
const ACTIONS = {
  //   
  home: () => (body.innerHTML = HomePage),
  product: () => (body.innerHTML = ProductPage),
  about: () => (body.innerHTML = AboutPage),

  //  
  down: () => scroll(DOWN),
  up: () => scroll(UP),
  left: () => scroll(LEFT),
  right: () => scroll(RIGHT),

  //    
  light: () => body.removeAttribute('class'),
  dark: () => (body.className = 'dark')
}


SpeechRecognition



, , ( — : recognition.lang = 'en-US'



).







result



:







recognition.onresult = (e) => {
  //  
  for (let i = e.resultIndex; i < e.results.length; i++) {
    if (e.results[i].isFinal) {
      const result = e.results[i][0].transcript.toLowerCase()
      //    ,      ( ,  `product`   , ,       )
      console.log(result)
      //    ,      
      result
        .split(' ')
        .forEach((word) => {
          word = word.trim().toLowerCase()
          // ACTION[word] -  
          return ACTIONS[word] ? ACTIONS[word]() : ''
        })
    }
  }
}


:







function scroll(direction) {
  let newPosition
  switch (direction) {
    case DOWN:
      newPosition = scrollY + innerHeight
      break
    case UP:
      newPosition = scrollY - innerHeight
      break
    case RIGHT:
      newPosition = scrollX + innerWidth
      break
    case LEFT:
      newPosition = scrollX - innerWidth
      break
    default:
      break
  }
  if (direction === DOWN || direction === UP) {
    scrollTo({
      top: newPosition,
      behavior: 'smooth'
    })
  } else {
    scrollTo({
      left: newPosition,
      behavior: 'smooth'
    })
  }
}


, :







window.addEventListener('keydown', (e) => {
  e.preventDefault()
  switch (e.code) {
    //    
    case 'Space':
      recognition.start()
      recognizing = true
      break
    //  `escape`  
    case 'Escape':
      recognition.stop()
      recognizing = false
    default:
      break
  }
})


. , , :







  • home



    , product



    , about



    —
  • dark



    , light



    —
  • down



    , up



    , left



    , right



    — ( , scroll



    , , scroll down



    )


:











, WSA



JavaScript



, , "" -. , . , WSA



— , , , , .







, WSA



. , , SpeechSynthesis



SpeechRecognition



. , — , , , , , . : — , , - ""



,



, , ,



. , . .









.







10% !













More articles:


All Articles