CSS + jQuery を使用してテキスト読み上げロボットを実装してみましょう

この記事では、CSS jQuery を使用してテキスト読み上げロボットを実装する手順を段階的に説明します。皆さんのお役に立てれば幸いです。

#素材

• ロボットの目

  
  

##【推奨学習:

css ビデオ チュートリアル

、jQuery ビデオ チュートリアル 、Web フロントエンド ビデオ 】

ページ レイアウト

ロボット スタイルは以下の図を参照し、CSS スタイルによって実装されます。デザインの上部を部分的に復元しました

# 頭の上部は円で、白色点を実装した後の疑似クラス

•  <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);
    }

全体のレイアウトは絶対配置レイアウトを採用しています 頭全体を使って耳と目の位置を決めます

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

立体感を演出します box-shadow のインセット機能により、x 軸と y 軸を適切にオフセットすることで、内側の影の 3 次元効果が実現されます。

#

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

テキスト読み上げの実装

• ブラウザによって提供される
SpeechSynthesisUtterance

API によって実装されたものに基づいています

SpeechSynthesisUtterance 基本属性

#SpeechSynthesisUtterance.lang

音声の言語を取得および設定します
• SpeechSynthesisUtterance.pitch
音声のピッチを取得および設定します (値が大きいほど鋭くなり、値が小さいほど深くなります) is)
• #SpeechSynthesisUtterance.rate 発話速度を取得および設定します (値が大きいほど発話速度が速く、小さいほど発話速度が遅くなります)
• SpeechSynthesisUtterance.text 話すときのテキストを取得および設定します
• SpeechSynthesisUtterance.voice 話す音声を取得および設定します
• SpeechSynthesisUtterance.volume 発話音量の取得と設定
• SpeechSynthesisUtterance.textBasic メソッド

speak()

対応するインスタンスを音声キューに追加します

• cancel() キュー内のすべてのボイスを削除します。再生中の場合は、直接停止します。
• #pause() ボイスを一時停止します
• resume() 一時停止した音声を再開します
• ボタンのクリック イベントを追加し、入力ボックスの値を取得して再生し、目のアニメーションを追加して、再生終了時のコールバックの目のアニメーション <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">$(&amp;#39;#btn&amp;#39;).click(function () { let text = $(&amp;#39;#input&amp;#39;).val() if (text) { $(&amp;#39;.eye&amp;#39;).addClass(&amp;#39;shine&amp;#39;) } let u = new window.SpeechSynthesisUtterance() u.text = text u.lang = &amp;#39;zh&amp;#39; u.rate = 0.7 u.onend = function () { $(&amp;#39;.eye&amp;#39;).removeClass(&amp;#39;shine&amp;#39;) } speechSynthesis.speak(u) })</pre><div class="contentsignin">ログイン後にコピー</div></div>アニメーション クラス:

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

完全なコード:

#HTML CSS

 
  

    

    

    

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

    
    
点击朗读
  

js

 $(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)
    })
  })

プログラミング関連の知識については、

プログラミング教育

をご覧ください。 ！

以上がCSS + jQuery を使用してテキスト読み上げロボットを実装してみましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。