CSS + jQuery を使用してテキスト読み上げロボットを実装してみましょう-CSSチュートリアル-php.cn

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

青灯夜游

リリース： 2022-11-04 19:52:51

転載

2550 人が閲覧しました

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

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

#素材

ロボットの目

css ビデオチュートリアル

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

ページレイアウト

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

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

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

 <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;

ログイン後にコピー

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

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

SpeechSynthesisUtterance 基本属性

#SpeechSynthesisUtterance.lang

SpeechSynthesisUtterance.pitch
#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;">$(&#39;#btn&#39;).click(function () { let text = $(&#39;#input&#39;).val() if (text) { $(&#39;.eye&#39;).addClass(&#39;shine&#39;) } let u = new window.SpeechSynthesisUtterance() u.text = text u.lang = &#39;zh&#39; u.rate = 0.7 u.onend = function () { $(&#39;.eye&#39;).removeClass(&#39;shine&#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>
  
  
    
    点击朗读

ログイン後にコピー

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

ログイン後にコピー

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

プログラミング教育

をご覧ください。！

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