前端JS特效第22集：html5音乐旋律自定义交互特效
html5音乐旋律自定义交互特效，先来看看效果：
部分核心的代码如下(全部代码在文章末尾)：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>ChimeTime™</title><link rel="stylesheet" href="css/style.css">
</head>
<body><div id="container"><div id="toy"><audio id="chime1" src="img/chime1.mp3"></audio><audio id="chime2" src="img/chime2.mp3"></audio><audio id="chime3" src="img/chime3.mp3"></audio><audio id="chime4" src="img/chime4.mp3"></audio><audio id="chime5" src="img/chime5.mp3"></audio><audio id="chime6" src="img/chime6.mp3"></audio><audio id="chime7" src="img/chime7.mp3"></audio><audio id="chime8" src="img/chime8.mp3"></audio><div id="playhead"></div><div id="steps"></div><div id="controls"><button id="play"><span id="pauseTxt"><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#333" d="M14,19H18V5H14M6,19H10V5H6V19Z" /></svg></span><span id="playTxt"><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#333" d="M8,5.14V19.14L19,12.14L8,5.14Z" /></svg> </span></button> <input id="tempo" type="range" min="1" max="9" value="5"><button id="clear"><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#333" d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" /></svg></button></div></div></div><script src='js/TweenMax.min.js'></script>
<script src="js/script.js"></script></body>
</html>全部代码：html5音乐旋律自定义交互特效
相关文章：
前端JS特效第22集：html5音乐旋律自定义交互特效
html5音乐旋律自定义交互特效，先来看看效果： 部分核心的代码如下(全部代码在文章末尾)： <!DOCTYPE html> <html lang"en" > <head> <meta charset"UTF-8"> <title>ChimeTime™</title…...
pyrender 离线渲染包安装教程
pyrender 离线渲染包安装教程 安装 安装 官方安装教程:https://pyrender.readthedocs.io/en/latest/install/index.html#installmesa 首先 pip install pyrenderclang6.0安装 下载地址:https://releases.llvm.org/download.html#6.0.0 注意下好是叫：clangllvm-6…...
XSS平台的搭建
第一步：安装MySQL 数据库 因为xss平台涉及到使用mysql 数据库，在安装之前，先使用docker 安装mysql 数据库。 docker run --name mysqlserver -e MYSQL_ROOT_PASSWORD123 -d -i -p 3309:3306 mysql:5.6 第二步：安装xssplatform…...
【持续集成_03课_Jenkins生成Allure报告及Sonar静态扫描】
1、 一、构建之后的配置 1、安装allure插件 安装好之后，可以在这里搜到已经安装的 2、配置allure的allure-commandline 正常配置，是要么在工具里配置，要么在系统里配置 allure-commandline是在工具里进行配置 两种方式进行配置 1ÿ…...
PageHelper分页查询遇到的小问题
如果我们是这样子直接查询 pagehelper会拼接导我们的sql语句之后 这样子我们搜索出来的list，就是里面参杂了PageHelper的东西 所以我们可以直接转成我们的Page类型 但是如果我们搜索出来的是List<Blog>，我有些信息不想返回给前端，所以…...
【Python】组合数据类型：序列，列表，元组，字典，集合
个人主页：【😊个人主页】 系列专栏：【❤️Python】 文章目录 前言组合数据类型序列类型序列常见的操作符列表列表操作len()append()insert()remove()index()sort()reverse()count() 元组三种序列类型的区别 集合类型四种操作符集合setfrozens…...
algorithm算法库学习之——不修改序列的操作
algorithm此头文件是算法库的一部分。本篇介绍不修改序列的操作函数。 不修改序列的操作 all_ofany_ofnone_of (C11)(C11)(C11) 检查谓词是否对范围中所有、任一或无元素为 true (函数模板) for_each 应用函数到范围中的元素 (函数模板) for_each_n (C17) 应用一个函数对象到序…...
idea创建的maven项目pom文件引入的坐标报红原因
如下所示 我们在引入某些依赖坐标的时候，即使点击了右上角的mavne刷新之后还是报红。 其实这是正常现象，实际上是我们的本地仓库当中没有这些依赖坐标，而idea就会通过报红来标记这些依赖来说明在我们的本地仓库是不存在的。 那有的同学就会…...
Python面试题：Python 中的生成器（generator）是什么？有什么优点？
在Python中，生成器（generator）是一种特殊的迭代器，使用yield关键字生成值，可以逐个生成序列中的值，而不需要一次性将所有值加载到内存中。生成器函数在定义时使用def关键字，并包含一个或多个yie…...
Go语言--复合类型之map、结构体
map Go 语言中的 map(映射、字典)是一种内置的数据结构，它是一个无序的 key-value 对的集合，比如以身份证号作为唯一键来标识一个人的信息。 格式 map [keyType]valueType 在一个 map 里所有的键都是唯一的，而且必须是支持和!操作符的类型…...
Stable Diffusion图像的脸部细节控制——采样器全解析
文章目录 艺术地掌控人物形象好易智算原因分析为什么在使用Stable Diffusion生成全身图像时，脸部细节往往不够精细？ 解决策略 局部重绘采样器总结 艺术地掌控人物形象 在运用Stable Diffusion这一功能强大的AI绘图工具时，我们往往会发现自己…...
CurrentHashMap巧妙利用位运算获取数组指定下标元素
先来了解一下数组对象在堆中的存储形式【数组长度，数组元素类型信息等】 【存放元素对象的空间】 Ma 基础信息实例数据内存填充Mark Word,ClassPointer,数组长度第一个元素第二个元素固定的填充内容 所以我们想要获取某个下标的元素首先要获取这个元素的起始位置…...
实现antd designable平台的组件拖拽功能
平台：designable设计器 github：designable 目录 1 背景2 技术栈3 组件拖拽和放置3.1 类型定义3.2 拖拽3.3 放置 1 背景 由于业务需求，我们需要实现designable平台的一个简易版的组件拖拽功能。 #mermaid-svg-QrxSDGe9YyGG3LbQ {font-family:…...
计算机网络-IP组播基础
一、概述 在前面的学习交换机和路由协议，二层通信是数据链路层间通信，在同一个广播域间通过源MAC地址和目的MAC地址进行通信，当两台主机第一次通信由于不清楚目的MAC地址需要进行广播泛洪，目的主机回复自身MAC地址，然后…...
Git删除了文件拉取时失败
本地删除了一些文件，远端的另一个提交修改了被删除的文件，vs里拉取时提示未处理的提交，无法继续操作，git gui里显示很多unstaged change的项 解决办法： 1、用git bash的git rm --cached filename或 git rm -r --cached…...
【面向就业的Linux基础】从入门到熟练，探索Linux的秘密（十二）-管道、环境变量、常用命令
大致介绍了一下管道、环境变量、一些常用的基本命令，可以当作学习笔记收藏学习一下！！！ 文章目录 前言 一、管道 二、环境变量 1.概念 2.查看 3.修改 4.常用环境变量 三、系统状况 总结 前言 大致介绍了一下管道、环境变量、一些常…...
Spring Boot与Apache Kafka Streams的集成
Spring Boot与Apache Kafka Streams的集成 大家好，我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编，也是冬天不穿秋裤，天冷也要风度的程序猿！ 一、Apache Kafka Streams简介 Apache Kafka Streams是一个用于构…...
Unity中使用VectorGraphics插件时，VectorUtils.RenderSpriteToTexture2D方法返回结果错误的解决方法
Unity中使用VectorGraphics插件时，如果使用VectorUtils.BuildSprite方法创建Sprite，那么得到的Sprite往往是一个三角网格数比较多的Sprite，如果想要得到使用贴图只有两个三角面的方形Sprite，可以使用该插件提供的VectorUtils.Rend…...
用MySQL+node+vue做一个学生信息管理系统（一）：配置项目
先用npm init -y生成配置文件 在项目下新建src文件夹，app.js文件。src目录用来放静态资源文件，app.js是服务器文件，index.js是vue的入口文件 使用npm install express下载express框架 在app.js文件夹开启node服务，监听的端口为…...
2024年06月CCF-GESP编程能力等级认证Python编程二级真题解析
本文收录于专栏《Python等级认证CCF-GESP真题解析》，专栏总目录：点这里，订阅后可阅读专栏内所有文章。 一、单选题（每题 2 分，共 30 分） 第 1 题 小杨父母带他到某培训机构给他报名参加CCF组织的GESP认证…...
Python｜GIF 解析与构建（5）：手搓截屏和帧率控制
目录 Python｜GIF 解析与构建（5）：手搓截屏和帧率控制 一、引言 二、技术实现：手搓截屏模块 2.1 核心原理 2.2 代码解析：ScreenshotData类 2.2.1 截图函数：capture_screen 三、技术实现&…...
7.4.分块查找
一.分块查找的算法思想： 1.实例： 以上述图片的顺序表为例， 该顺序表的数据元素从整体来看是乱序的，但如果把这些数据元素分成一块一块的小区间， 第一个区间[0,1]索引上的数据元素都是小于等于10的， 第二…...
Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...
阿里云ACP云计算备考笔记 (5)——弹性伸缩
目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...
Admin.Net中的消息通信SignalR解释
定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...
Oracle查询表空间大小
1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...
Java 加密常用的各种算法及其选择
在数字化时代，数据安全至关重要，Java 作为广泛应用的编程语言，提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景，有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
初学 pytest 记录
安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...
C++：多态机制详解
目录 一. 多态的概念 1.静态多态（编译时多态） 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1）.协变 2）.析构函数的重写 5.override 和 final关键字 1&#…...
安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲
文章目录 前言第一部分：体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分：体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...