vue调用语音播放的方法

本文实例为大家分享了vue调用语音播放的具体代码，供大家参考，具体内容如下

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

直接上代码

<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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。