最新web语音合成接口代码示例（支持普通话、粤语、英语、日文等）

web speechSynthesis api example

web, audio, 语音

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1086
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var synth = window.speechSynthesis;

var inputForm = document.querySelector('form');
var inputTxt = document.querySelector('.txt');
var voiceSelect = document.querySelector('select');

var pitch = document.querySelector('#pitch');
var pitchValue = document.querySelector('.pitch-value');
var rate = document.querySelector('#rate');
var rateValue = document.querySelector('.rate-value');

var voices = [];

function populateVoiceList() {
    voices = synth.getVoices().sort(function(a, b) {
        const aname = a.name.toUpperCase(),
            bname = b.name.toUpperCase();
        if (aname < bname) return -1;
        else if (aname == bname) return 0;
        else return +1;
    });
    var selectedIndex = voiceSelect.selectedIndex < 0 ? 0 : voiceSelect.selectedIndex;
    voiceSelect.innerHTML = '';
    for (i = 0; i < voices.length; i++) {
        var 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);
    }
    voiceSelect.selectedIndex = selectedIndex;
}

populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
    speechSynthesis.onvoiceschanged = populateVoiceList;
}

inputForm.onsubmit = function(event) {
    event.preventDefault();

speak();

inputTxt.blur();
}

pitch.onchange = function() {
    pitchValue.textContent = pitch.value;
}

rate.onchange = function() {
    rateValue.textContent = rate.value;
}

voiceSelect.onchange = function() {
    speak();
}

编译

CSS

HTML

web speechSynthesis api example

web, audio, 语音

编辑器支持Emmet

快捷键

web speechSynthesis api example

web, audio, 语音

webgl2导数函数（texture derivative）代码示例

three.js webgpu渲染器加载gltf模型代码示例（Chrome 113版本以上）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：