网页用事件监听器播放声音

一、什么是监听器:

        在前端页面中,事件监听器(Event Listener)是一种编程机制,它允许开发者指定当特定事件(如用户点击按钮、鼠标悬停、页面加载完成等)发生时执行特定的代码块。简而言之,事件监听器“监听”页面上的某些元素或整个文档,等待某个事件的发生,一旦该事件触发,预先定义好的处理函数(回调函数)就会被执行。

以JavaScript为例,事件监听器的使用通常涉及以下几个关键点:

1. 事件(Event):这是用户或浏览器执行的某种动作或发生的状态改变,如`click`(点击)、`mouseover`(鼠标悬停)、`load`(页面加载完成)等。

2. 目标元素:你希望监听事件的HTML元素,如按钮(`<button>`)、链接(`<a>`)、图像(`<img>`)等。

3. 监听函数(Listener Function):当事件发生时调用的函数,它定义了事件发生时的具体响应逻辑。

4. 注册监听器:通过JavaScript的DOM API(如`addEventListener`方法)将监听函数绑定到目标元素的特定事件上。

二、如何插入声音:

 

三、如何添加监听器: 

 

1):抓取id为‘anniu’的按钮

2):给按钮添加一个事件监听器触发方式是点击(click)触发后面的匿名事件

3):定义一个sound,将插入声音的id赋给sound

4):将声音的播放定义为从头播放

5):用play()的方法播放声音 

这样就完成了给按钮添加声音的方式。 

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

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

相关文章

服务器上VMWare Workstation虚拟机声卡支持

问题&#xff1a;联想服务器没有声卡&#xff0c;Windows 服务器安装了VMWare Workstation&#xff0c;里面的Windows 11虚拟机&#xff0c;我远程桌面上来&#xff0c;没有声卡&#xff0c;但是我想做 声音方面的测试就没办法。 解决办法&#xff1a; 服务器主机上安装虚拟机…

5.4符号三角形问题

#include<iostream> #include<stdio.h> using namespace std; int half; int ssum; int cnt0;//减号的个数 int n; int p[100][100]; int countt0; void BackTrack(int s) {if(cnt>half||s*(s-1)/2-cnt>half)return ;if(s>n){countt;return ;}for(int i0;…

RabbitMq教程【精细版一】

一、引言 模块之间的耦合度过高&#xff0c;导致一个模块宕机后&#xff0c;全部功能都不能用了&#xff0c;并且同步通讯的成本过高&#xff0c;用户体验差。 RabbitMQ引言 二、RabbitMQ介绍 MQ全称为Message Queue&#xff0c;消息队列是应用程序和应用程序之间的通信方法。…

在安装HDFS过程中遇见Permission denied

HDFS Shell命令权限不足问题解决 问题 想必有同学在实战Shell的时候&#xff0c;遇到了&#xff1a; Permission denied: userroot, accessWRITE, inode"/":hadoop:supergroup:drwxr-xr-x 这种类似的问题。 问题的原因就是没有权限&#xff0c;那么为什么呢&#…

功能强大的声音模拟合成软件Togu Audio Line TAL-Mod 1.9.7

Togu Audio Line TAL一个虚拟模拟合成器,具有卓越的声音和几乎无限的调制能力。其特殊的振荡器模型能够创建广泛的声音,从经典的单声道到丰富的立体声引线、效果器和焊盘。路由可以使用虚拟跳线电缆来完成。只需连接调制输出以达到调制的目的。之后,您可以调整调制强度。您不…

【SQLmap】常用命令

文章目录 实际使用案例常用命令基本命令数据库指纹识别用户信息用户权限数据库枚举数据导出密码哈希操作系统命令执行文件操作代理和网络参数指定保存恢复自动搜索注入智能模式等级设置自动注入WAF 绕过杂项帮助和支持 SQLmap 是一款开源的自动化 SQL 注入检测和利用工具&#…

你真的会udf提权???数据库权限到系统权限 内网学习 mysql的udf提权操作 ??msf你会用了吗???

我们在已经取得了数据库的账号密码过后&#xff0c;我们要进一步进行提取的操作&#xff0c;我们mysql有4钟提权的操作。 udf提权(最常用的)mof提权启动项提权反弹shell提权操作 怎么获取密码操作&#xff1a; 怎么获取密码&#xff0c;通过sql注入获取这个大家都应该知道了&a…

Python-数据分析组合可视化实例图【附完整源码】

数据分析组合可视化实例图 开篇&#xff1a;应女朋友的要求&#xff0c;于是写下了这篇详细的数据可视化代码及完整注释 一&#xff1a;柱状图、折线图横向组合网格布局 本段代码使用了pyecharts库来创建一个包含多个图表&#xff08;柱状图、折线图&#xff09;和网格布局的…

第一周:李宏毅机器学习笔记

