js实现浏览器中对声音变声调节处理示例代码-html代码-BFW代码库

js实现浏览器中对声音变声调节处理示例代码

代码语言：html

所属分类：多媒体

代码描述：js实现浏览器中对声音变声调节处理示例代码，实时调节参数实现变声变调、扭曲、回音、环境音、收音机效果等。

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

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
	
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<style>
	    :root {
	--bg-color: #0f172a;
	--card-bg: #1e293b;
	--accent-color: #38bdf8;
	--accent-vocal: #a855f7;
	--text-main: #f8fafc;
	--text-muted: #94a3b8;
	--category-bg: #111827;
}

body {
	margin: 0;
	padding: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background-color: var(--bg-color);
	font-family:
		system-ui,
		-apple-system,
		sans-serif;
	color: var(--text-main);
}

.rack-container {
	background-color: var(--card-bg);
	padding: 2rem;
	border-radius: 1.5rem;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
	width: 100%;
	max-width: 550px;
}

h2 {
	margin: 0 0 0.25rem 0;
	text-align: center;
	font-weight: 600;
}
.subtitle {
	color: var(--text-muted);
	font-size: 0.9rem;
	text-align: center;
	margin-bottom: 1.5rem;
}

audio {
	width: 100%;
	margin-bottom: 1.5rem;
}

.category-section {
	background-color: var(--category-bg);
	border-radius: 1rem;
	padding: 0.5rem;
	margin-bottom: 1.25rem;
	border: 1px solid #334155;
}

.category-title {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-muted);
	margin: 0.25rem 0.5rem 0.5rem 0.5rem;
	font-weight: 700;
}

.fx-card {
	background: rgba(255, 255, 255, 0.02);
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	margin-bottom: 0.5rem;
	border-left: 4px solid #475569;
	transition: all 0.25s ease;
}
.fx-card:last-child {
	margin-bottom: 0;
}
.fx-card.active {
	border-left-color: var(--accent-color);
	background: rgba(56, 189, 248, 0.03);
}
.fx-card.vocal-fx.active {
	border-left-color: var(--accent-vocal);
	background: rgba(168, 85, 247, 0.03);
}

.fx-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
}
.fx-title-block {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.fx-title {
	font-weight: 500;
	font-size: 1rem;
}
.vocal-badge {
	font-size: 0.7rem;
	background: #6b21a8;
	padding: 1px 6px;
	border-radius: 20px;
	color: #f3e8ff;
}

.controls-body {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition:
		max-height 0.25s ease-out,
		margin-top 0.25s ease,
		opacity 0.25s ease;
	pointer-events: none;
}
.fx-card.expanded .controls-body {
	max-height: 150px;
	margin-top: 0.75rem;
	opacity: 1;
	pointer-events: auto;
}

.control-row {
	margin-bottom: 0.75rem;
}
.control-row:last-child {
	margin-bottom: 0;
}
.labe.........完整代码请登录后点击上方下载按钮下载查看