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…

练习 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…

Maven,pom.xml,查找 子jar包

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

零拷贝原理+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;默认为展开一项内容&…

Spring Cloud Gateway教程

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

vue3与Electron构建跨平台应用(webpack)

一、创建vue3项目 vue create vue3_webpack_electron 二、安装Electron npm install --save-dev electron Electron 三、vue add electron-builder vue add electron-builder

Git和本地仓库托管到gitee

Git作用&#xff1a;记录代码内容&#xff0c;切换代码版本&#xff0c;实现多人开发 Git安装&#xff1a; 打开bash端 命令&#xff1a;git-v(查看版本&#xff09; 配置用户信息 git config --global user.name “用户名” git config --global user.email "邮箱名…

颠覆传统:Web3如何塑造未来的数字经济

引言 近年来&#xff0c;随着数字化时代的到来&#xff0c;互联网已经成为人们生活中不可或缺的一部分。然而&#xff0c;随着技术的不断发展和社会的不断变迁&#xff0c;传统的Web2模式逐渐显露出一些弊端&#xff0c;如数据垄断、隐私泄露等问题&#xff0c;这促使人们寻求…

【数据结构】——线性表(顺序表加链表),万字解读(加链表oj详解)

前言 由于之前存在过对两者的区别考虑&#xff0c;所以把他们放在一起来说&#xff0c;更加容易区别和理解 对于有关线性表的概念这里就不展示了&#xff0c;这里主要是介绍线性表里面的这两个结构的知识点 一.顺序表 1.顺序表介绍 顺序表的存储结构和逻辑结构都是相邻的&a…

阿里云轻量应用服务器和ECS服务器有啥区别?2024年整理对比表

阿里云服务器ECS和轻量应用服务器有什么区别&#xff1f;轻量和ECS优缺点对比&#xff0c;云服务器ECS是明星级云产品&#xff0c;适合企业专业级的使用场景&#xff0c;轻量应用服务器是在ECS的基础上推出的轻量级云服务器&#xff0c;适合个人开发者单机应用访问量不高的网站…

02分布式搜索引擎ES

elasticsearch查询 1.DSL查询文档1.1.DSL查询分类1.2.全文检索查询1.3.精准查询1.4.地理坐标查询1.5.复合查询 2.搜索结果处理2.1.排序2.2.分页2.3.高亮2.4.总结 3.RestClient查询文档3.1.快速入门3.2.match查询3.3.精确查询3.4.布尔查询3.5.排序、分页3.6.高亮 1.DSL查询文档 …

JetPack之LiveData

目录 一、LiveData简介1.1 LiveData是什么&#xff1f; 二、LiveData使用2.1 LiveData基础使用2.2 LiveData搭配Service模拟后台消息2.3 LiveData在组件中的数据传递 三、LiveData应用场景 一、LiveData简介 1.1 LiveData是什么&#xff1f; LiveData是一种可观察的数据存储器…

Golang 异步(bsd/linux)io

Golang 异步(bsd/linux)io 在日常开发中&#xff0c;读写文件的底层调用函数是syscall.Read/Write。一切都是围绕这两个函数展开的&#xff0c;不过有时候需要或者就是单纯想异步执行。liburing是linux上一个很好的原生异步io库&#xff0c;这里需要适配bsd派系的系统&#xf…

iostream、fstream、sstream、string、vector、unordered_map、stack

iostream 用于输入输出操作&#xff0c;包含了处理标准输入输出流的功能&#xff08;例如&#xff0c;cin, cout, cerr等&#xff09;。 #include <iostream>int main() {int number;std::cout << "Enter a number: ";std::cin >> number;std::…