JavaScript 赛博八音盒调制《ENDER LILIES-Harmonious》

news/2024/10/31 6:56:18/

前言

原谅我,在手写完数据之后实在没有精力和耐心再去整理逻辑的格式,而我手边又没有电脑.
最好复制下来到编辑器整理一下.


js内有几个空格用了中文,自行替换.

<div id ="container">
<div id="play">
<p>...</p>
<div id="cts">Touch To start<div>
<span></span>
</div>
javascript">const audio_data_list = [{ id: 0, key: 'a0', hz: 27.500 },{ id: 1, key: 'a#0', hz: 29.135 },{ id: 2, key: 'b0', hz: 30.868 },{ id: 3, key: 'c1', hz: 32.703 },{ id: 4, key: 'c#1', hz: 34.648 },{ id: 5, key: 'd1', hz: 36.708 },{ id: 6, key: 'd#1', hz: 38.891 },{ id: 7, key: 'e1', hz: 41.203 },{ id: 8, key: 'f1', hz: 43.654 },{ id: 9, key: 'f#1', hz: 46.249 },{ id: 10, key: 'g1', hz: 48.999 },{ id: 11, key: 'g#1', hz: 51.913 },{ id: 12, key: 'a1', hz: 55.000 },{ id: 13, key: 'a#1', hz: 58.270 },{ id: 14, key: 'b1', hz: 61.735 },{ id: 15, key: 'c2', hz: 65.406 },{ id: 16, key: 'c#2', hz: 69.296 },{ id: 17, key: 'd2', hz: 73.416 },{ id: 18, key: 'd#2', hz: 77.782 },{ id: 19, key: 'e2', hz: 82.407 },{ id: 20, key: 'f2', hz: 87.307 },{ id: 21, key: 'f#2', hz: 92.499 },{ id: 22, key: 'g2', hz: 97.999 },{ id: 23, key: 'g#2', hz: 103.826 },{ id: 24, key: 'a2', hz: 110.000 },{ id: 25, key: 'a#2', hz: 116.541 },{ id: 26, key: 'b2', hz: 123.471 },{ id: 27, key: 'c3', hz: 130.813 },{ id: 28, key: 'c#3', hz: 138.591 },{ id: 29, key: 'd3', hz: 146.832 },{ id: 30, key: 'd#3', hz: 155.563 },{ id: 31, key: 'e3', hz: 164.814 },{ id: 32, key: 'f3', hz: 174.614 },{ id: 33, key: 'f#3', hz: 184.997 },{ id: 34, key: 'g3', hz: 195.998 },{ id: 35, key: 'g#3', hz: 207.652 },{ id: 36, key: 'a3', hz: 220.000 },{ id: 37, key: 'a#3', hz: 233.082 },{ id: 38, key: 'b3', hz: 246.942 },{ id: 39, key: 'c4', hz: 261.626 },{ id: 40, key: 'c#4', hz: 277.183 },{ id: 41, key: 'd4', hz: 293.665 },{ id: 42, key: 'd#4', hz: 311.127 },{ id: 43, key: 'e4', hz: 329.628 },{ id: 44, key: 'f4', hz: 349.228 },{ id: 45, key: 'f#4', hz: 369.994 },{ id: 46, key: 'g4', hz: 391.995 },{ id: 47, key: 'g#4', hz: 415.305 },{ id: 48, key: 'a4', hz: 440.000 },{ id: 49, key: 'a#4', hz: 466.164 },{ id: 50, key: 'b4', hz: 493.883 },{ id: 51, key: 'c5', hz: 523.251 },{ id: 52, key: 'c#5', hz: 554.365 },{ id: 53, key: 'd5', hz: 587.330 },{ id: 54, key: 'd#5', hz: 622.254 },{ id: 55, key: 'e5', hz: 659.255 },{ id: 56, key: 'f5', hz: 698.456 },{ id: 57, key: 'f#5', hz: 739.989 },{ id: 58, key: 'g5', hz: 783.991 },{ id: 59, key: 'g#5', hz: 830.609 },{ id: 60, key: 'a5', hz: 880.000 },{ id: 61, key: 'a#5', hz: 932.328 },{ id: 62, key: 'b5', hz: 987.767 },{ id: 63, key: 'c6', hz: 1046.502 },{ id: 64, key: 'c#6', hz: 1108.731 },{ id: 65, key: 'd6', hz: 1174.659 },{ id: 66, key: 'd#6', hz: 1244.508 },{ id: 67, key: 'e6', hz: 1318.510 },{ id: 68, key: 'f6', hz: 1396.913 },{ id: 69, key: 'f#6', hz: 1479.978 },{ id: 70, key: 'g6', hz: 1567.982 },{ id: 71, key: 'g#6', hz: 1661.219 },{ id: 72, key: 'a6', hz: 1760.000 },{ id: 73, key: 'a#6', hz: 1864.655 },{ id: 74, key: 'b6', hz: 1975.533 },{ id: 75, key: 'c7', hz: 2093.005 },{ id: 76, key: 'c#7', hz: 2217.461 },{ id: 77, key: 'd7', hz: 2349.318 },{ id: 78, key: 'd#7', hz: 2489.016 },{ id: 79, key: 'e7', hz: 2637.020 },{ id: 80, key: 'f7', hz: 2793.826 },{ id: 81, key: 'f#7', hz: 2959.955 },{ id: 82, key: 'g7', hz: 3135.963 },{ id: 83, key: 'g#7', hz: 3322.438 },{ id: 84, key: 'a7', hz: 3520.000 },{ id: 85, key: 'a#7', hz: 3729.310 },{ id: 86, key: 'b7', hz: 3951.066 },{ id: 87, key: 'c8', hz: 4186.009 },]

