react+tone实现一个概率刻槽机效果代码-html代码-BFW代码库

react+tone实现一个概率刻槽机效果代码

代码语言：html

所属分类：其他

代码描述：react+tone实现一个概率刻槽机效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        @import url("https://fonts.googleapis.com/css2?family=Righteous&display=swap");
        
        :root {
        	--dark: #001021ff;
        	--light: #e7e7e7ff;
        	--main-light: #f9c784ff;
        	--main: #fc7a1eff;
        	--secondary: #f24c00ff;
        }
        
        body {
        	width: 100%;
        	font-family: "Righteous", cursive;
        	background-color: var(--dark);
        	color: var(--light);54
        }
        .container {
        	background-color: var(--main);
        	max-width: 950px;
        	border-radius: 10px;
        	padding: 20px;
        	box-shadow: 0 0 10px black, inset 2px 2px 2px var(--main-light),
        		inset -2px -2px 2px var(--dark);
        	margin: 20px auto;
        }
        
        .app-header {
        	display: flex;
        	justify-content: space-between;
        }
        
        .sound-channel-container {
        	background-color: var(--secondary);
        	display: flex;
        	flex-direction: column;
        	border-radius: 10px;
        	padding: 10px;
        	margin-top: 20px;
        }
        
        .sound-channel-header {
        	display: flex;
        	justify-content: space-between;
        }
        
        .measure-pattern-container {
        	width: 100%;
        	display: flex;
        	justify-content: space-around;
        	flex-wrap: wrap;
        }
        
        .volume-container {
        	display: flex;
        }
        
        .led {
        	position: absolute;
        	width: 6px;
        	height: 6px;
        	border-radius: 50%;
        	background-color: darkred;
        	box-shadow: 0 0 3px black;
        }
        
        .led-active {
        	background-color: orange;
        	box-shadow: 0 0 6px 2px red;
        }
        
        .hit-container {
        	display: flex;
        	width: 40px;
        	height: 40px;
        	border-radius: 9px;
        	padding: 3px;
        	margin: 3px;
        	color: var(--dark);
        	background-color: var(--main);
        }
        
        .hit-value {
        	color: var(--dark);
        	font-size: 12px;
        	line-height: 40px;
        	width: 50px;
        	text-align: center;
        }
        
        .hit-container input {
        	writing-mode: bt-lr; /* IE */
        	-webkit-appearance: slider-vertical; /* WebKit */
        	width: 4px;
        	height: 40px;
        	padding: 0 5px;
        }
        
        .triggered {
        	background-color: var(--main-light);
        	box-shadow: 0 0 10px var(--main-light);
        }
        
        .beat-pattern-container {
        	display: flex;
        	margin: 3px;
        }
        
        .measure-pattern-container {
        	display: flex;
        }
        
        button {
        	background-color: var(--secondary);
        	width: 150px;
        	color: inherit;
        	border: none;
        	border-radius: 10px;
        	padding: 10px;
        	font: inherit;
        	font-size: 30px;
        	cursor: pointer;
        	outline: inherit;
        	box-shadow: inset 1px 1px 2px var(--main-light),
        		inset -1px -1px 2px var(--dark);
        }
        
        button:active {
        	box-shadow: inset 1px 1px 2px var(--dark),
        		inset -1px -1px 2px var(--main-light);
        }
    </style>



</head>

<body>
    <div id="root">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.min.js"></script>
        <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.17.1.js"></script>
        <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.17.1.js"></script>
        <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Tone.js"></script>
        <script type="text/babel">
          const { useState, useEffect } = React;

const demoKickPattern = [
	1,
	0.01,
	0.3,
	0.01,
	0.95,
	0.01,
	0.3,
	0.01,
	0.95,
	0.01,
	0.3,
	0.01,
	0.95,
	0.01,
	0.3,
	0.01
];
const demoBassPattern = [
	0.3,
	0.1,
	0.5,
	0.1,
	0.3,
	0.1,
	0.5,
	0.1,
	0.3,
	0.1,
	0.5,
	0.1,
	0.3,
	0.1,
	0.5,
	0.1
];
const demoMelodyPattern = [
	0.6,
	0.3,
	0.6,
	0.3,
	0.6,
	0.3,
	0.6,
	0.3,
	0.6,
	0.3,
	0.6,
	0.3,
	0.6,
	0.3,
	0.6,
	0.3
];

const bassNotes = ["C2", "D#2", "G2", "C3"];
const melodyNotes = ["C3", "G3", "C4", "D#4", "F4", "F#4", "G4", "A#4", "C5"];

const Volume = ({ value = 36, setValue = () => {} }) => {
	const onSliderChang.........完整代码请登录后点击上方下载按钮下载查看