浏览器API 文字转语音

speechSynthesis

可以实现的功能

内置22种语种
可调节语速
可调节音调
可暂停/恢复语音

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    <form action="">
        <input type="text" class="txt"  >

        <label for="rate">语音速度label><input type="range" min="0.5" max="2" value="1" step="0.1" id="rate">
        <label for="pitch">音调label><input type="range" min="0" max="2" value="1" step="0.1" id="pitch">

        <button type="submit">文字转语音button>
    form>

    <select>select>
body>
html>

<script>
    const voiceSelect = document.querySelector('select');
    const rate = document.querySelector('#rate');
    const pitch = document.querySelector('#pitch');
    let voices = [];

    const synth = window.speechSynthesis;

    synth.addEventListener('voiceschanged', () => {
        voices = synth.getVoices();
        for (let i = 0; i < voices.length ; i++) {
            const option = document.createElement('option');
            option.textContent = `${voices[i].name} (${voices[i].lang})`;

            if (voices[i].default) {
                option.textContent += ' — DEFAULT';
            }

            option.setAttribute('data-lang', voices[i].lang);
            option.setAttribute('data-name', voices[i].name);
            voiceSelect.appendChild(option);
        }
    });

    document.querySelector('form').onsubmit = function (e) {
        e.preventDefault();

        const word = document.querySelector('.txt').value;

        let utterThis = new SpeechSynthesisUtterance(word);

        const selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');

        for (let i = 0; i < voices.length ; i++) {
            if (voices[i].name === selectedOption) {
                utterThis.voice = voices[i];
            }
        }

        utterThis.pitch = pitch.value;
        utterThis.rate = rate.value;
        synth.speak(utterThis);
    }

    // synth.pending 同时播放两条语音，第一条在播放，第二条则在队列中，返回true
    // synth.speaking 是否有语音在播放
    // synth.resume 置于非暂停状态
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
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

相关阅读:
智能自修复防腐涂层研究进展综述
AI全栈大模型工程师(九)Function Calling 的机制
一文学会Zookeeper
React-2 JSX知识
使用react-amanda快速搭建管理类型的系统
MySQL Varchar前缀索引的一个细节
Kafka是如何保证数据的安全性、可靠性和分区的
「Docker」命令使用大全，全集一览
PyTorch入门教学——torchvision中数据集的使用
Kotlin高仿微信-第26篇-朋友圈-选择图片、小视频对话框

原文地址：https://blog.csdn.net/weixin_44240581/article/details/126394648