vue2 中使用音频

vue2 中使用音频

  • template 页面 写入 audio 标签
<template><div><audio ref="moreAudio" :src="moreAudioSrc"></audio><audio ref="noAudio" :src="noAudioSrc"></audio></div>
</template>
  • script 内写入音频路径
<script>
export default {data() {return {moreAudioSrc:'./audio/more.wav',noAudioSrc:'./audio/no.wav'}}
}
</script>

通常将音频文件放在 public 文件下

在这里插入图片描述

  • 在方法里面使用
playFn(){if(!data) {this.$refs.noAudio.play()} else {this.$refs.moreAudio.play()}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/759171.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024 用CleanMyMac X为您的MAC清理提速吧

CleanMyMac X 是由 MacPaw 公司开发的一款针对 macOS 操作系统的电脑清理工具。它可以帮助用户清理电脑中的垃圾文件、卸载不需要的软件、优化电脑性能等。它的界面简洁明了&#xff0c;操作简单易懂&#xff0c;非常适合普通用户使用。 链接: https://pan.baidu.com/s/1_TFnrI…

微信小程序自定义组件

微信小程序中的自定义组件是指在微信小程序中创建的可重用的、可复用的组件&#xff0c;它可以被多个页面使用。自定义组件可以帮助我们提高开发效率&#xff0c;提高代码的可维护性和可重用性。以下是微信小程序中自定义组件的使用方法&#xff1a; 一. 创建自定义组件 首先…

练习 10 Web [MRCTF2020]你传你呢

和test5一样&#xff0c;文件上传限制为图片&#xff0c;使用.htaccess文件让上传成功图片木马文件进行执行 开屏暴击&#xff0c;差点去世 尝试上传文件 各种过滤&#xff0c;但是能传图片&#xff0c;这里就不写了&#xff0c;我做过的test5遇到过的重复内容 直接尝试在te…

【算法设计与分析】实现Trie前缀树

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;算法分析与设计 ⛺️稳中求进&#xff0c;晒太阳 题目 Trie&#xff08;发音类似 "try"&#xff09;或者说 前缀树 是一种树形数据结构&#xff0c;用于高效地存储和检索字符串…

一个优秀的开源ChatGpt外壳项目(lobe-chat)

lobe-chat 简介&#xff1a; 开源、现代化设计的 ChatGPT/LLMs 聊天应用与开发框架支持语音合成、多模态、可扩展的插件系统&#xff0c;一键免费拥有你自己的 ChatGPT/Gemini/Ollama 应用。 下载lobe-chat lobe-chat项目开源地址&#xff1a;GitHub - lobehub/lobe-chat: &am…

HTML:浏览器CSS样式前缀

在编写CSS样式时&#xff0c;特别是在处理CSS3以及特定浏览器特有的CSS扩展属性时&#xff0c;为了兼容不同的浏览器&#xff0c;可能需要在CSS属性前面添加特定的浏览器厂商前缀。以下是一些常见的浏览器厂商前缀&#xff1a; .example {/* 普通写法 */transform: rotate(30d…

Maven,pom.xml,查找 子jar包

在IDEA打开pom.xml&#xff0c;会看到这里&#xff1a; 然后如果有需要&#xff0c;把相关的 子jar包 去掉 <dependency><groupId>XXX</groupId><artifactId>XXX</artifactId><exclusions><exclusion><artifactId>xxx</a…

利用opencv获取系统时间

前一篇《c获取系统时间的方法-CSDN博客》博客介绍了如何在不同系统中获取系统时间的方法&#xff0c;但这些方法受系统的限制&#xff0c;如time.h就只能在Linux系统中使用。而opencv则不受系统限制&#xff0c;示例代码如下&#xff0c; #include <opencv2/opencv.hpp>…

零拷贝原理+kafka中的零拷贝

零拷贝原理kafka中的零拷贝 kafka性能之零拷贝传统IO零拷贝mmp优化sendfile优化sendfile DMA scatter/gather优化Kafka是怎么使用零拷贝的 kafka性能之零拷贝 kafka中的零拷贝并不是说完全避免了上下文切换与cpu拷贝的次数, 而是减少这种拷贝次数 传统IO 传统的一次IO流程 rea…

微服务高级篇(二):分布式事务+Seata架构

文章目录 一、分布式事务理论基础1.1 CAP定理1.2 BASE理论 二、初始Seata2.1 Seata的架构2.2 部署TC【事务协调者】服务2.3 微服务集成Seata 三、实践3.1 XA模式3.1.1 原理3.1.2 实现 3.2 AT模式3.2.1 原理3.2.2 脏写问题以及解决方案【全局锁超时处理】3.2.3 实现 3.3 TCC模式…

简单记录一次帮维修手机经历(Vivo x9)

简介 手边有一台朋友亲戚之前坏掉的Vivo X9手机&#xff0c; 一直说要我帮忙修理一下&#xff0c; 我一直是拒绝的&#xff0c; 因为搞程序的不等于维修的&#xff08;会电脑不等于维修电器&#xff09;&#xff0c;不知道这种思路如何根深蒂固的&#xff0c;不过好吧&#xff…

选电气还是电子?哪个更有前途?

点击上方选择“置顶/星标公众号” 福利干货&#xff0c;第一时间送达 大家好&#xff0c;我是麦哥&#xff0c;最近有小伙伴在 星球 里提问; 提问内容 球友提问&#xff1a; 麦哥你好&#xff0c;我是电子电工专业的中职生一枚&#xff0c;今年参加职教高考能上个大专&#xff…

Axure案例分享—折叠面板(附下载地址)

今天和大家分享的Axure案例是折叠面板 折叠面板是移动端APP中常见的组件之一&#xff0c;有时候也称之为手风琴。咱们先看下Axure画出的折叠面板原型效果&#xff0c;然后再对该组件进行详细讲解。 一、功能介绍 折叠或展开多个面板内容&#xff0c;默认为展开一项内容&…

openssl的使用注意

1.OPenSSL的官网 就是github的openssl的&#xff0c;里面有源代码和各个版本的信息&#xff0c;不过相对来说要自己编译源代码。 官网https://www.openssl.org/docs/man3.2/man7/migration_guide.html#/ 2.已经编译好的库&#xff0c;也可以直接下载 网站&#xff1a;https:…

css如何通过媒体查询功能实现自动切换dark 模式

要通过 CSS 媒体查询实现自动切换到 Dark 模式&#xff0c;你可以根据用户系统的主题设置或者根据特定条件来切换样式。以下是一个简单的示例&#xff0c;演示了如何使用媒体查询和 CSS 变量来实现自动切换&#xff1a; html Copy code <!DOCTYPE html> <html lang&qu…

美国硅谷大带宽服务器怎么样

美国硅谷的大带宽服务器性能优秀&#xff0c;对科技创新和在线业务支撑作用显著。那么美国硅谷大带宽服务器怎么样?Rak小编为您整理发布美国硅谷大带宽服务器怎么样。 美国硅谷作为全球科技创新的中心&#xff0c;其大带宽服务器具有以下特点&#xff1a; - **高速数据处理**&…

element ui el-table分页多选功能失效

编写 项目是遇到一个坑&#xff1a;selection-change&#xff1a;当选择项发生变化时会触发该事件&#xff08;当分页切换时&#xff0c;选中的数据都会自动清空&#xff09; 一、在el-table中 // 添加 :row-key "id"<el-table row-key"id" :data&quo…

Spring Cloud Gateway教程

1 微服务网关概述 Spring Cloud Gateway是在 Spring 生态系统之上构建的API网关服务&#xff0c;旨在为微服务架构应用提供一种简单有效的统一的API路由管理方式。 Spring Cloud Gateway主要功能&#xff1a; 反向代理认证鉴权流量控制熔断日志监控 2 Spring Cloud Gateway三…

C语言基础练习——Day12

目录 选择题 编程题 数字颠倒 单词倒排 选择题 1、请阅读以下程序&#xff0c;其运行结果是 int main() { char cA;if(0<c<9) printf("YES");else printf("NO");return 0; } A YESB NOC YESNOD 语句错误 答案&#xff1a;A &#x1f4a1; 解析&#…

Java复习06 Spring 代码概念

Java复习06 Spring 代码概念 1.基本代码 Component public class CommunityApplicationTests implements ApplicationContextAware {private ApplicationContext applicationContext;Overridepublic void setApplicationContext(ApplicationContext applicationContext) thr…