Laissez-vous utiliser CSS+jQuery pour implémenter un robot de synthèse vocale

Cet article vous guidera étape par étape pour implémenter un robot de synthèse vocale utilisant CSS+jQuery J'espère qu'il sera utile à tout le monde !

matériaux

• yeux de robot

  
  

[Apprentissage recommandé : tutoriel vidéo CSS, tutoriel vidéo jQuery, vidéo front-end web 】

Page layout

La partie tête La partie supérieure de la tête est un cercle + pseudo-classe après pour réaliser le point blanc

•  <div class="tianxian"></div>
   .tianxian{
      width: 35px;
      height: 35px;
      border-radius: 50%;
      background: #0e58cc;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      margin: auto;
    }
    .tianxian::after{
      content: &#39;&#39;;
      display: block;
      width: 5px;
      height: 10px;
      border-radius: 12px;
      background: #fff;
      position: absolute;
      top: 10px;
      left: 5px;
      transform: rotateZ(20deg);
    }

  Copier après la connexion

<div class="head">
      <div class="erduo"></div>
      <div class="erduo"></div>
      <div class="face">
        <div class="eye"></div>
        <div class="eye"></div>
      </div>
    </div>

effet tridimensionnel Grâce à la fonction d'encart de box-shadow et en décalant de manière appropriée les axes x et y, l'effet tridimensionnel de l'ombre intérieure est obtenu

 box-shadow: -5px -5px 30px 1px #0075af inset;

Copier après la connexion

Implémentation de la synthèse vocale

Attributs de base de SpeechSynthesisUtterance

SpeechSynthesisUtterance基本属性

• SpeechSynthesisUtterance.lang 获取并设置话语的语言
• SpeechSynthesisUtterance.pitch 获取并设置话语的音调(值越大越尖锐,越低越低沉)
• SpeechSynthesisUtterance.rate 获取并设置说话的速度(值越大语速越快,越小语速越慢)
• SpeechSynthesisUtterance.text 获取并设置说话时的文本
• SpeechSynthesisUtterance.voice 获取并设置说话的声音
• SpeechSynthesisUtterance.volume 获取并设置说话的音量

SpeechSynthesisUtterance.text基本方法

• speak() 将对应的实例添加到语音队列中
• cancel() 删除队列中所有的语音.如果正在播放,则直接停止
• pause() 暂停语音
• resume()
SpeechSynthesisUtterance.lang Récupérer et définir la langue de la parole

SpeechSynthesisUtterance.pitch</code > Obtenez et définissez la hauteur de la parole (plus la valeur est grande, plus elle est nette, basse, plus profonde) </p><p><code>SpeechSynthesisUtterance.rate Obtenez et définissez la vitesse de parole (plus la valeur est grande, plus la vitesse de parole est rapide, plus la vitesse est petite, plus la vitesse de parole est faible)

SpeechSynthesisUtterance.text Obtient et définit le texte lorsque vous parlez SpeechSynthesisUtterance.voice Obtient et définit la voix parlée

SpeechSynthesisUtterance.volume Obtenez et définit le volume parlant

SpeechSynthesisUtterance. méthode de base du texte

cancel() Supprimez toutes les voix de la file d'attente si elle est en cours de lecture. , arrêtez directement

$('#btn').click(function () {
      let text = $('#input').val()
      if (text) {
        $('.eye').addClass('shine')
      }
      let u = new window.SpeechSynthesisUtterance()
      u.text = text
      u.lang = 'zh'
      u.rate = 0.7
      u.onend = function () {
        $('.eye').removeClass('shine')
      }
      speechSynthesis.speak(u)
    })

 .shine {
    animation: shine 1s linear infinite;
  }
  @keyframes shine {
    0%{
      height: 100px;
    }
    100%{
      height: 0px;
    }
  }

 
  

    

    

    

    <div class="head">
      <div class="erduo"></div>
      <div class="erduo"></div>
      <div class="face">
        <div class="eye"></div>
        <div class="eye"></div>
      </div>
    </div>
  
  

    
    
点击朗读
  

 $(function () {
    $('#btn').click(function () {
      let text = $('#input').val()
      if (text) {
        $('.eye').addClass('shine')
      }
      let u = new window.SpeechSynthesisUtterance()
      u.text = text
      u.lang = 'zh'
      u.rate = 0.7
      u.onend = function () {
        $('.eye').removeClass('shine')
      }
      speechSynthesis.speak(u)
    })
  })