js+css实现在线可视化谱曲五线谱导出pdf和midi文件代码-html代码-BFW代码库

js+css实现在线可视化谱曲五线谱导出pdf和midi文件代码

代码语言：html

所属分类：多媒体

代码描述：js+css实现在线可视化谱曲五线谱导出pdf和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>MuseCreator 在线乐谱作曲与编曲系统</title>
    
    <!-- 引入 Tailwind CSS 快速排版 -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- 引入 FontAwesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- 引入 ABCjs 核心脚本与音频样式 -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/abcjs-audio.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/abcjs-basic-min.js"></script>

    <style>
        /* 自定义暗色滚动条 */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #1e293b;
        }
        ::-webkit-scrollbar-thumb {
            background: #475569;
            border-radius: 3px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #10b981;
        }

        /* 隐藏空警告 */
        #warnings:empty {
            display: none !important;
        }

        /* 打印样式：实现专业的 PDF 乐谱排版导出 */
        @media print {
            body, html {
                background: white !important;
                color: black !important;
            }
            .print\:hidden {
                display: none !important;
            }
            main {
                display: block !important;
                padding: 0 !important;
                margin: 0 !important;
            }
            #paper-container {
                border: none !important;
                box-shadow: none !important;
                padding: 0 !important;
                width: 100% !important;
            }
            #paper {
                width: 100% !important;
                display: block !important;
            }
            /* 强制乐谱符号呈现黑色 */
            svg {
                background-color: white !important;
            }
            path, text, rect {
                fill: black !important;
                stroke: black !important;
            }
        }
    </style>
</head>
<body class="bg-slate-900 text-slate-100 min-h-screen flex flex-col font-sans">

    <!-- 头部导航栏 -->
    <header class="bg-slate-800 border-b border-slate-700 py-4 px-6 flex flex-col md:flex-row justify-between items-center gap-4 print:hidden">
        <div class="flex items-center gap-3">
            <div class="p-2.5 bg-emerald-600 rounded-lg text-white">
                <i class="fa-solid fa-music text-2xl animate-pulse"></i>
            </div>
            <div>
                <h1 class="text-xl font-bold tracking-wide">MuseCreator 在线作曲系统</h1>
                <p class="text-xs text-slate-400">可视化键盘输入 · 实时试听 · 专业PDF排版 · 导出标准MIDI</p>
            </div>
        </div>
        <div class="flex flex-wrap items-center gap-2">
            <button onclick="downloadMidi()" class="bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2 rounded-lg text-sm font-semibold shadow-md flex items-center gap-1.5 transition-all">
                <i class="fa-solid fa-download"></i> 导出 MIDI
            </button>
            <button onclick="exportPdf()" class="bg-emerald-600 hover:bg-emerald-500 text-white px-4 py-2 rounded-lg text-sm font-semibold shadow-md flex items-center gap-1.5 transition-all">
                <i class="fa-solid fa-file-pdf"></i> 导出 PDF 乐谱
            </button>
            <button onclick="undo()" class="bg-slate-700 hover:bg-slate-600 text-slate-200 px-3 py-2 rounded-lg text-sm font-semibold flex items-center gap-1.5 transition-all">
                <i class="fa-solid fa-rotate-left"></i> 撤销
      .........完整代码请登录后点击上方下载按钮下载查看