使用Google Chrome的Web Speech API进行文本到语音的转换

创建一个将文本转换为语音的Web应用程序听起来很酷，并且如果所有这些功能都可用而不受任何第三方库的干扰，那么实现起来就更加容易。 Web语音API提供了一些基本工具，可用于创建启用了语音数据的交互式Web应用程序。我们创建了一个基本的界面，它有一个简单的框，其中包含我们将在其中输入文本的文本输入部分，以及两个滑块，可控制声音的速率和音调。然后，我们有一个下拉菜单，其中包含所有受支持的语言以及其中提到的区域。

index.html此HTML文件包含网页的布局。

  

    
  
    Text to speech!
  
    
    
      
    
    
      
    
      
    
    
      
    

  

    
        
            
                
                    
                        GeeksforGeeks Text-to-Speech Conversion
                    
                      
                    
                                        
                
            
        
          
        
        
            
                
                    Rate
                    5
                    
                
            
        
          
        
        
            
                
                    Pitch
                    5
                    
                
            
        
          
        
        
            
                
                      
                    
                                    
                
                  
                
                
                    Speak it
                
            
        
    

  

style.css此文件用于向HTML文件添加一些CSS样式。

body {
    background: url('images/background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    background-attachment: fixed;
}
  
#front-text {
    font-size: 35px;
    color: white;
    font-weight: bolder;
    text-shadow: 1px 1px 1px black;
    display: block;
    position: relative;
    margin-bottom: 5%;
    margin-top: 15%;
}
  
#rate-value {
    float: right;
}
  
#pitch-value {
    float: right;
}
  
#foot {
    font-size: 20px;
    color: white;
    font-weight: bolder;
    display: block;
    position: relative;
    margin-top: 1%;
}

main.js JavaScript文件用于将文本文件转换为语音。

// Initialising the speech API
const synth = window.speechSynthesis;
   
// Element initialization section
const form = document.querySelector('form');
const textarea = document.getElementById('maintext');
const voice_select = document.getElementById('voice-select');
const rate = document.getElementById('rate');
const pitch = document.getElementById('pitch');
const rateval = document.getElementById('rate-value');
const pitchval = document.getElementById('pitch-value');
   
// Retrieving the different voices and putting them as 
// options in our speech selection section
let voices = [];
const getVoice = () => {
      
    // This method retrieves voices and is asynchronously loaded
    voices = synth.getVoices();
    var option_string = "";
    voices.forEach(value => {
        var option = value.name + ' (' + value.lang + ') ';
        var newOption = "" + option
                + "\n";
        option_string += newOption;
    });
      
    voice_select.innerHTML = option_string;
}
   
// Since synth.getVoices() is loaded asynchronously, this
// event gets fired when the return object of that 
// function has changed
synth.onvoiceschanged = function() {
    getVoice();
};
   
const speak = () => {
      
    // If the speech mode is on we dont want to load 
    // another speech
    if(synth.speaking) {
        alert('Already speaking....');
        return;
    }
       
    // If the text area is not empty that is if the input
    // is not empty
    if(textarea.value !== '') {
          
        // Creating an object of SpeechSynthesisUtterance with
        // the input value that represents a speech request
        const speakText = new SpeechSynthesisUtterance(textarea.value);
   
        // When the speaking is ended this method is fired
        speakText.onend = e => {
            console.log('Speaking is done!');
        };
          
        // When any error occurs this method is fired
        speakText.error = e=> {
            console.error('Error occured...');
        };
   
        // Selecting the voice for the speech from the selection DOM
        const id = voice_select.selectedIndex;
        const selectedVoice = 
            voice_select.selectedOptions[0].getAttribute('data-name');
    
        // Checking which voices has been chosen from the selection
        // and setting the voice to the chosen voice
        voices.forEach(voice => {
            if(voice.name === selectedVoice) {
                speakText.voice = voice;
            }
        });
   
        // Setting the rate and pitch of the voice
        speakText.rate = rate.value;
        speakText.pitch = pitch.value;
   
        // Finally calling the speech function that enables speech
        synth.speak(speakText);
    }
};
   
// This function updates the rate and pitch value to the
// value to display
rate.addEventListener('change', evt => rateval.innerHTML 
        = (Number.parseFloat(rate.value) * 10) + "");
  
pitch.addEventListener('change', evt => pitchval.innerHTML 
        = (Number.parseFloat(pitch.value) * 10) + "");
   
// This is the section when we assign the speak button, the
// speech function
form.addEventListener('submit', evt => {
    evt.preventDefault();
    speak();
    textarea.blur();
});

输出：