第一周学习周报 摘要一、机器学习基础理论1. 什么是机器学习&#xff1f;2. 机器学习“寻找”的函数有哪些类型&#xff1f;3. 机器学习中机器如何“寻找”函数&#xff1f;三步走3.1 第一步&#xff1a;设定函数的未知量&#xff08;Function with Unknown Parameters&#xf…

Vue3 按钮根据屏幕宽度展示折叠按钮

文章目录 一、组件封装二、使用三、最终效果(参考)四、参考 一、组件封装 ButtonFold.vue 1、获取父组件的元素&#xff0c;根据元素创建动态插槽 2、插槽中插入父元素标签。默认效果和初始状态相同。 3、当屏幕宽度缩小时&#xff0c;部分按钮通过 dropdown 的方式展示出来&a…

springboot使用测试类报空指针异常

检查了Service注解&#xff0c;还有Autowired注解&#xff0c;还有其他注解&#xff0c;后面放心没能解决问题&#xff0c;最后使用RunWith(SpringRunner.class)解决了问题&#xff01;&#xff01; 真的是✓8了&#xff0c;烦死了这个✓8报错&#xff01;

C语言 | Leetcode C语言题解之第200题岛屿数量

题目&#xff1a; 题解&#xff1a; void cleanLand(char** grid, int gridSize, int ColSize,int row,int column) {if(grid[row][column] 1){//不等于1则清零grid[row][column] 0;}else{//不等于1则返回return ;}int newRow;int newColumn;//上if(row ! 0) //还能上{ne…

每天五分钟计算机视觉:人体姿势识别

本文重点 人体姿势识别是计算机视觉领域的一个重要研究方向,旨在通过图像或视频数据自动检测并识别出人体的各种姿势和动作。随着深度学习技术的快速发展,基于神经网络的方法在这一领域取得了显著进展。神经网络,特别是卷积神经网络(CNN)和循环神经网络(RNN),因其强大…

基于YOLOv9的PCB板缺陷检测

数据集 PCB缺陷检测&#xff0c;我们直接采用北京大学智能机器人开放实验室数据提供的数据集&#xff0c; 共六类缺陷 漏孔、鼠咬、开路、短路、杂散、杂铜 已经对数据进行了数据增强处理&#xff0c;同时按照YOLO格式配置好&#xff0c;数据内容如下 模型训练 ​ 采用YOLO…

idea乱码问题解决

乱码问题产生的根本原因 数据的编码和解码使用的不是同一个字符集 使用了不支持某个语言文字的字符集 Tomcat控制台乱码 在tomcat10.1.7这个版本中,修改 tomcat/conf/logging.properties中,所有的UTF-8为GBK即可 sout乱码问题,设置JVM加载.class文件时使用UTF-8字符集 设置虚…

RedisAtomicInteger并发案例

&#x1f370; 个人主页:__Aurora__ &#x1f35e;文章有不合理的地方请各位大佬指正。 &#x1f349;文章不定期持续更新&#xff0c;如果我的文章对你有帮助➡️ 关注&#x1f64f;&#x1f3fb; 点赞&#x1f44d; 收藏⭐️ RedisAtomicInteger 提供了对整数的原子性操作&a…

【SkiaSharp绘图12】SKCanvas方法详解(一)清空、裁切区域设置、连接矩阵、注释、弧与扇形、图集、九宫格绘图、圆

文章目录 SKCanvas 方法Clear 清空ClipPath/ClipRect/ClipRegion/ClipRoundRect 设置裁切区域Concat 连接矩阵DrawAnnotation绘制注释DrawArc绘制椭圆弧、扇形DrawAtlas绘制图集(一个图像、多个区域、多个缩放、一次绘制&#xff09;DrawBitmap绘制图像DrawBitmapNinePatch九宫…

深度学习评价指标:Precision, Recall, F1-score, mIOU, 和 mDice

在深度学习和机器学习中&#xff0c;评价模型性能是至关重要的一环。本文将详细讲解一些常见的评价指标&#xff0c;包括精确率&#xff08;Precision&#xff09;、召回率&#xff08;Recall&#xff09;、F1-score、平均交并比&#xff08;mIOU&#xff09;和平均Dice系数&am…

5.6 0-1背包问题

#include<iostream> #include<string> #include<stdlib.h> #include<bits/stdc.h> using namespace std;int c;//背包容纳的重量 int n;//物品数量 int cw;//当前重量 int cv;//当前价值 int bestv;//当前最优价值 int x[100]; int bestx[100]; struct…

Linux 交叉编译工具链格式 sqlite3编译示例

1、交叉编译工具链 1.1 定义 交叉编译工具链是一个由编译器、连接器和解释器组成的综合开发工具集&#xff0c;它允许开发者在一个平台上&#xff08;例如高性能的PC或服务器&#xff09;编译生成另一个平台&#xff08;例如嵌入式系统或不同的操作系统和硬件架构&#xff09…