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

一、什么是监听器:

        在前端页面中,事件监听器(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.mfbz.cn/a/760652.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

clonezilla(再生龙)克隆物理机linux系统,然后再去另一台电脑安装

前言: 总共需要2个u盘,一个装再生龙系统,一个是使用再生龙把硬盘备份到另一个盘里面,恢复的时候,先使用再生龙引导,然后再插上盘进行复制 1.制作启动u盘 1.1下载再生龙Clonezilla 下載 1.2下载UltraISO(https://cn.ultraiso.net/uiso9_cn.exe) 1.3 打开UltraISO,选择co…

Vue 解决报错 VM6290:1 Uncaught SyntaxError: Unexpected identifier ‘Promise‘

Vue 报错 VM6290:1 Uncaught SyntaxError: Unexpected identifier ‘Promise’ 排查 控制台报了一个错误 , Uncaught SyntaxError: Unexpected identifier ‘Promise’&#xff0c;网上查到的方法是 缺少符号&#xff0c;语法写法错误&#xff0c;但这些都没有解决我的问题&am…

用Lobe Chat部署本地化, 搭建AI聊天机器人

Lobe Chat可以关联多个模型&#xff0c;可以调用外部OpenAI, gemini,通义千问等, 也可以关联内部本地大模型Ollama, 可以当作聊天对话框消息框来集成使用 安装方法参考&#xff1a; https://github.com/lobehub/lobe-chat https://lobehub.com/zh/docs/self-hosting/platform/…

RCE漏洞

RCE&#xff08;Remote code/command execution&#xff09;&#xff0c;远程代码执行和远程命令执行。在很多web应用开发的过程中&#xff0c;程序员可能在代码中编写一些能够运行字符串的函数&#xff0c;当用户可以控制输入内容时&#xff0c;这就导致了RCE漏洞。 1 远程代…

《昇思25天学习打卡营第4天|数据集 Dataset》

文章目录 前言&#xff1a;今日所学&#xff1a;1. 数据集加载2. 数据集迭代3. 数据集常用操作与自定义数据集 前言&#xff1a; 今天学习的是数据集的内容。首先&#xff0c;数据是深度学习的基石&#xff0c;高质量的数据输入能够在整个深度神经网络中发挥积极作用。MindSpo…

安全和加密常识(6)Base64编码方式

文章目录 什么是 Base64编码原理编解码示例应用什么是 Base64 Base64 是一种用于将二进制数据编码为仅包含64种ASCII字符的文本格式的编码方法,注意,它不是加密算法。它设计的目的主要是使二进制数据能够通过只支持文本的传输层(如电子邮件)进行传输。Base64常用于在需要处…

STM32 SWD烧写

最小电路 stm32f103x 内部已经集成了振荡电路&#xff0c;可以省略&#xff1b;rst引脚电路&#xff0c;可以省略&#xff0c;boot0,boot1不需要设置 正常烧录 -------------------------------------------------------------------STM32CubeProgrammer v2.9.0 …

C++旋转点坐标计算

/// 获取A点绕B点旋转P度后的新坐标/// </summary>/// <param name"Angle">角度</param>/// <param name"CirPoint">圆心坐标</param>/// <param name"MovePoint">移动点的坐标</param>/// <param…

window搭建git环境

1.下载安装window下git专用软件scm 从Git for Windows 官网网站下载&#xff0c;并且一路安装即可 安装成功后通过桌面快捷图标Git Bash点击打开 安装后软件应该会自动帮助配置环境变量&#xff0c;如果没有需要自己配置使用 2.git环境配置 2.1设置姓名和邮箱(github上你注…

编码器的使用

视频 提高部分-第4讲 编码器的使用(1)_哔哩哔哩_bilibili 编码器单位 编码器总分辨率 编码器 一圈所计算的脉冲数&#xff08;但由于定时器会倍频 所以计算时要乘以倍频系数&#xff09; 在淘宝上看的分辨率物理分辨率 实际分辨率物理分辨率 * 定时器倍频数&#xff08;一…

c++ 设计模式 的课本范例(下)

&#xff08;19&#xff09; 桥接模式 Bridge&#xff0c;不是采用类继承&#xff0c;而是采用类组合&#xff0c;一个类的数据成员是类对象&#xff0c;来扩展类的功能。源码如下&#xff1a; class OS // 操作系统负责绘图 { public:virtual ~OS() {}virtual void draw(cha…

昇思25天学习打卡营第13天|MindNLP ChatGLM-6B StreamChat

学AI还能赢奖品&#xff1f;每天30分钟&#xff0c;25天打通AI任督二脉 (qq.com) MindNLP ChatGLM-6B StreamChat 本案例基于MindNLP和ChatGLM-6B实现一个聊天应用。 1 环境配置 %%capture captured_output # 实验环境已经预装了mindspore2.2.14&#xff0c;如需更换mindspo…

使用 Swift 递归搜索目录中文件的内容,同时支持 Glob 模式和正则表达式

文章目录 前言项目设置查找文件读取CODEOWNERS文件解析规则搜索匹配的文件确定文件所有者输出结果总结前言 如果你新加入一个团队,想要快速的了解团队的领域和团队中拥有的代码库的详细信息。 如果新团队中的代码库在 GitHub / GitLab 中并且你不熟悉代码所有权模型的概念或…

Burpsuite靶场信息泄露相关的实验通关

目录 第一关&#xff1a;错误消息中的信息披露 第二关&#xff1a;调试页面信息披露 第三关&#xff1a;通过备份文件披露源代码 第四关&#xff1a;通过信息披露绕过身份验证 第五关&#xff1a;版本控制历史中的信息披露 最近看大佬的文章&#xff0c;发现了很对自己没有…

鲁工小装载机-前后桥传动轴油封更换记录

鲁工装载机 因前后桥大量漏齿轮油&#xff0c;故拆开查看、更换油封 一&#xff1a; 如图圈起来的地方是螺丝和钢板相别&#xff0c;用200的焊接电流用电焊机点开一个豁口后拆除螺丝。 转轴是拆除传动轴后的样子。 这就是拆下来的样子&#xff0c;这玩意插上边那图&…

2024最新初级会计职称题库来啦!!!

16.根据增值税法律制度的规定&#xff0c;下列各项中&#xff0c;属于"提供加工、修理修配劳务"的是&#xff08;&#xff09;。 A.修理小汽车 B.修缮办公楼 C.爆破 D.矿山穿孔 答案&#xff1a;A 解析&#xff1a;选项AB&#xff1a;修理有形动产&#xff08;…

江协科技51单片机学习- p21 LED点阵屏(8*8)

&#x1f680;write in front&#x1f680; &#x1f50e;大家好&#xff0c;我是黄桃罐头&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流 &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd;​…

发那科机床采集数据

前面两篇重点介绍了理论&#xff0c;从这篇开始&#xff0c;我们开始进行实战。首先从发那科机床开始&#xff0c;为何第一个将发那科。因为发那科系统机床有三最。最广泛&#xff08;中国保有量最多&#xff09;、 最多资料&#xff08;发那科系统的开发包历史悠久&#xff0c…

【效率提升】新一代效率工具平台utools

下载地址&#xff1a;utools uTools这款软件&#xff0c;是一款功能强大且高度可定制的效率神器&#xff0c;使用快捷键alt space(空格) 随时调用&#xff0c;支持调用系统应用、用户安装应用和市场插件等。 utools可以调用系统设置和内置应用&#xff0c;这样可以方便快捷的…

Python计算n的阶乘的多种方法

1 问题 在课上&#xff0c;我们学习了用递归函数去计算一个自然数n的阶乘。但计算一个自然数n的阶乘是否就这一种方法呢&#xff1f; 2 方法 关于计算一个自然数n的阶乘&#xff0c;通过搜索&#xff0c;我们寻找到了除运用递归函数外的其他三种方法&#xff1a; 方法一 通过导…