<template>
<div>
<div>
<input type="text" id="ttsText">
<input type="button" id="tts_btn" @click="doTTS" value="播放">
<input type="button" id="zt_btn" @click="doZT" value="暂停">
</div>
<div id="wrapp">
</div>
</div>
</template>
<script>
export default {
mounted() {},
data() {
return {
textVal: '911',
ss:''
};
},
methods: {
doTTS() {
var ttsDiv = document.getElementById('wrapp');
var ttsText = document.getElementById('ttsText').value;
// 这样就可实现播放内容的替换了
var a= '<audio id="wrapp_aud" autoplay="autoplay">';
var b= '<source src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=10&text='+ttsText+'" type="audio/mpeg">';
var c= '</audio>';
ttsDiv.innerHTML = a + b + c;
var ttsAudio = document.getElementById('wrapp_aud');
ttsAudio.play();
},
doZT() {
var ttsAudio = document.getElementById('wrapp_aud');
ttsAudio.pause();
}
}
};
</script>
通过JS调用接口
<script src="http://code.responsivevoice.org/responsivevoice.js"></script>
responsiveVoice.speak(STRING TEXT, [STRING VOICE], [OBJECT PARAMETERS]);
//text:就是要朗读成语音的文字,比如:responsiveVoice.speak("hello world");
//voice:是选择用什么语音阅读,默认是英文阅读,如果要用中文阅读,就设置成“Chinese Female”,比如:responsiveVoice.speak("hello world","Chinese Female");
//parameters:这个是阅读的速度,比如:responsiveVoice.speak("hello world", "UK English Male", {rate: 1.5});
responsiveVoice.cancel();//取消朗读
responsiveVoice.pause();//暂停阅读
responsiveVoice.resume();//复位到开启