vue调用语音播放的方法
2019-10-19 18:06
2859 查看
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- iOS下微信语音播放之切换听筒和扬声器的方法解决方案
- vue组件传参,调用方法的几种方式
- Vue兄弟组件之间如何调用对方的方法
- Vue的js取值模板及方法调用
- iOS下微信语音播放之切换听筒和扬声器的方法解决方案
- Vue中使用Froala Editor时,外部方法调用html.insert()插入内容到光标最后停留位置功能实现
- Qt 调用phonon 在xp下不能播放视频的解决方法(Phonon::createPath: Cannot connect Phonon::MediaObject ( no objectName )...)
- WM5.0调用widows的Media Player及播放mp3的方法
- 使vue实现jQuery调用的两种方法
- vue 2.0 父组件调用子组件中的方法
- Vue $emit $refs子父组件间方法的调用
- vue关于父组件调用子组件的方法
- iOS语音播放之切换听筒和扬声器的方法解决方案
- Android使用WebView播放flash的方法和JavaScript调用本地方法
- vue项目中在外部js文件中直接调用vue实例的方法比如说this
- vue中methods一个方法调用另外一个方法
- vue 父组件调用子组件方法
- Vue中使用Froala Editor时,外部方法调用html.insert()插入内容到光标最后停留位置功能实现
- vue 父组件调用子组件方法
- Vue在页面数据渲染完成之后的调用方法