这部分有些空格错误,但数据是对的.

javascript">let callhum = 0;
const books = [
{ id: 30, hold: 0.4, beside: 0, type: audio_type_list[0] },{ id: 32, hold: 0.4, beside:0, type: audio_type_list[0] },{ id: 33, hold: 1, beside: 0, type: audio_type_list[0]},{ id: 32, hold: 0.8, beside: 1, type: audio_type_list[0]}, { id: 30, hold: 0.4, beside: 0, type: audio_type_list[0]}, { id: 32, hold: 0.4, beside: 0, type: audio_type_list[0]},{ id: 33, hold: 1, beside: 0, type: audio_type_list[0] },{ id: 32, hold: 0.8, beside: 1, type: audio_type_list[0] },{ id: 33, hold: 0.4, beside: 0, type: audio_type_list[0] }, { id: 35, hold: 0.5, beside: 0, type: audio_type_list[0] },{ id:37, hold: 1, beside:	0, type: audio_type_list[0] },{ id: 40, hold: 1, beside:	1, type: audio_type_list[0] },{ id: 37, hold: 0.4, beside:	0, type: audio_type_list[0] },{ id: 39, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 40, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 32, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 39, hold: 0.8, beside:	0, type: audio_type_list[0] },{ id: 35, hold: 0.8, beside:	0, type: audio_type_list[0] },{ id: 40, hold: 0.8, beside:	1, type: audio_type_list[0] },{ id: 39, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 39, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 37, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 39, hold: 0.5, beside:	0.5, type: audio_type_list[0] },{ id: 44, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 39, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 39, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 37, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 39, hold: 0.5, beside:	0.5, type: audio_type_list[0] },{ id: 44, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 39, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 39, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 37, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 39, hold: 0.5, beside:	0.5, type: audio_type_list[0] },{ id: 46, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 39, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 39, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 37, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 39, hold: 0.5, beside:	0.5, type: audio_type_list[0] },{ id: 46, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 39, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 39, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 37, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 39, hold: 0.5, beside:	0.5, type: audio_type_list[0] },{ id: 37, hold: 0.8, beside:	0.2, type: audio_type_list[0] },{ id: 36, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 33, hold: 0.8, beside:	0.8, type: audio_type_list[0] },{ id: 34, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 36, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 38, hold: 0.8, beside:	0.2, type: audio_type_list[0] },{ id: 34, hold: 0.8, beside:	0.2, type: audio_type_list[0] },{ id: 36, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 38, hold: 0.8, beside:	0.2, type: audio_type_list[0] },{ id: 45, hold: 0.8, beside:	0.2, type: audio_type_list[0] },{ id: 38, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 43, hold: 0.8, beside:	0.2, type: audio_type_list[0] },{ id: 43, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 43, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 41, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 39, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 41, hold: 0.5, beside:	1, type: audio_type_list[0] },{ id: 38, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 39, hold: 0.4, beside:	0.1, type: audio_type_list[0] },{ id: 39, hold: 0.8, beside:	0.1, type: audio_type_list[0] },{ id: 32, hold: 0.8, beside:	0.5, type: audio_type_list[0] },{ id: 39, hold: 0.4, beside:	0.1, type: audio_type_list[0] },{ id: 38, hold: 0.8, beside:	0.3, type: audio_type_list[0] },{ id: 31, hold: 0.8, beside:	0.5, type: audio_type_list[0] },{ id: 37, hold: 0.8, beside:	0, type: audio_type_list[0] },{ id: 35, hold: 1, beside:	0.1, type: audio_type_list[0] },{ id: 34, hold: 0.8, beside:	0.5, type: audio_type_list[0] },{ id: 37, hold: 1, beside:	1, type: audio_type_list[0] },{ id: 38, hold: 1, beside:	0.2, type: audio_type_list[0] },{ id: 34, hold: 1, beside:	0.2, type: audio_type_list[0] },{ id: 36, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 38, hold: 1, beside:	0.2, type: audio_type_list[0] },{ id: 45, hold: 1, beside:	0.2, type: audio_type_list[0] },{ id: 38, hold: 0.5, beside:	0, type: audio_type_list[0] },{ id: 43, hold: 1, beside:	0, type: audio_type_list[0] },{ id: 43, hold: 1, beside:	0, type: audio_type_list[0] },{ id: 45, hold: 1, beside:	0, type: audio_type_list[0] },{ id: 41, hold: 0.2, beside:	0, type: audio_type_list[0] },{ id: 38, hold: 1, beside:	0.2, type: audio_type_list[0] }]

