vue通过点击事件读取音频文件的方法


Posted in Javascript onMay 30, 2018

我们项目现在有这样一个需求,通过select元素来选择音频文件的名称,点击按钮可以进行试听。

话不多说,直接上代码:

HTML:

<div class="testVoice">
 <p class="p-title">提示声音:</p>
 <el-select v-model="valueOpt2" placeholder="请选择">
  <el-option
   v-for="item in options"
   :key="item.valueOpt"
   :label="item.label"
   :value="item.valueOpt">
  </el-option>
 </el-select>
 <el-button type="primary" @click="muiscPlay1">试听</el-button>
</div>

JS:

data(){
 return {
options: [
 {
  valueOpt: '警报1.wav',
  label: '警报1.wav'
 }, {
  valueOpt: '警报2.wav',
  label: '警报2.wav'
 }, {
  valueOpt: '警报3.wav',
  label: '警报3.wav'
 }, {
  valueOpt: '上分.wav',
  label: '上分.wav'
 }, {
  valueOpt: '信息.wav',
  label: '信息.wav'
 }, {
  valueOpt: '封盘失败.wav',
  label: '封盘失败.wav'
 }, {
  valueOpt: '拉人.wav',
  label: '拉人.wav'
 }, {
  valueOpt: '老板查钱.wav',
  label: '老板查钱.wav'
 }
],
valueOpt: '警报1.wav',
 }
},
methods: {
//   试听游戏音乐
   muiscPlay1(){
    this.gamemuiscs1 = new Audio("../../static/audio/"+this.valueOpt);
    this.gamemuiscs1.play();
   },
}

需要注意的是this.valueOpt是对应的音频文件名称,而且音频文件夹最好放在static文件夹下面,这样才能正常读取。

总结

以上所述是小编给大家介绍的vue通过点击事件读取音频文件的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于JQuery的日期联动实现代码
Feb 24 Javascript
jquery获取div宽度的实现思路与代码
Jan 13 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
jQuery实现在列表的首行添加数据
May 19 Javascript
js实现的下拉框二级联动效果
Apr 30 Javascript
BootStrap下jQuery自动完成的样式调整
May 30 Javascript
浅析vue component 组件使用
Mar 06 Javascript
谈谈React中的Render Props模式
Dec 06 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
生产制造追溯系统之再说条码打印
Jun 03 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 Javascript
JavaScript实现猜数字游戏
May 20 Javascript
vue 表单输入格式化中文输入法异常问题
May 30 #Javascript
详解如何使用babel进行es6文件的编译
May 29 #Javascript
基于打包工具Webpack进行项目开发实例
May 29 #Javascript
JavaScript反射与依赖注入实例详解
May 29 #Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 #Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 #Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 #Javascript
You might like
php学习之function的用法
2012/07/14 PHP
php遍历目录与文件夹的多种方法详解
2013/11/14 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
jQuery 实现侧边浮动导航菜单效果
2014/12/26 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
浅析JavaScript函数的调用模式
2016/08/10 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
微信小程序全局变量改变监听的实现方法
2019/07/15 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
Python探索之修改Python搜索路径
2017/10/25 Python
Python实现PS滤镜特效之扇形变换效果示例
2018/01/26 Python
python如何统计序列中元素
2020/07/31 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
python实现可视化动态CPU性能监控
2018/06/21 Python
转换科学计数法的数值字符串为decimal类型的方法
2018/07/16 Python
python获取交互式ssh shell的方法
2019/02/14 Python
简单了解django缓存方式及配置
2019/07/19 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
网络书店创业计划书
2014/02/07 职场文书
致800米运动员广播稿
2014/02/16 职场文书
世界遗产的导游词
2015/02/13 职场文书
学习保证书100字
2015/02/26 职场文书
公司开会通知
2015/04/20 职场文书
运动会广播稿200字
2015/08/19 职场文书
小学班长竞选稿
2015/11/20 职场文书
python实现自定义日志的具体方法
2021/05/28 Python