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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持前端开发者。

» 本文来自:前端开发者 » 《Vue调用语音播放的方法_輕微_前端开发者》
» 本文链接地址:https://www.rokub.com/70590.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!