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 cursor.........完整代码请登录后点击上方下载按钮下载查看