vue调用语音播放的方法


Posted in Javascript onSeptember 27, 2019

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript实现自定义标签
May 08 Javascript
比Jquery的document.ready更快的方法
Apr 28 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
May 30 Javascript
javascript检查表单数据是否改变的方法
Jul 30 Javascript
js获得页面的高度和宽度的方法
Feb 23 Javascript
jQuery中的siblings用法实例分析
Dec 24 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
Apr 13 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
基于构造函数的五种继承方法小结
Jul 27 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
详解JavaScript的变量
Apr 04 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 #Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 #Javascript
vue实现在线翻译功能
Sep 27 #Javascript
webpack 处理CSS资源的实现
Sep 27 #Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 #Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 #Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 #Javascript
You might like
php你的验证码安全码?
2007/01/02 PHP
浅谈apache和nginx的rewrite的区别
2013/02/22 PHP
PHP中使用break跳出多重循环代码实例
2015/01/21 PHP
利用laravel+ajax实现文件上传功能方法示例
2017/08/13 PHP
php获取微信openid方法总结
2019/10/10 PHP
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
微信企业号开发之微信考勤Cookies的使用
2015/09/11 Javascript
angularjs创建弹出框实现拖动效果
2020/08/25 Javascript
javaScript给元素添加多个class的简单实现
2016/07/20 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
js倒计时显示实例
2016/12/11 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
vue接口请求加密实例
2020/08/11 Javascript
讲解python参数和作用域的使用
2013/11/01 Python
爬山算法简介和Python实现实例
2014/04/26 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
Flask之flask-script模块使用
2018/07/26 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
解决django的template中如果无法引用MEDIA_URL问题
2020/04/07 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
不开辟用于交换数据的临时空间,如何完成字符串的逆序
2012/12/02 面试题
什么是聚集索引和非聚集索引
2012/01/17 面试题
英语道歉信范文
2014/01/09 职场文书
工作时间上网检讨书
2014/02/03 职场文书
护理专科自荐书范文
2014/02/18 职场文书
企业安全生产目标责任书
2014/07/23 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
小学家长意见怎么写
2015/06/03 职场文书
怎样写工作总结啊!
2019/06/18 职场文书