逻辑

javascript">const showld = document.querysele ctor('span');
const tips = document.querySelector('p');
const cts = document.getElementById('#cts'); 
const playDom = documet.getElementById('play'); const container = document.getElementById('#container');showld.innerHTML=`...<br/>0/${ books.length }`;
playDom.addEventListener('click', () => {container.style.backgroundColor = 'black';tips.innerHTML="playing..."; cts.innerHTML=";play();});function getRandom() {return Math.random ().toFixed(1) >= 0.5 ? Math.random().to Fixed(2)*100 : Math.Random().toFixed(3)*1000;}function play() {if(callNum == books.length) return; const data = getBookByCallNum(callNum);const audioContext = new Audio context();const oscillator = audioContext. createOscillator();const gainNode=audioContext.createGain(),oscillatorgainNode. connect(gainNode);oscillator.connect(audioContext. destination);oscillator.type= data.type;showld.innerHTML = `${ data.id }<br/>${ callNum }/${books.length}`; oscillator.frequency.value= audio_data_list[data.id].hz;gainNode.gain.setValueAtTime(0, audioContext.currentTime); gainNode.gain.linearRampToValueAtTime(1, audioContext.currentTime + 0.1);osCillator.start(audioContext.currentTime);playDom.style.transition= data.hold + data.beside + 's';playDom.style.backgroundColor = `rgb(${ getRandom()} ${ getRandom() } ${ getRandom() })`; gainNode.gain.exponentialRampTo ValueAtTime (0.1, audioContext.currentTime+1);oscillator.stop(audioContext.currentTime + data.hold);++callNum;setTimout(play, (hold + data.beside)*1000);
function getBookByCallNum(callNum) { return books.find((data, index) => { return index == callNum;});
*{
margin: 0;padding: 0;}body {background-color: black;}#container{display: flex;height: 350px;margin-top: 300px;align-items: center;flex-direction: column;justify-content: center;background-color: white;transition: 1s;}#container: hover {background-color: black;}.#play { displsy: flex;width:120px,min-height: 50px;padding:5px;border-radjus: 3px;align-items: center;flex-direction: column;line-height: 15px;color: white;background-color: black;}#play: hover {color: black;cursor: pointer;background-color: white;}span { color: grey;cursor: default;text-align: center;}

http://www.ppmy.cn/news/1543290.html

相关文章

【04】RabbitMQ的集群机制

1、RabbitMQ的性能监控 关于RabbitMQ的性能监控&#xff0c;在管理控制台中提供了非常丰富的展示。例如&#xff1a;首页这个整体监控页面&#xff0c;就展示了非常多详细的信息&#xff1a; 还包括消息的生产消费频率、关键组件的使用情况等等非常多的消息。都可以在这个管理…

【Python单元测试】pytest框架单元测试 配置 命令行操作 测试报告 覆盖率

单元测试&#xff08;unit test&#xff09;&#xff0c;简称UT。本文将介绍在Python项目中&#xff0c;pytest测试框架的安装&#xff0c;配置&#xff0c;执行&#xff0c;测试报告与覆盖率 pytest简介 pytest是一款流行的&#xff0c;简单易上手的单元测试框架&#xff0c;…

大话C++:第24篇 文件

1 文件概述 文件是指一组相关数据的有序集合&#xff0c;这个数据集的名称叫做文件名。文件通常是驻留在外部介质&#xff08;如磁盘等&#xff09;上的&#xff0c;在使用时才调入内存中来&#xff0c;这就是为什么对文件操作时需要打开和关闭的原因。 根据数据的存储方式&a…

【数据仓库】

数据仓库&#xff1a;概念、架构与应用 目录 什么是数据仓库数据仓库的特点数据仓库的架构 3.1 数据源层3.2 数据集成层&#xff08;ETL&#xff09;3.3 数据存储层3.4 数据展示与应用层 数据仓库的建模方法 4.1 星型模型4.2 雪花模型4.3 星座模型 数据仓库与数据库的区别数据…

java模拟进程调度

先来先服务优先级调度短作业优先调度响应比优先调度 代码 import java.util.ArrayList; import java.util.Comparator; import java.util.List; import java.util.Scanner;class Main {static class tasks{int id;//序号char jinchengname;//进程名int jinchengId;//double a…

银河麒麟v10 xrdp安装

为了解决科技被卡脖子的问题&#xff0c;国家正在大力推进软硬件系统的信创替代&#xff0c;对于一些平时对Linux操作系统不太熟练的用户来讲提出了更高的挑战和要求。本文以银河麒麟v10 24.03为例带领大家配置kylin v10的远程桌面。 最近公司为了配置信创开发新购了几台银河麒…

啤酒游戏—企业经营决策沙盘

感谢黄浦区文华学院的邀请&#xff0c;今年是为南房集团开展系统思考培训的第二年。我们现在为客户设计的一整年系统思考训练中&#xff0c;会将系统环路结构图与真实议题研讨作为前置内容&#xff0c;让大家在理解整体框架后&#xff0c;再体验麻省理工学院系统动力学著名的“…

PDF无法转换成其他格式的常见原因与解决方法解析

在处理PDF文件转换时&#xff0c;用户常常会遇到一些问题&#xff0c;导致无法将PDF转换为其他格式&#xff08;如Word、Excel、或图片等&#xff09;。以下是一些常见原因以及解决方法的解析。 ## 一、常见原因 ### 1. **PDF文件的安全性设置** 许多PDF文件在创建时可能设置…