前端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认证…...
浏览器访问 AWS ECS 上部署的 Docker 容器（监听 80 端口）
✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义（Task Definition&…...
浅谈 React Hooks
React Hooks 是 React 16.8 引入的一组 API，用于在函数组件中使用 state 和其他 React 特性（例如生命周期方法、context 等）。Hooks 通过简洁的函数接口，解决了状态与 UI 的高度解耦，通过函数式编程范式实现更灵活 Rea…...
在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能
下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能，包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...
JVM垃圾回收机制全解析
Java虚拟机（JVM）中的垃圾收集器（Garbage Collector，简称GC）是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象，从而释放内存空间，避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...
MVC 数据库
MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...
涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战
“🤖手搓TuyaAI语音指令 😍秒变表情包大师，让萌系Otto机器人🔥玩出智能新花样！开整！” 🤖 Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制（TuyaAI…...
ABAP设计模式之---“简单设计原则(Simple Design)”
“Simple Design”（简单设计）是软件开发中的一个重要理念，倡导以最简单的方式实现软件功能，以确保代码清晰易懂、易维护，并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计，遵循“让事情保…...
10-Oracle 23 ai Vector Search 概述和参数
一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI，使用客户端或是内部自己搭建集成大模型的终端，加速与大型语言模型（LLM）的结合，同时使用检索增强生成（Retrieval Augmented Generation &#…...
Redis的发布订阅模式与专业的 MQ（如 Kafka, RabbitMQ）相比，优缺点是什么？适用于哪些场景？
Redis 的发布订阅（Pub/Sub）模式与专业的 MQ（Message Queue）如 Kafka、RabbitMQ 进行比较，核心的权衡点在于：简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...
认识CMake并使用CMake构建自己的第一个项目
1.CMake的作用和优势 跨平台支持：CMake支持多种操作系统和编译器，使用同一份构建配置可以在不同的环境中使用 简化配置：通过CMakeLists.txt文件，用户可以定义项目结构、依赖项、编译选项等，无需手动编写复杂的构建脚本…...