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 相关文章推荐
保证JavaScript和Asp、Php等后端程序间传值编码统一
Apr 17 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
Dec 12 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
JavaScript中匿名函数用法实例
Mar 23 Javascript
js简单正则验证汉字英文及下划线的方法
Nov 28 Javascript
vue实现ToDoList简单实例
Feb 07 Javascript
详解react-router4 异步加载路由两种方法
Sep 12 Javascript
JS开发中基本数据类型具体有哪几种
Oct 19 Javascript
详解React项目中碰到的IE问题
Mar 14 Javascript
原生JS实现烟花效果
Mar 10 Javascript
JavaScript enum枚举类型定义及使用方法
May 15 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
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
TMDPHP 模板引擎使用教程
2012/03/13 PHP
PHP调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
解析PHP对现有搜索引擎的调用
2013/06/25 PHP
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
基于jquery 的一个progressbar widge
2010/10/29 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
用jquery存取照片的具体实现方法
2013/06/30 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
jquery移动节点实例
2015/01/14 Javascript
jQuery实现自定义checkbox和radio样式
2015/07/13 Javascript
Css3制作变形与动画效果
2015/07/24 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
2019/01/18 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
在pycharm创建scrapy项目的实现步骤
2020/12/01 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
简历中个人自我评价范文
2013/12/26 职场文书
人事部经理岗位职责
2014/03/07 职场文书
文体活动实施方案
2014/03/27 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
Django如何与Ajax交互
2021/04/29 Python