功能展示 输入文字 点击播放 调用语音

直接上代码

<template>
  <div>
		<!-- 语音播放功能 -->
		<div>
			<input type="text" id="ttsText">
			<input type="button" id="tts_btn" @click="myplay()" value="播放">
		</div>
		<div id="bdtts_div_id">
			<audio id="tts_autio_id" autoplay="autoplay">
				<source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=9&text= " type="audio/mpeg">
				<embed id="tts_embed_id" height="0" width="0" src="">
			</audio>
		</div>
  </div>
</template>
 
<script>
export default {
  name: 'Test',
  data () {
    return {
      
    }
  },
  methods: {
	myplay(){
				var ttsDiv = document.getElementById('bdtts_div_id');
				var ttsAudio = document.getElementById('tts_autio_id');
				var ttsText = document.getElementById('ttsText').value;
				ttsDiv.removeChild(ttsAudio);
				var au1 = '<audio id="tts_autio_id" autoplay="autoplay">';
				var sss = '<source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text='+ttsText+'" type="audio/mpeg">';
				var eee = '<embed id="tts_embed_id" height="0" width="0" src="">';
				var au2 = '</audio>';
				ttsDiv.innerHTML = au1 + sss + eee + au2;
				ttsAudio = document.getElementById('tts_autio_id');
				ttsAudio.play();
	}
  }
}
</script>