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 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
js设置控件的隐藏与显示的两种方法
Aug 21 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 Javascript
JQuery给网页更换皮肤的方法
May 30 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
Angular数据绑定机制原理
Apr 17 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
Sep 04 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 Javascript
vue离开当前页面触发的函数代码
Sep 01 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 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实现简单数字分页效果
2015/07/26 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
PHP实现会员账号单唯一登录的方法分析
2019/03/07 PHP
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
jQuery.extend 函数的详细用法
2012/06/27 Javascript
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
微信JSSDK上传图片
2015/08/23 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
2016/07/28 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
js实现分页功能
2017/05/24 Javascript
Angular2 组件通信的实例代码
2017/06/23 Javascript
微信小程序支付及退款流程详解
2017/11/30 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
js 数据类型判断的方法
2020/12/03 Javascript
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
python set集合使用方法解析
2019/11/05 Python
Pytorch数据拼接与拆分操作实现图解
2020/04/30 Python
美国购买舞会礼服网站:Couture Candy
2019/12/29 全球购物
出国考察邀请函
2014/01/21 职场文书
个人近期表现材料
2014/02/11 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
会计工作总结范文2014
2014/12/23 职场文书
五年级小学生评语
2014/12/26 职场文书
化验室安全管理制度
2015/08/06 职场文书
八年级数学教学反思
2016/02/17 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书
python实战之用emoji表情生成文字
2021/05/08 Python
vue3不同环境下实现配置代理
2022/05/25 Vue.js