web浏览器端实现语音转文字或文字转语音

苦海123

已于 2023-12-25 11:29:35 修改

阅读量576

点赞数

分类专栏： html5 文章标签：前端

于 2023-10-26 21:07:00 首次发布

本文链接：https://blog.csdn.net/weixin_46758988/article/details/134064835

版权

html5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

web浏览器端语音转文字demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语音转文字</title>
    <style>
        textarea {
            width: 100%;
            height: 50px;
        }
    </style>
</head>
<body>
    <div>
        <textarea shape="" coords="" href="" alt="" id="area" placeholder="请说点什么..."></textarea>
        <button id="speek">麦克风</button>
        <button id="addBtn">发布</button>
        <ul id="text"></ul>
    </div>

    <script>
        window.onload = () => {
            console.log('页面加载完毕');
            const area = document.querySelector('#area');
            const speek = document.querySelector('#speek');
            const addBtn = document.querySelector('#addBtn');
            const text = document.querySelector('#text');
            const recognition = new webkitSpeechRecognition();
            let isSpeek = false;

            recognition.continuous = true;
            recognition.interimResults = true;
            recognition.lang = 'zh-CN';
            recognition.onresult=function(event) {
                console.log(event, 'event')
                let result = ''
                for(let i = event.resultIndex;i <= event.resultIndex; i++) {
                    if (event.results[i].isFinal) {
                        result += event.results[i][0].transcript;
                    }
                }
                area.value = result
            }

            speek.addEventListener('click', () => {
                if(isSpeek) {
                    recognition.stop();
                    isSpeek = false;
                    return;
                }
                recognition.start();
                isSpeek = true;
            })

            addBtn.addEventListener('click', () => {
                const li = document.createElement('li');
                li.textContent = area.value;
                text.appendChild(li);
                area.value = '';
            })

        }

    </script>
</body>
</html>

web浏览器实现文字转语音播报demo：

<template>
  <div>
    <button @click="playVoice">播放语音</button>
  </div>
</template>
<script>
const synth = window.speechSynthesis
const msg = new SpeechSynthesisUtterance()
export default {
  data() {
    return {};
  },
  mounted(){
    
  },
  methods: {
    playVoice() {
      this.handleSpeak('小朋友，你是否有很多问号') // 传入需要播放的文字
    },
    // 语音播报的函数
    handleSpeak(text) {
      msg.text = text;     // 文字内容: 小朋友，你是否有很多问号
      msg.lang = "zh-CN";  // 使用的语言:中文
      msg.volume = 1;     // 声音音量：1
      msg.rate = 1;        // 语速：1
      msg.pitch = 1;       // 音高：1
      synth.speak(msg)    // 播放
    },
    // 语音停止
    handleStop(e) {
      msg.text = e
      msg.lang = "zh-CN"
      synth.cancel(msg)
    }
  }
};
</script>