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 特殊字符
Apr 05 Javascript
JavaScript获取GridView选择的行内容
Apr 14 Javascript
禁止JQuery中的load方法装载IE缓存中文件的方法
Sep 11 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
Dec 12 Javascript
JavaScript DOM节点添加示例
Jul 16 Javascript
jquery ztree实现模糊搜索功能
Feb 25 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
vue.js中实现登录控制的方法示例
Apr 23 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
微信小程序实现滑动操作代码
Apr 23 Javascript
基于JS实现计算24点算法代码实例解析
Jul 23 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
饭制《星际争霸》Mod:优化游戏机制 增加新单位
2017/07/02 星际争霸
PHP配置心得包含MYSQL5乱码解决
2006/11/20 PHP
深入理解ob_flush和flush的区别(ob_flush()与flush()使用方法)
2013/02/06 PHP
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
PHP对XML内容进行修改和删除实例代码
2016/10/26 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
jQuery 页面 Mask实现代码
2010/01/09 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
BootStrap Fileinput初始化时的一些参数
2016/12/30 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
Python实现遍历目录的方法【测试可用】
2017/03/22 Python
Python的IDEL增加清屏功能实例
2017/06/19 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
python绘制中国大陆人口热力图
2018/11/07 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
如何利用Python识别图片中的文字
2020/05/31 Python
如何利用Python写个坦克大战
2020/11/18 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
给校长的一封检讨书
2014/09/20 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年群众路线党员自我评议
2014/09/24 职场文书
接待员岗位职责
2015/02/13 职场文书
高中生自我评价范文2015
2015/03/03 职场文书
Python MNIST手写体识别详解与试练
2021/11/07 Python
springboot读取resources下文件的方式详解
2022/06/21 Java/Android