js浏览器文本语音播报

洋小驼

已于 2022-05-13 16:51:57 修改

阅读量1.3k

点赞数 1

文章标签：语音识别 javascript 前端

于 2022-05-10 15:08:51 首次发布

本文链接：https://blog.csdn.net/qq_34925033/article/details/124688954

版权

<style>
   .ceshi{}
   .ceshi ul{
      width: 60%;
      margin: 0 auto;
   }
   .ceshi ul li{
      width: 20%;
      display: inline-block;
   }
</style>
    
<div class="ceshi">
        <ul> <li>按时吃空</li><li>的SV放</li><li>分隔符</li><li>投入和</li><li>跟你讲</li></ul>
</div>

<script>
        var musiText = '';
        // $(document).mouseenter(function(e){
        //     musiText = e.target.innerText
        //     console.log(musiText)
        //     handleSpeak(musiText)
        // });
        
        $('.ceshi ul li').mouseenter(function(e){
            musiText = e.target.innerText
            console.log(musiText)
            handleSpeak(musiText)
        });

        const synth = window.speechSynthesis;
        const msg = new SpeechSynthesisUtterance();
        
        // 语音播报的函数
        function handleSpeak(text) {
            
            msg.text = text;
            msg.lang = "zh-CN";  // 使用的语言:中文
            msg.volume = 1;      // 音量：1
            msg.rate = 2;        // 语速：1
            msg.pitch = 0;       // 音高：1
            synth.speak(msg);    // 播放
        }
        // 语音停止
        function handleStop(e) {
            msg.text = e;
            msg.lang = "zh-CN";
            synth.cancel(msg);
        }
</script>