js+css 实现midi文件在线可视化编辑试听调整保存代码-html代码-BFW代码库

js+css 实现midi文件在线可视化编辑试听调整保存代码

代码语言：html

所属分类：多媒体

代码描述：js+css 实现midi文件在线可视化编辑试听调整保存代码

下面为部分代码预览，完整代码请点击下载或在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>MIDI 微调试听可视化编辑器</title>
    <!-- Tailwind CSS 界面样式 -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <!-- Tone.js：音频合成与调度 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.js"></script>
    <!-- @tonejs/midi：解析上传的 MIDI -->
    <script src="https://unpkg.com/@tonejs/midi"></script>
    <!-- MidiWriterJS：生成/打包并导出 MIDI -->
    <script src="https://cdn.jsdelivr.net/npm/midi-writer-js@2.1.4/build/index.js"></script>
    <style>
        /* 自定义滚动条样式 */
        .custom-scrollbar::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #1e293b;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #475569;
            border-radius: 4px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #64748b;
        }
    </style>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col font-sans select-none">

    <!-- 顶部工具栏 -->
    <header class="bg-gray-900 border-b border-gray-800 px-6 py-3 flex flex-wrap items-center justify-between gap-4">
        <div class="flex items-center space-x-3">
            <span class="text-xl font-bold bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent">MIDI Piano Roll Editor</span>
            <span class="text-xs text-gray-500 border border-gray-700 px-2 py-0.5 rounded">微调与试听版</span>
        </div>
        
        <!-- 控制按钮组 -->
        <div class="flex items-center space-x-4">
            <!-- 播放/停止 -->
            <button id="btn-play" onclick="togglePlay()" class="px-4 py-1.5 bg-green-600 hover:bg-green-500 rounded text-sm font-medium transition flex items-center space-x-1">
                <span>▶ 播放</span>
            </button>
            <button id="btn-stop" onclick="stopPlayback()" class="px-4 py-1.5 bg-gray-700 hover:bg-gray-600 rounded text-sm font-medium transition">
                ■ 停止
            </button>

            <!-- 速度调节 -->
            <div class="flex items-center space-x-2 bg-gray-800 px-3 py-1.5 rounded border border-gray-700">
                <span class="text-xs text-gray-400">BPM</span>
                <input id="input-bpm" type="number" value="120" min="40" max=&qu.........完整代码请登录后点击上方下载按钮下载查看