微信小程序——给按钮添加点击音效

news/2024/4/17 16:00:47

今天来讲解一下如何给微信小程序的按钮添加点击音效

注意:这里的按钮不一定只是 <button>,也可以是一张图片,其实只是添加一个监听点击事件的函数而已 

首先来看下按钮的定义

<button bind:tap="onInput" >点我有音效,来试试看?</button>

定义 button 按钮,同时给按钮添加了监听点击事件,一旦监听到按钮被点击了,就会执行 onInput() 函数 

此时,只需要在 onInut() 函数中设置音效的相关配置即可 

onInput: function(e){// 这里的参数 e 若其他功能无需使用到也可以不用// 这里可以写除了音效以外的功能// 按钮点击音效const innerAudioContext = wx.createInnerAudioContext()innerAudioContext.autoplay = false  // 是否自动开始播放,默认为 falseinnerAudioContext.loop = false  // 是否循环播放,默认为 falsewx.setInnerAudioOption({    // ios在静音状态下能够正常播放音效obeyMuteSwitch: false,   // 是否遵循系统静音开关,默认为 true// 当此参数为 false 时,即使用户打开了静音开关,也能继续发出声音success: function (e) {// 可以省略},fail: function (e) {// 可以省略}})// 音频文件路径innerAudioContext.src="/music/dial.mp3"// 音频播放innerAudioContext.play()// 这里可以写除了音效以外的功能}

其实原理很简单,就是创建了一个音频对象,然后对音频对象的各项属性进行了配置,如是否自动播放、是否循环播放、文件路径,最后调用音频对象的 play() 方法,这样音频就会播放了

到这里,关于给按钮添加音效的讲解就结束了 

那么,可能有同学就要问了,音效文件在哪里可以找到? 

在这里我也教你们一个方法,可以随便找一个下载音频的网站 

但是这些资源下载一般都是要收费的, 那么问题来了,怎么免费下载到呢?

按下键盘上的 “F12”,就会看到这样一个界面

选择 “Network” - “Media”(中文对应 “网络” - “媒体”),然后点击左上角 “清空”

接着在网页上点击播放你要的那一段音频,此时在上图的下方空白处就会出现对应的音频文件了

接着右键点击那个文件,选择 “Open in new tab”(在新的页面打开) 

最后点击最右侧的四个点,选择下载即可 

注意哦!这个方法不仅仅音频可以,视频也一样可以这样操作,除非网站做了特殊处理,不然都是可以成功操作的!

注意!注意!注意!个人学习使用可以,若为商业行为,造成侵权,概不负责!!! 

若是音频文件需要裁剪,又不想下载如 AU 这些专业音频剪辑软件,可以选择以下网站进行裁剪(注:非广告行为,仅学习推荐)

音频剪切器 mp3剪切 在线音频截取_免费在线工具-爱给网icon-default.png?t=N7T8https://www.aigei.com/tool/audio/trim 

一  叶  知  秋,奥  妙  玄  心 


https://www.xjx100.cn/news/3119022.html

相关文章

手写VUE后台管理系统5 - 整合状态管理组件pinia

整合状态管理组件 安装整合创建实例挂载使用 pinia 是一个拥有组合式 API 的 Vue 状态管理库。 pinia 官方文档&#xff1a;https://pinia.vuejs.org/zh/introduction.html 安装 yarn add pinia整合 所有与状态相关的文件都放置于项目 src/store 目录下&#xff0c;方便管理 在…

智能监控平台/视频共享融合系统EasyCVR接入RTSP协议视频流无法播放原因是什么?

视频集中存储/云存储/视频监控管理平台EasyCVR能在复杂的网络环境中&#xff0c;将分散的各类视频资源进行统一汇聚、整合、集中管理&#xff0c;实现视频资源的鉴权管理、按需调阅、全网分发、智能分析等。AI智能/大数据视频分析EasyCVR平台已经广泛应用在工地、工厂、园区、楼…

mybatis(mybatis-plus)报invalid bound statement (not found)或者找不到xml文件(各种情况)

情况1&#xff1a;查看yml文件是否添加mybatis配置 mybatis-plus:# Mapper.xml 文件位置 Maven 多模块项目的扫描路径需以 classpath*: 开头# 实现接口绑定mapperLocations: classpath*:mybatis/xml/*Mapper.xml情况2&#xff1a;区分使用的的版本是mybatis还是mybstis-plus&a…

【古月居《ros入门21讲》学习笔记】18_常用可视化工具的使用

目录 说明&#xff1a; 1. Qt工具箱 日志输出工具&#xff1a;rqt_console 绘制数据曲线&#xff1a;rqt_plot 图像渲染工具&#xff1a;rqt_image_view 综合工具&#xff1a;rqt 2. 三维可视化工具&#xff1a;Rviz Rviz启动 使用示例 3. 仿真平台&#xff1a;Gazebo…

通用plantuml模板头

通用plantuml文件 startuml participant Admin order 0 #87CEFA // 参与者、顺序、颜色 participant Student order 1 #87CEFA participant Teacher order 2 #87CEFA participant TestPlayer order 3 #87CEFA participant Class order 4 #87CEFA participant Subject order …

后端项目连接数据库-添加MyBatis依赖并检测是否成功

一.在pom.xml添加Mybatis相关依赖 在Spring Boot项目中&#xff0c;编译时会自动加载项目依赖&#xff0c;然后使用依赖包。 需要在根目录下pom.xml文件中添加Mybatis依赖项 <!-- Mybatis整合Spring Boot的依赖项 --> <dependency><groupId>org.mybatis.s…

SimpleCG小游戏开发系列(1)--扫雷

一、前言 前面我们学习了SimpleCG的游戏开发框架,从本篇开始,我们用一系列小游戏的开发来加深对框架的了解.我们先以windows的经典游戏--扫雷,作为首个例子。游戏预览如下 二、框架搭建 因为游戏程序的大体框架差不多&#xff0c;所以我们可以搭建一个通用的主程序。如下所示&a…

element-plus el-dialog 弹窗隐藏遮罩并且可以控制弹窗后的元素、点击、滚动、其他事件操作等

场景 el-dialog 隐藏遮罩并且可以控制弹窗后的元素、点击、滚动、其他事件操作&#xff0c;比如一个弹窗打开了&#xff0c;我要能控制弹窗后面的滚动、点击等等一系列事件。 修改方法 首先我们需要隐藏弹窗遮罩 :modal"false"&#xff0c;并且给 el-dialog 弹窗…