js实现浏览器端在线录音并导出下载wav音频文件代码-html代码-BFW代码库

js实现浏览器端在线录音并导出下载wav音频文件代码

代码语言：html

所属分类：多媒体

代码描述：js实现浏览器端在线录音并导出下载wav音频文件代码，录音的时候有声音波形动画跟随麦克风音量跳动。

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线录音 - 导出WAV文件</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        danger: '#EF4444',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .audio-visualizer {
                height: 120px;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 3px;
            }
            .visualizer-bar {
                background-color: theme('colors.primary');
                width: 4px;
                border-radius: 2px;
                transition: height 0.1s ease;
            }
            .btn-pulse {
                animation: pulse 1.5s infinite;
            }
            @keyframes pulse {
                0% {
                    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
                }
                70% {
                    box-shadow: 0 0 0 15px rgba(59, 130, 246, 0);
                }
                100% {
                    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
                }
            }
        }
    </style>
</head>
<body class="font-inter bg-gradient-to-br from-light to-gray-100 min-h-screen flex flex-col">
    <!-- 顶部导航 -->
    <header class="bg-white shadow-md py-4 px-6 md:px-12">
        <div class="container mx-auto flex justify-between items-center">
            <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark flex items-center gap-2">
                <i class="fa fa-microphone text-primary"></i>
                <span>声音记录者</span>
            </h1>
            <div class="text-gray-500 text-sm hidden md:block">
                简单高效的在线录音工具
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="flex-grow container mx-auto px-4 py-8 md:py-16 max-w-4xl">
        <div class="bg-w.........完整代码请登录后点击上方下载按钮下载查看