wavesurfer实现可配置参数的音频声音可视化波浪线代码-html代码-BFW代码库

wavesurfer实现可配置参数的音频声音可视化波浪线代码

代码语言：html

所属分类：其他

代码描述：wavesurfer实现可配置参数的音频声音可视化波浪线代码，可调节参数做自己的特色音频线。

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
@layer reset, base, challenge;

@layer challenge {
	.wrapper {
		width: min(100%, 80ch);
		margin-inline: auto;
		display: grid;
		gap: 1.5em;
	}
	
	[id=placeholder] {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
	}

	.toast:popover-open {
		padding: 1.5em;
		border-radius: var(--br-default);
		width: min(100%, 60ch);
		margin: auto;

		&::backdrop {
			background-color: oklch(0 0 0 / 0.6);
		}

		& [btn-close] {
			position: absolute;
			right: 0.5em;
			top: 0.5em;
			transition: color var(--default-trans-dur);

			&:is(:hover, :focus-visible) {
				color: var(--clr-accent-secondary);
			}
		}

		& h2 {
			color: var(--clr-accent-secondary);
			text-align: center;
			text-transform: uppercase;
		}

		& > p {
			margin-block-start: 0.8em;

			& a {
				text-decoration: underline;
				text-decoration-width: 1px;
				text-underline-offset: 1px;
				transition: color var(--default-trans-dur);
			}

			& a:is(:hover, :focus-visible) {
				color: var(--clr-accent-secondary);
			}
		}

		/*     

      & ::-webkit-file-upload-button {
        transition: color var(--default-trans-dur);
        border: none;
        box-shadow: 0 0 0 1px;
        border-radius: inherit;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
     
        margin-inline-end: 0.5em;
      }

      & ::-webkit-file-upload-button:active {
        color: var(--clr-accent-secondary);
      } */
	}

	.btn-container {
		display: flex;
		gap: 0.5em;
		justify-content: center;
	}

	:is(.btn-primary) {
		color: var(--clr-accent-secondary);
		border: 1px solid;
		border-radius: var(--br-default);
		display: grid;
		grid-auto-flow: column;
		gap: 0.25em;
		padding: 0.5em;

		& span {
			text-transform: capitalize;
		}
		
		& svg {
			pointer-events: none;
		}
	}

	.form-wave_options {
		display: grid;
		gap: 1em;
		grid-template-areas:
			"waveColor progressColor cursorColor"
			"url url url"
			"cursorWidth cursorWidth cursorWidth"
			"barWidth barWidth barWidth"
			"barHeight barHeight barHeight"
			"barGap barGap barGap"
			"barRadius barRadius barRadius"
			"height height height"
			"audioRate audioRate audioRate"
			"sampleRate sampleRate sampleRate"
			;
		
		& > label {
			display: grid;
			gap: 0.5em;
		}
	}

	label:has(> input[type="range"]) {
		--_c: var(--clr-accent-secondary); /* active range/thumb color */
		--_bg: var(--clr-neutral-200); /* slider track color */
		--track-height: 10px;
		--thumb-size: 1em;
		--thumb-offset: -3px;
		--thumb-highlight-size: 2px;

		& input[type="range"] {
			appearance: none;
			-webkit-appearance: none;
			width: 100%;
			height: var(--track-height);
			background: linear-gradient(
				to right,
				var(--_c) 0
					calc(
						(
							var(--value, 0) - var(--min, 0)
						) / (
							var(--max, 100) - var(--min, 0)
						) *	100%
					),
				var(--_bg) 0
			);
			border-radius: 100vw;
			border: 0;
		}

		& input[type="range"]::-webkit-slider-runnable-track {
			appearance: none;
			-webkit-appearance: none;
		}

		& input[type="range"]::-webkit-slider-thumb {
			appearance: none;
			width: var(--thumb-size);
			aspect-ratio: 1;
			background-color: var(--_c);
			border-radius: 50%;
			box-shadow: 0 0 0 var(--thumb-highlight-size) var(--_bg);
			margin-inline-start: var(--thumb-offset);
			position: relative;
		}
	}

	input[type="text&qu.........完整代码请登录后点击上方下载按钮下载查看