脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue点击事件读取音频文件

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

 更新时间：2018年05月30日 08:38:05   作者：zhougx  
最近做项目遇到这样的一个需求，通过select元素来选择音频文件的名称，点击按钮可以进行试听。接下来通过本文给大家介绍vue项目中通过点击事件读取音频文件的方法,需要的朋友可以参考下

我们项目现在有这样一个需求，通过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通过点击事件读取音频文件的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • v-slot和slot、slot-scope之间相互替换实例

    v-slot和slot、slot-scope之间相互替换实例

    这篇文章主要介绍了v-slot和slot、slot-scope之间相互替换实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • Vue Element前端应用开发之菜单资源管理

    Vue Element前端应用开发之菜单资源管理

    在权限管理系统中，菜单也属于权限控制的一个资源，属于角色控制的一环。不同角色用户，登录系统后，出现的系统菜单是不同的。菜单结合路由集合，实现可访问路由的过滤，也就实现了对应角色菜单的展示和可访问路由的控制。
    2021-05-05
  • Vue数据驱动试图的实现方法及原理

    Vue数据驱动试图的实现方法及原理

    当Vue实例中的数据（data）发生变化时,与之相关联的视图（template）会自动更新,反映出最新的数据状态, Vue的数据驱动视图是通过其响应式系统实现的,以下是Vue数据驱动视图实现的核心原理,需要的朋友可以参考下
    2024-10-10
  • Vue3的provide和inject实现多级传递的原理解析

    Vue3的provide和inject实现多级传递的原理解析

    Vue3中的provide和inject函数通过原型链实现数据的多级传递,父组件使用provide注入数据,子组件和后代组件通过inject获取这些数据,在创建组件实例时,子组件会继承父组件的provides属性对象,介绍Vue3的provide和inject实现多级传递的原理,需要的朋友可以参考下
    2024-12-12
  • Vue3  defineExpose要在方法声明定义以后使用的教程

    Vue3  defineExpose要在方法声明定义以后使用的教程

    这篇文章主要介绍了Vue3  defineExpose要在方法声明定义以后使用的教程,本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-02-02
  • vue中el-date-picker type=daterange日期清空时不回显的解决

    vue中el-date-picker type=daterange日期清空时不回显的解决

    这篇文章主要介绍了vue中el-date-picker type=daterange日期清空时不回显的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-07-07
  • element实现合并单元格通用方法

    element实现合并单元格通用方法

    这篇文章主要介绍了element实现合并单元格通用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • Vue不能下载xls以及文件乱码问题解决

    Vue不能下载xls以及文件乱码问题解决

    最近工作中遇到了一些问题,通过查找相关资料终于找到了相关的解决方法,这篇文章主要给大家介绍了关于Vue不能下载xls以及文件乱码问题解决的相关资料,需要的朋友可以参考下
    2022-04-04
  • 微信小程序Echarts动态使用及图表层级踩坑解决方案

    微信小程序Echarts动态使用及图表层级踩坑解决方案

    这篇文章主要为大家介绍了微信小程序Echarts动态使用及图表层级踩坑解决方案，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03
  • vue.js层叠轮播效果的实例代码

    vue.js层叠轮播效果的实例代码

    这篇文章主要介绍了vue.js层叠轮播效果，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2018-11-11

最新评论