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

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海123
其它问题可通过以下方式联系本人咨询：
QQ：810665436
微信：ConstancyMan

相关阅读:
Chronicle Queue 使用说明 & 注意事项
Yolov5：强大到你难以想象──新冠疫情下的口罩检测
yarn 会从npm config registry 下载依赖吗
人工神经网络模型有哪些,神经网络分类四种模型
8.19学习记录各种比赛的题目总结
chatglm2微调—Lora
基于YOLOv8的车辆跟踪与车速计算应用
HTML静态网页成品作业(HTML+CSS)——动漫海贼王介绍网页(1个页面)
算法金 | Python 中有没有所谓的 main 函数？为什么？
Stimulsoft Reports.NET 2022.4.3 for WinForms

原文地址：https://blog.csdn.net/weixin_46758988/article/details/134064835