\u5b89\u5353\u7aef\u97f3\u8d28\u4e0e\u542c\u611f\u6df1\u5ea6\u89e3\u6790<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <script src=\"https:\/\/cdn.plot.ly\/plotly-2.27.0.min.js\"><\/script>\n \n <style>\n \/* Chart Container Styling Requirements *\/\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 800px; \/* Constrain width on large screens *\/\n margin-left: auto;\n margin-right: auto;\n height: 350px; \/* Base height *\/\n max-height: 400px;\n background-color: #ffffff;\n border-radius: 0.5rem;\n padding: 1rem;\n box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);\n }\n\n @media (min-width: 768px) {\n .chart-container {\n height: 400px;\n }\n }\n\n \/* Custom Scrollbar for internal overflow elements *\/\n .custom-scroll::-webkit-scrollbar {\n width: 6px;\n }\n .custom-scroll::-webkit-scrollbar-track {\n background: #f1f1f1;\n }\n .custom-scroll::-webkit-scrollbar-thumb {\n background: #d6d3d1;\n border-radius: 3px;\n }\n .custom-scroll::-webkit-scrollbar-thumb:hover {\n background: #a8a29e;\n }\n \n body {\n font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n }\n\n \/* Loading Spinner *\/\n .loader {\n border: 3px solid #f3f3f3;\n border-radius: 50%;\n border-top: 3px solid #4f46e5;\n width: 24px;\n height: 24px;\n -webkit-animation: spin 1s linear infinite; \/* Safari *\/\n animation: spin 1s linear infinite;\n }\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n \n \/* Markdown-like simple rendering for AI response *\/\n .ai-content ul { list-style-type: disc; margin-left: 1.5rem; margin-bottom: 0.5rem; }\n .ai-content li { margin-bottom: 0.25rem; }\n .ai-content strong { color: #4338ca; font-weight: 600; }\n <\/style>\n \n \n \n \n<\/head>\n<body class=\"bg-stone-50 text-stone-800\">\n\n \n <nav class=\"bg-white\/90 backdrop-blur-md border-b border-stone-200 sticky top-0 z-50\">\n <div class=\"max-w-6xl mx-auto px-4\">\n <div class=\"flex justify-between items-center h-16\">\n <span class=\"text-xl font-bold tracking-tight text-stone-900\">Audio<span class=\"text-indigo-600\">Lab<\/span> Analysis<\/span>\n <div class=\"hidden md:flex space-x-8 text-sm font-medium text-stone-600\">\n <button onclick=\"scrollToSection('simulator')\" class=\"hover:text-indigo-600 transition-colors\">\u542c\u611f\u6a21\u62df<\/button>\n <button onclick=\"scrollToSection('source')\" class=\"hover:text-indigo-600 transition-colors\">\u97f3\u6e90\u89e3\u6790<\/button>\n <button onclick=\"scrollToSection('gear')\" class=\"hover:text-indigo-600 transition-colors\">\u8033\u673a\u6027\u80fd<\/button>\n <button onclick=\"scrollToSection('system')\" class=\"hover:text-indigo-600 transition-colors\">\u7cfb\u7edf\u74f6\u9888<\/button>\n <button onclick=\"scrollToSection('ai-clinic')\" class=\"flex items-center text-indigo-600 hover:text-indigo-800 transition-colors font-bold\">\n <span>\u2728 AI \u8bca\u65ad<\/span>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/nav>\n\n \n <header class=\"max-w-4xl mx-auto px-4 py-12 text-center\">\n <h1 class=\"text-3xl md:text-5xl font-bold text-stone-900 mb-6\">\u5b89\u5353\u7aef\u542c\u611f\u6df1\u5ea6\u89e3\u6790<\/h1>\n <p class=\"text-lg text-stone-600 leading-relaxed max-w-2xl mx-auto\">\n \u5728\u79fb\u52a8\u97f3\u9891\u9886\u57df\uff0c”\u97f3\u8d28”\u5f80\u5f80\u88ab\u7384\u5b66\u5316\u3002\u672c\u62a5\u544a\u57fa\u4e8e\u6570\u636e\u5206\u6790\u4e0e\u58f0\u5b66\u539f\u7406\uff0c\u89e3\u6784**\u97f3\u6e90\u6587\u4ef6\uff08Bitrate\uff09**\u3001**\u8033\u673a\u7d20\u8d28**\u4ee5\u53ca**\u5b89\u5353\u97f3\u9891\u67b6\u6784**\u4e09\u8005\u5982\u4f55\u5171\u540c\u51b3\u5b9a\u6700\u7ec8\u7684\u542c\u611f\u4f53\u9a8c\u3002\n <\/p>\n <\/header>\n\n <main class=\"max-w-6xl mx-auto px-4 pb-20 space-y-24\">\n\n \n <section id=\"simulator\" class=\"scroll-mt-20\">\n <div class=\"bg-white rounded-2xl shadow-sm border border-stone-100 p-6 md:p-8\">\n <div class=\"mb-6\">\n <h2 class=\"text-2xl font-bold text-stone-800 mb-2\">\u542c\u611f\u6784\u6210\u6a21\u62df\u5668<\/h2>\n <p class=\"text-stone-600\">\n \u542c\u611f\u5e76\u975e\u5355\u70b9\u51b3\u5b9a\uff0c\u800c\u662f\u201c\u6728\u6876\u6548\u5e94\u201d\u3002\u8c03\u6574\u4e0b\u65b9\u6ed1\u5757\uff0c\u89c2\u5bdf\u5728\u5b89\u5353\u73af\u5883\u4e0b\uff0c\u5404\u8981\u7d20\u5bf9\u6700\u7ec8\u201c\u5b9e\u9645\u542c\u611f\u5f97\u5206\u201d\u7684\u8fb9\u9645\u8d21\u732e\u3002\u6b64\u6a21\u578b\u57fa\u4e8e\u58f0\u5b66\u5fc3\u7406\u5b66\u6743\u91cd\u6784\u5efa\u3002\n <\/p>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-12 items-center\">\n \n <div class=\"space-y-8\">\n <div>\n <div class=\"flex justify-between mb-2\">\n <label class=\"font-semibold text-stone-700\">\u97f3\u6e90\u8d28\u91cf (Source)<\/label>\n <span id=\"val-source\" class=\"text-indigo-600 font-mono\">320k MP3<\/span>\n <\/div>\n <input type=\"range\" id=\"input-source\" min=\"1\" max=\"100\" value=\"60\" class=\"w-full h-2 bg-stone-200 rounded-lg appearance-none cursor-pointer accent-indigo-600\">\n <p class=\"text-xs text-stone-500 mt-1\">\u4ece 128kbps \u5230 24bit\/96kHz Hi-Res<\/p>\n <\/div>\n \n <div>\n <div class=\"flex justify-between mb-2\">\n <label class=\"font-semibold text-stone-700\">\u8033\u673a\u7d20\u8d28 (Gear)<\/label>\n <span id=\"val-gear\" class=\"text-indigo-600 font-mono\">\u5165\u95e8\u7ea7 (\u00a5200)<\/span>\n <\/div>\n <input type=\"range\" id=\"input-gear\" min=\"1\" max=\"100\" value=\"30\" class=\"w-full h-2 bg-stone-200 rounded-lg appearance-none cursor-pointer accent-indigo-600\">\n <p class=\"text-xs text-stone-500 mt-1\">\u4ece\u767e\u5143\u8033\u673a\u5230\u65d7\u8230\u52a8\u5708\/\u52a8\u94c1<\/p>\n <\/div>\n\n <div>\n <div class=\"flex justify-between mb-2\">\n <label class=\"font-semibold text-stone-700\">\u4f20\u8f93\/\u89e3\u7801 (DAC\/Codec)<\/label>\n <span id=\"val-dac\" class=\"text-indigo-600 font-mono\">\u6807\u51c6 SBC\/AAC<\/span>\n <\/div>\n <input type=\"range\" id=\"input-dac\" min=\"1\" max=\"100\" value=\"40\" class=\"w-full h-2 bg-stone-200 rounded-lg appearance-none cursor-pointer accent-indigo-600\">\n <p class=\"text-xs text-stone-500 mt-1\">\u4ece\u84dd\u7259SBC\u5230\u72ec\u7acbUSB DAC<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-stone-50 rounded-xl p-6 flex flex-col items-center justify-center text-center relative overflow-hidden\">\n <div class=\"z-10\">\n <h3 class=\"text-stone-500 font-medium uppercase tracking-wider text-sm mb-2\">\u9884\u4f30\u542c\u611f\u8bc4\u5206<\/h3>\n <div class=\"text-6xl font-bold text-stone-900 mb-2\" id=\"score-display\">0<\/div>\n <div class=\"text-sm font-medium px-3 py-1 rounded-full bg-stone-200 text-stone-700 inline-block\" id=\"score-label\">\u8ba1\u7b97\u4e2d…<\/div>\n <\/div>\n <div class=\"mt-6 text-left w-full text-sm text-stone-500 space-y-2\">\n <div class=\"flex justify-between border-b border-stone-200 pb-1\">\n <span>\u89e3\u6790\u529b\u74f6\u9888:<\/span>\n <span id=\"bottleneck-display\" class=\"font-semibold text-red-500\">\u5206\u6790\u4e2d<\/span>\n <\/div>\n <div class=\"flex justify-between\">\n <span>\u63d0\u5347\u5efa\u8bae:<\/span>\n <span id=\"recommendation-display\" class=\"font-semibold text-indigo-600\">\u5206\u6790\u4e2d<\/span>\n <\/div>\n <\/div>\n \n <div class=\"absolute -right-10 -bottom-10 w-32 h-32 bg-indigo-100 rounded-full blur-3xl opacity-50\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"source\" class=\"scroll-mt-20\">\n <div class=\"mb-6 max-w-3xl\">\n <h2 class=\"text-2xl font-bold text-stone-800 mb-3\">\u4e00\u3001\u97f3\u6e90\uff1a\u8fb9\u9645\u6548\u5e94\u7684\u4e34\u754c\u70b9<\/h2>\n <p class=\"text-stone-600 leading-relaxed\">\n \u8bb8\u591a\u7528\u6237\u8ffd\u6c42\u201c\u65e0\u635f\u201d\u97f3\u8d28\uff0c\u4f46\u5728\u79fb\u52a8\u542c\u97f3\u73af\u5883\u4e0b\uff0c\u9ad8\u7801\u7387\u5e26\u6765\u7684\u63d0\u5347\u5e76\u975e\u7ebf\u6027\u7684\u3002\u4e0b\u56fe\u5c55\u793a\u4e86\u4e0d\u540c\u7801\u7387\uff08Bitrate\uff09\u4e0e\u4eba\u8033\u611f\u77e5\u5230\u7684\u201c\u4fdd\u771f\u5ea6\u201d\u4e4b\u95f4\u7684\u5173\u7cfb\u3002\u53ef\u4ee5\u770b\u5230\uff0c\u5728320kbps\u4e4b\u540e\uff0c\u66f2\u7ebf\u8d8b\u4e8e\u5e73\u7f13\uff0c\u8fd9\u610f\u5473\u7740\u6587\u4ef6\u4f53\u79ef\u6210\u500d\u589e\u52a0\uff0c\u4f46\u542c\u611f\u63d0\u5347\u5374\u975e\u5e38\u5fae\u5f31\u3002\n <\/p>\n <\/div>\n\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n <div class=\"lg:col-span-2\">\n <div class=\"chart-container\">\n <canvas id=\"bitrateChart\"><\/canvas>\n <\/div>\n <\/div>\n <div class=\"bg-white p-6 rounded-lg border border-stone-200 shadow-sm flex flex-col justify-center\">\n <h3 class=\"font-bold text-stone-800 mb-4\">\u5173\u952e\u53d1\u73b0<\/h3>\n <ul class=\"space-y-4\">\n <li class=\"flex items-start\">\n <span class=\"inline-flex items-center justify-center w-6 h-6 rounded-full bg-indigo-100 text-indigo-600 text-xs font-bold mr-3 mt-0.5\">1<\/span>\n <span class=\"text-sm text-stone-600\"><strong>128kbps:<\/strong> \u9ad8\u9891\u4fe1\u606f\u88ab\u5927\u5e45\u201c\u5207\u9664\u201d\uff0c\u4e3b\u8981\u572816kHz\u4ee5\u4e0a\uff0c\u542c\u611f\u53d1\u95f7\uff0c\u91d1\u5c5e\u4e50\u5668\u5931\u771f\u3002<\/span>\n <\/li>\n <li class=\"flex items-start\">\n <span class=\"inline-flex items-center justify-center w-6 h-6 rounded-full bg-indigo-100 text-indigo-600 text-xs font-bold mr-3 mt-0.5\">2<\/span>\n <span class=\"text-sm text-stone-600\"><strong>320kbps (MP3\/AAC):<\/strong> \u6240\u8c13\u7684\u201c\u9ec4\u91d1\u542c\u611f\u70b9\u201d\u3002\u4fdd\u7559\u4e86\u5927\u90e8\u5206\u4eba\u8033\u654f\u611f\u9891\u6bb5\uff0c\u5373\u4fbf\u5728\u9ad8\u7aef\u8bbe\u5907\u4e0a\uff0c\u4e0e\u65e0\u635f\u7684\u533a\u522b\u4e5f\u6781\u5176\u7ec6\u5fae\u3002<\/span>\n <\/li>\n <li class=\"flex items-start\">\n <span class=\"inline-flex items-center justify-center w-6 h-6 rounded-full bg-indigo-100 text-indigo-600 text-xs font-bold mr-3 mt-0.5\">3<\/span>\n <span class=\"text-sm text-stone-600\"><strong>Hi-Res \/ Lossless:<\/strong> \u4e3b\u8981\u662f\u52a8\u6001\u8303\u56f4\u548c\u6781\u9ad8\u9891\u7684\u5ef6\u4f38\u3002\u4f46\u5728\u5608\u6742\u7684\u901a\u52e4\u73af\u5883\u4e2d\uff0c\u8fd9\u79cd\u4f18\u52bf\u51e0\u4e4e\u5b8c\u5168\u88ab\u73af\u5883\u566a\u97f3\u63a9\u76d6\u3002<\/span>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"gear\" class=\"scroll-mt-20\">\n <div class=\"mb-6 max-w-3xl\">\n <h2 class=\"text-2xl font-bold text-stone-800 mb-3\">\u4e8c\u3001\u8033\u673a\uff1a\u51b3\u5b9a\u97f3\u8272\u7684\u753b\u7b14<\/h2>\n <p class=\"text-stone-600 leading-relaxed\">\n \u76f8\u6bd4\u4e8e\u97f3\u6e90\uff0c\u8033\u673a\u7684\u7269\u7406\u7d20\u8d28\uff08\u9891\u54cd\u66f2\u7ebf\u3001\u77ac\u6001\u54cd\u5e94\u3001\u603b\u8c10\u6ce2\u5931\u771f\uff09\u5bf9\u542c\u611f\u7684\u5f71\u54cd\u662f\u51b3\u5b9a\u6027\u7684\u3002\u4e0b\u56fe\u5bf9\u6bd4\u4e86\u5178\u578b\u5165\u95e8\u7ea7\u8033\u673a\uff08\u4e3b\u8981\u63d0\u5347\u4f4e\u9891\u91cf\u611f\u4ee5\u63a9\u76d6\u7d20\u8d28\u4e0d\u8db3\uff09\u4e0e\u9ad8\u4fdd\u771f\u8033\u673a\uff08\u8ffd\u6c42\u4e09\u9891\u5747\u8861\u8fd8\u539f\uff09\u7684\u9891\u54cd\u5dee\u5f02\u3002\n <\/p>\n <\/div>\n\n <div class=\"bg-white p-4 rounded-xl shadow-sm border border-stone-200\">\n \n <div class=\"flex justify-end mb-2 space-x-2\">\n <button onclick=\"updatePlot('budget')\" class=\"px-3 py-1 text-xs font-medium bg-stone-100 hover:bg-stone-200 rounded text-stone-700 transition\">\u663e\u793a\u5165\u95e8\u7ea7\u66f2\u7ebf<\/button>\n <button onclick=\"updatePlot('hifi')\" class=\"px-3 py-1 text-xs font-medium bg-stone-100 hover:bg-stone-200 rounded text-stone-700 transition\">\u663e\u793aHi-Fi\u66f2\u7ebf<\/button>\n <button onclick=\"updatePlot('compare')\" class=\"px-3 py-1 text-xs font-medium bg-indigo-50 text-indigo-700 rounded transition border border-indigo-200\">\u5bf9\u6bd4\u6a21\u5f0f<\/button>\n <\/div>\n <div class=\"chart-container\">\n <div id=\"freqPlot\" style=\"width:100%; height:100%;\"><\/div>\n <\/div>\n <div class=\"mt-4 grid grid-cols-1 md:grid-cols-2 gap-4 text-sm\">\n <div class=\"p-3 bg-red-50 rounded border border-red-100\">\n <strong class=\"text-red-800 block mb-1\">\ud83d\udd34 \u5165\u95e8\u7ea7\u7279\u5f81 (V\u578b\u8c03\u97f3)<\/strong>\n <p class=\"text-red-700 opacity-80\">\u4f4e\u9891\u5927\u5e45\u9686\u8d77(\u8f70\u5934)\uff0c\u4e2d\u9891\u51f9\u9677(\u4eba\u58f0\u8fdc)\uff0c\u9ad8\u9891\u6eda\u964d\u65e9(\u89e3\u6790\u5dee)\u3002\u9002\u5408\u52a8\u6b21\u6253\u6b21\uff0c\u4e0d\u9002\u5408\u53e4\u5178\/\u4eba\u58f0\u3002<\/p>\n <\/div>\n <div class=\"p-3 bg-blue-50 rounded border border-blue-100\">\n <strong class=\"text-blue-800 block mb-1\">\ud83d\udd35 Hi-Fi\u7279\u5f81 (\u54c8\u66fc\/\u5747\u8861)<\/strong>\n <p class=\"text-blue-700 opacity-80\">\u5e73\u6ed1\u7684\u66f2\u7ebf\uff0c\u5ef6\u4f38\u81f320kHz\u4ee5\u4e0a\u3002\u4f4e\u9891\u8d28\u611f\u597d\u4f46\u4e0d\u63a9\u76d6\u4e2d\u9891\uff0c\u80fd\u542c\u5230\u66f4\u591a\u4e50\u5668\u5206\u79bb\u5ea6\u548c\u5fae\u5c0f\u7ec6\u8282\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"system\" class=\"scroll-mt-20\">\n <div class=\"mb-6 max-w-3xl\">\n <h2 class=\"text-2xl font-bold text-stone-800 mb-3\">\u4e09\u3001\u5b89\u5353\u97f3\u9891\u67b6\u6784\uff1a\u9690\u5f62\u7684\u6740\u624b<\/h2>\n <p class=\"text-stone-600 leading-relaxed\">\n \u5728\u5b89\u5353\u624b\u673a\u4e0a\uff0c\u5373\u4f7f\u4f60\u6709\u6700\u597d\u7684\u65e0\u635f\u6587\u4ef6\u548c\u6700\u8d35\u7684\u8033\u673a\uff0c\u97f3\u8d28\u4ecd\u53ef\u80fd\u5728\u4f20\u8f93\u8fc7\u7a0b\u4e2d\u53d7\u635f\u3002\u6700\u5178\u578b\u7684\u95ee\u9898\u662f **SRC (\u91c7\u6837\u7387\u8f6c\u6362)** \u548c **\u84dd\u7259\u7f16\u7801**\u3002\u70b9\u51fb\u4e0b\u65b9\u7684\u8282\u70b9\uff0c\u67e5\u770b\u4fe1\u53f7\u5728\u54ea\u4e2a\u73af\u8282\u53d1\u751f\u4e86\u52a3\u53d8\u3002\n <\/p>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n \n <div class=\"space-y-3\">\n <div onclick=\"showSystemDetail('app')\" class=\"cursor-pointer group p-4 border border-stone-200 rounded-lg hover:border-indigo-400 hover:shadow-md transition bg-white flex items-center justify-between\">\n <div class=\"flex items-center\">\n <span class=\"w-8 h-8 rounded bg-stone-100 text-stone-500 flex items-center justify-center mr-3 group-hover:bg-indigo-100 group-hover:text-indigo-600 font-bold\">1<\/span>\n <span class=\"font-medium text-stone-700\">\u97f3\u4e50 App (\u64ad\u653e\u5c42)<\/span>\n <\/div>\n <span class=\"text-xs text-stone-400\">44.1kHz \/ 96kHz<\/span>\n <\/div>\n\n <div class=\"h-6 w-0.5 bg-stone-300 mx-auto md:ml-8\"><\/div>\n\n <div onclick=\"showSystemDetail('mixer')\" class=\"cursor-pointer group p-4 border border-stone-200 rounded-lg hover:border-indigo-400 hover:shadow-md transition bg-white flex items-center justify-between\">\n <div class=\"flex items-center\">\n <span class=\"w-8 h-8 rounded bg-stone-100 text-stone-500 flex items-center justify-center mr-3 group-hover:bg-indigo-100 group-hover:text-indigo-600 font-bold\">2<\/span>\n <span class=\"font-medium text-stone-700\">Android Mixer (\u7cfb\u7edf\u5c42)<\/span>\n <\/div>\n <span class=\"text-xs text-red-500 font-bold\">SRC \u98ce\u9669!<\/span>\n <\/div>\n\n <div class=\"h-6 w-0.5 bg-stone-300 mx-auto md:ml-8\"><\/div>\n\n <div onclick=\"showSystemDetail('bt')\" class=\"cursor-pointer group p-4 border border-stone-200 rounded-lg hover:border-indigo-400 hover:shadow-md transition bg-white flex items-center justify-between\">\n <div class=\"flex items-center\">\n <span class=\"w-8 h-8 rounded bg-stone-100 text-stone-500 flex items-center justify-center mr-3 group-hover:bg-indigo-100 group-hover:text-indigo-600 font-bold\">3<\/span>\n <span class=\"font-medium text-stone-700\">\u84dd\u7259\u7f16\u7801 (\u4f20\u8f93\u5c42)<\/span>\n <\/div>\n <span class=\"text-xs text-stone-400\">AAC \/ LDAC \/ AptX<\/span>\n <\/div>\n\n <div class=\"h-6 w-0.5 bg-stone-300 mx-auto md:ml-8\"><\/div>\n\n <div onclick=\"showSystemDetail('dac')\" class=\"cursor-pointer group p-4 border border-stone-200 rounded-lg hover:border-indigo-400 hover:shadow-md transition bg-white flex items-center justify-between\">\n <div class=\"flex items-center\">\n <span class=\"w-8 h-8 rounded bg-stone-100 text-stone-500 flex items-center justify-center mr-3 group-hover:bg-indigo-100 group-hover:text-indigo-600 font-bold\">4<\/span>\n <span class=\"font-medium text-stone-700\">DAC\/Amp (\u786c\u4ef6\u5c42)<\/span>\n <\/div>\n <span class=\"text-xs text-stone-400\">\u6a21\u62df\u4fe1\u53f7\u8f6c\u6362<\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-stone-800 text-white rounded-xl p-6 flex flex-col justify-center min-h-[300px]\">\n <h3 id=\"sys-title\" class=\"text-xl font-bold text-indigo-400 mb-4\">\u70b9\u51fb\u5de6\u4fa7\u8282\u70b9\u67e5\u770b\u8be6\u60c5<\/h3>\n <p id=\"sys-desc\" class=\"text-stone-300 leading-relaxed\">\n \u4e86\u89e3\u5b89\u5353\u97f3\u9891\u6d41\u7684\u5de5\u4f5c\u539f\u7406\u662f\u63d0\u5347\u97f3\u8d28\u7684\u7b2c\u4e00\u6b65\u3002\u6bcf\u4e00\u4e2a\u73af\u8282\u90fd\u53ef\u80fd\u6210\u4e3a\u74f6\u9888\u3002\n <\/p>\n <div id=\"sys-metric\" class=\"mt-6 pt-6 border-t border-stone-700 grid grid-cols-2 gap-4 hidden\">\n <div>\n <span class=\"block text-xs text-stone-500 uppercase\">\u4e3b\u8981\u95ee\u9898<\/span>\n <span id=\"metric-problem\" class=\"font-medium text-red-400\">–<\/span>\n <\/div>\n <div>\n <span class=\"block text-xs text-stone-500 uppercase\">\u89e3\u51b3\u65b9\u6848<\/span>\n <span id=\"metric-solution\" class=\"font-medium text-green-400\">–<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"ai-clinic\" class=\"scroll-mt-20\">\n <div class=\"bg-gradient-to-br from-indigo-50 to-white rounded-2xl shadow-lg border border-indigo-100 p-6 md:p-10 relative overflow-hidden\">\n <div class=\"absolute top-0 right-0 -mt-10 -mr-10 w-40 h-40 bg-indigo-200 rounded-full blur-3xl opacity-30\"><\/div>\n \n <div class=\"mb-8 relative z-10\">\n <div class=\"flex items-center space-x-2 mb-2\">\n <span class=\"text-2xl\">\u2728<\/span>\n <h2 class=\"text-2xl font-bold text-indigo-900\">AI \u542c\u611f\u8bca\u65ad\u5ba4<\/h2>\n <\/div>\n <p class=\"text-indigo-800\/80\">\n \u4e0d\u786e\u5b9a\u81ea\u5df1\u7684\u8bbe\u5907\u74f6\u9888\u5728\u54ea\u91cc\uff1f\u8f93\u5165\u60a8\u7684\u8bbe\u5907\u4fe1\u606f\uff0c\u8ba9 Gemini AI \u5145\u5f53\u60a8\u7684\u79c1\u4eba\u97f3\u9891\u987e\u95ee\uff0c\u5206\u6790\u60a8\u7684\u97f3\u9891\u94fe\u8def\u77ed\u677f\u5e76\u63a8\u8350\u4e13\u5c5e\u8bd5\u97f3\u66f2\u76ee\u3002\n <\/p>\n <\/div>\n\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8 relative z-10\">\n \n <div class=\"space-y-4\">\n <div>\n <label class=\"block text-sm font-medium text-indigo-900 mb-1\">\u624b\u673a\u578b\u53f7 (Phone)<\/label>\n <input type=\"text\" id=\"ai-phone\" placeholder=\"\u4f8b\u5982: \u5c0f\u7c73 13, \u4e09\u661f S23, Pixel 7...\" class=\"w-full px-4 py-2 rounded-lg border border-indigo-200 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white\/80\">\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-indigo-900 mb-1\">\u8033\u673a\u578b\u53f7 (Headphones)<\/label>\n <input type=\"text\" id=\"ai-headphones\" placeholder=\"\u4f8b\u5982: \u7d22\u5c3c XM5, \u539f\u9053\u9171, AirPods Pro 2...\" class=\"w-full px-4 py-2 rounded-lg border border-indigo-200 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white\/80\">\n <\/div>\n <div class=\"grid grid-cols-2 gap-4\">\n <div>\n <label class=\"block text-sm font-medium text-indigo-900 mb-1\">\u97f3\u4e50 App<\/label>\n <select id=\"ai-app\" class=\"w-full px-4 py-2 rounded-lg border border-indigo-200 focus:ring-2 focus:ring-indigo-500 bg-white\/80\">\n <option value=\"\u7f51\u6613\u4e91\/QQ\u97f3\u4e50\">\u7f51\u6613\u4e91\/QQ\u97f3\u4e50<\/option>\n <option value=\"Apple Music\">Apple Music<\/option>\n <option value=\"Spotify\">Spotify<\/option>\n <option value=\"\u6d77\u8d1d\/Poweramp (\u672c\u5730)\">\u6d77\u8d1d\/Poweramp (\u672c\u5730)<\/option>\n <\/select>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-indigo-900 mb-1\">\u504f\u597d\u98ce\u683c<\/label>\n <select id=\"ai-style\" class=\"w-full px-4 py-2 rounded-lg border border-indigo-200 focus:ring-2 focus:ring-indigo-500 bg-white\/80\">\n <option value=\"\u6d41\u884c\u4eba\u58f0\">\u6d41\u884c\u4eba\u58f0<\/option>\n <option value=\"\u6447\u6eda\/\u91d1\u5c5e\">\u6447\u6eda\/\u91d1\u5c5e<\/option>\n <option value=\"\u53e4\u5178\/\u5927\u7f16\u5236\">\u53e4\u5178\/\u5927\u7f16\u5236<\/option>\n <option value=\"ACG\/\u7535\u5b50\">ACG\/\u7535\u5b50<\/option>\n <\/select>\n <\/div>\n <\/div>\n <button onclick=\"callGeminiDiagnosis()\" class=\"w-full py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-bold rounded-lg shadow-md transition-all flex justify-center items-center mt-4\">\n <span id=\"ai-btn-text\">\u2728 \u751f\u6210\u8bca\u65ad\u62a5\u544a<\/span>\n <div id=\"ai-loader\" class=\"loader ml-3 hidden\"><\/div>\n <\/button>\n <\/div>\n\n \n <div class=\"bg-white rounded-xl shadow-inner border border-stone-200 p-6 min-h-[300px] flex flex-col\">\n <h3 class=\"text-sm font-bold text-stone-400 uppercase tracking-wider mb-4 border-b pb-2\">AI \u8bca\u65ad\u7ed3\u679c<\/h3>\n <div id=\"ai-result\" class=\"flex-grow text-stone-600 text-sm leading-relaxed overflow-y-auto custom-scroll ai-content\">\n <div class=\"flex flex-col items-center justify-center h-full text-stone-400 space-y-2\">\n <span class=\"text-4xl opacity-20\">\ud83e\ude7a<\/span>\n <p>\u8bf7\u5728\u5de6\u4fa7\u586b\u5199\u4fe1\u606f\u5e76\u70b9\u51fb\u751f\u6210…<\/p>\n <\/div>\n <\/div>\n <div id=\"ai-error\" class=\"hidden mt-4 p-3 bg-red-50 text-red-600 text-xs rounded border border-red-100\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"scroll-mt-20\">\n <div class=\"mb-6 max-w-3xl\">\n <h2 class=\"text-2xl font-bold text-stone-800 mb-3\">\u56db\u3001\u76f2\u6d4b\u6570\u636e\uff1a\u6253\u7834\u5e7b\u89c9<\/h2>\n <p class=\"text-stone-600 leading-relaxed\">\n \u5728\u4e0d\u77e5\u9053\u6b63\u5728\u64ad\u653e\u4ec0\u4e48\u683c\u5f0f\u7684\u60c5\u51b5\u4e0b\uff0c\u7528\u6237\u771f\u7684\u80fd\u542c\u51fa\u533a\u522b\u5417\uff1f\u4ee5\u4e0b\u6570\u636e\u6c47\u603b\u4e86\u591a\u9879\u9488\u5bf9\u666e\u901a\u7528\u6237\u548c\u53d1\u70e7\u53cb\u7684\u76f2\u6d4b\uff08ABX\u6d4b\u8bd5\uff09\u3002\u7ed3\u679c\u663e\u793a\uff0c**\u8bbe\u5907\u7684\u5f71\u54cd\u529b\u8fdc\u5927\u4e8e\u6587\u4ef6\u683c\u5f0f**\u3002\n <\/p>\n <\/div>\n \n <div class=\"bg-white p-6 rounded-xl border border-stone-200 shadow-sm\">\n <div class=\"chart-container\">\n <canvas id=\"blindTestChart\"><\/canvas>\n <\/div>\n <div class=\"mt-4 text-center text-sm text-stone-500\">\n <p>\u6570\u636e\u89e3\u8bfb\uff1a\u5728\u4f4e\u7aef\u8bbe\u5907\u4e0a\uff0c\u51e0\u4e4e\u65e0\u4eba\u80fd\u5206\u8fa8320k\u4e0e\u65e0\u635f\u3002\u5373\u4f7f\u5728\u9ad8\u7aef\u8bbe\u5907\u4e0a\uff0c\u5206\u8fa8\u6210\u529f\u7387\u4e5f\u4ec5\u670965%\u5de6\u53f3\u3002<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <footer class=\"bg-stone-900 text-stone-300 rounded-2xl p-8 md:p-12 text-center space-y-6\">\n <h2 class=\"text-2xl font-bold text-white\">\u603b\u7ed3\uff1a\u94b1\u8be5\u82b1\u5728\u54ea\u91cc\uff1f<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6 text-left max-w-4xl mx-auto mt-8\">\n <div class=\"bg-stone-800 p-5 rounded-lg border-t-4 border-gray-500\">\n <h3 class=\"text-white font-bold text-lg mb-2\">\u666e\u901a\u7528\u6237<\/h3>\n <p class=\"text-sm text-stone-400\">\u6d41\u5a92\u4f53\u4f1a\u5458\u5f00\u5230”\u9ad8\u97f3\u8d28” (320k) \u5373\u53ef\u3002\u8d2d\u4e70\u4e00\u6b3e\u4f69\u6234\u8212\u9002\u3001\u652f\u6301AAC\/AptX\u7684\u4e3b\u6d41\u84dd\u7259\u8033\u673a\uff08\u00a5300-500\uff09\u3002\u65e0\u9700\u6298\u817e\u5c0f\u5c3e\u5df4\u3002<\/p>\n <\/div>\n <div class=\"bg-stone-800 p-5 rounded-lg border-t-4 border-indigo-500\">\n <h3 class=\"text-white font-bold text-lg mb-2\">\u8fdb\u9636\u542c\u53cb<\/h3>\n <p class=\"text-sm text-stone-400\">\u4f18\u5148\u5347\u7ea7\u8033\u673a\uff08\u00a51000+\uff09\u3002\u4f7f\u7528\u652f\u6301 LDAC \u7684\u5b89\u5353\u624b\u673a\u3002\u53ef\u4ee5\u5c1d\u8bd5 Apple Music \u6216 Qobuz \u7684\u65e0\u635f\u97f3\u6e90\u3002<\/p>\n <\/div>\n <div class=\"bg-stone-800 p-5 rounded-lg border-t-4 border-yellow-500\">\n <h3 class=\"text-white font-bold text-lg mb-2\">\u53d1\u70e7\u53cb<\/h3>\n <p class=\"text-sm text-stone-400\">\u5fc5\u9700\u4f7f\u7528 USB \u72ec\u5360\u6a21\u5f0f\u7ed5\u8fc7\u5b89\u5353SRC\u3002\u5916\u63a5\u89e3\u7801\u8033\u653e\uff08\u5c0f\u5c3e\u5df4\uff09\u3002\u4f7f\u7528\u9ad8\u7075\u654f\u5ea6\u6709\u7ebf\u8033\u673a\u3002\u97f3\u6e90\u5fc5\u987b\u662f FLAC\/DSD\u3002<\/p>\n <\/div>\n <\/div>\n <\/footer>\n\n <\/main>\n\n <script>\n \/\/ --- State & Data ---\n const state = {\n simulator: { source: 60, gear: 30, dac: 40 },\n currentPlotMode: 'compare'\n };\n\n const apiKey = \"\"; \/\/ Runtime provided\n\n \/\/ --- Simulator Logic ---\n function calculateScore() {\n const s = parseInt(document.getElementById('input-source').value);\n const g = parseInt(document.getElementById('input-gear').value);\n const d = parseInt(document.getElementById('input-dac').value);\n \n \/\/ Weights: Gear is most important (50%), then Source (30%), then DAC (20%)\n \/\/ However, Source has a bottleneck effect. If gear is great but source is trash, score tanks.\n \n let sourceScore = s;\n let gearScore = g;\n let dacScore = d;\n\n \/\/ Apply diminishing returns to source\n if (sourceScore > 80) sourceScore = 80 + (sourceScore - 80) * 0.2;\n\n \/\/ Bottleneck Logic: Quality cannot exceed the weakest link significantly\n let baseScore = (sourceScore * 0.3) + (gearScore * 0.5) + (dacScore * 0.2);\n \n \/\/ Penalty if Gear is much better than Source (Garbage In, Garbage Out)\n if (gearScore > sourceScore + 30) {\n baseScore -= 10;\n document.getElementById('bottleneck-display').innerText = \"\u97f3\u6e90\u8d28\u91cf\u62d6\u7d2f\u4e86\u9ad8\u7aef\u8033\u673a\";\n document.getElementById('recommendation-display').innerText = \"\u8bf7\u5347\u7ea7\u65e0\u635f\u97f3\u6e90\";\n } \n \/\/ Penalty if Source is much better than Gear (Waste)\n else if (sourceScore > gearScore + 40) {\n document.getElementById('bottleneck-display').innerText = \"\u8033\u673a\u65e0\u6cd5\u89e3\u6790\u9ad8\u7801\u7387\u7ec6\u8282\";\n document.getElementById('recommendation-display').innerText = \"\u5347\u7ea7\u8033\u673a\u63d0\u5347\u6700\u5927\";\n }\n \/\/ Penalty if DAC is low but Gear is high (Underpowered)\n else if (gearScore > 70 && dacScore < 40) {\n baseScore -= 15;\n document.getElementById('bottleneck-display').innerText = \"\u63a8\u529b\u4e0d\u8db3\/\u89e3\u7801\u592a\u5dee\";\n document.getElementById('recommendation-display').innerText = \"\u9700\u8981\u72ec\u7acbDAC\/\u5c0f\u5c3e\u5df4\";\n } else {\n document.getElementById('bottleneck-display').innerText = \"\u7cfb\u7edf\u76f8\u5bf9\u5e73\u8861\";\n document.getElementById('recommendation-display').innerText = \"\u6839\u636e\u9884\u7b97\u9010\u6b65\u5347\u7ea7\";\n }\n\n \/\/ Update UI Labels\n const sourceLabels = [\"128k MP3\", \"192k MP3\", \"320k MP3\", \"CD (16\/44)\", \"Hi-Res (24\/96)\"];\n const gearLabels = [\"\u8def\u8fb9\u644a\", \"\u767e\u5143\u7ea7\", \"\u4e3b\u6d41\u84dd\u7259\", \"\u4e2d\u7aef\u6709\u7ebf\", \"\u65d7\u8230Hi-Fi\"];\n const dacLabels = [\"\u666e\u901a\u84dd\u7259SBC\", \"AptX\/AAC\", \"LDAC\/AptX HD\", \"\u76f4\u63a8\/\u5c0f\u5c3e\u5df4\", \"\u4e13\u4e1a\u64ad\u653e\u5668\"];\n\n document.getElementById('val-source').innerText = sourceLabels[Math.min(4, Math.floor(s \/ 20))];\n document.getElementById('val-gear').innerText = gearLabels[Math.min(4, Math.floor(g \/ 20))];\n document.getElementById('val-dac').innerText = dacLabels[Math.min(4, Math.floor(d \/ 20))];\n\n \/\/ Animate Score\n const display = document.getElementById('score-display');\n const finalScore = Math.min(100, Math.round(baseScore));\n display.innerText = finalScore;\n \n \/\/ Color code score\n const label = document.getElementById('score-label');\n if(finalScore < 40) { label.innerText = \"\u542c\u4e2a\u54cd\"; label.className = \"text-sm font-medium px-3 py-1 rounded-full bg-stone-200 text-stone-600 inline-block\"; }\n else if(finalScore < 70) { label.innerText = \"\u5927\u4f17\u542c\u611f\"; label.className = \"text-sm font-medium px-3 py-1 rounded-full bg-blue-100 text-blue-800 inline-block\"; }\n else if(finalScore < 90) { label.innerText = \"\u9ad8\u4fdd\u771f\"; label.className = \"text-sm font-medium px-3 py-1 rounded-full bg-indigo-100 text-indigo-800 inline-block\"; }\n else { label.innerText = \"\u6781\u81f4\u53d1\u70e7\"; label.className = \"text-sm font-medium px-3 py-1 rounded-full bg-yellow-100 text-yellow-800 inline-block\"; }\n }\n\n \/\/ --- System Flow Logic ---\n const systemData = {\n 'app': {\n title: '1. \u97f3\u4e50 App',\n desc: '\u8fd9\u662f\u97f3\u9891\u6d41\u7684\u8d77\u70b9\u3002\u5927\u591a\u6570App\u9ed8\u8ba4\u5f00\u542f\u201c\u667a\u80fd\u97f3\u8d28\u201d\uff0c\u5728\u79fb\u52a8\u7f51\u7edc\u4e0b\u53ef\u80fd\u964d\u7ea7\u4e3a128kbps\u3002',\n problem: '\u97f3\u6e90\u6587\u4ef6\u88ab\u6709\u635f\u538b\u7f29',\n solution: '\u8bbe\u7f6e\u4e2d\u5f00\u542f\u201c\u65e0\u635f\/Hi-Res\u201d\u5e76\u4e0b\u8f7d\u5230\u672c\u5730'\n },\n 'mixer': {\n title: '2. Android Mixer (SRC)',\n desc: '\u5b89\u5353\u7cfb\u7edf\u7684\u201c\u5f3a\u5236\u91cd\u91c7\u6837\u201d\u95ee\u9898\u3002\u5982\u679c\u64ad\u653e44.1kHz\u97f3\u4e50\uff0c\u7cfb\u7edf\u53ef\u80fd\u4f1a\u5f3a\u5236\u8f6c\u6362\u4e3a48kHz\u8f93\u51fa\u3002\u8fd9\u79cd\u975e\u6574\u6570\u500d\u8f6c\u6362\u4f1a\u4ea7\u751f\u566a\u97f3\u548c\u5931\u771f\u3002',\n problem: 'SRC (Sample Rate Conversion) \u52a3\u5316\u97f3\u8d28',\n solution: '\u4f7f\u7528\u652f\u6301\u201cUSB\u72ec\u5360\u6a21\u5f0f\u201d\u7684App (\u5982\u6d77\u8d1d\u97f3\u4e50)'\n },\n 'bt': {\n title: '3. \u84dd\u7259\u7f16\u7801',\n desc: '\u65e0\u7ebf\u4f20\u8f93\u5fc5\u987b\u518d\u6b21\u538b\u7f29\u97f3\u9891\u3002SBC\u4e22\u5931\u7ec6\u8282\u4e25\u91cd\uff0cAAC\u7a0d\u597d\u3002LDAC\u662f\u76ee\u524d\u5b89\u5353\u7aef\u552f\u4e00\u80fd\u63a5\u8fd1\u65e0\u635f\u4f20\u8f93\u7684\u534f\u8bae\u3002',\n problem: '\u5e26\u5bbd\u4e0d\u8db3\u5bfc\u81f4\u7684\u9ad8\u9891\u622a\u6b62',\n solution: '\u786e\u4fdd\u624b\u673a\u548c\u8033\u673a\u90fd\u652f\u6301 LDAC \u6216 AptX Adaptive'\n },\n 'dac': {\n title: '4. DAC (\u6570\u6a21\u8f6c\u6362)',\n desc: '\u6570\u5b57\u4fe1\u53f7\u53d8\u4e3a\u6a21\u62df\u7535\u6d41\u3002\u624b\u673a\u81ea\u5e26\u7684\u89e3\u7801\u63a8\u529b\u5c0f\u3001\u5e95\u566a\u5927\u3002\u9ad8\u7aef\u8033\u673a\u5728\u8fd9\u91cc\u4f1a\u56e0\u4e3a\u201c\u63a8\u4e0d\u52a8\u201d\u800c\u663e\u5f97\u95f7\u7cca\u3002',\n problem: '\u63a8\u529b\u4e0d\u8db3\uff0c\u52a8\u6001\u8303\u56f4\u538b\u7f29',\n solution: '\u8d2d\u4e70\u5916\u63a5 USB-C\u89e3\u7801\u8033\u653e\u7ebf (\u5c0f\u5c3e\u5df4)'\n }\n };\n\n function showSystemDetail(key) {\n const data = systemData[key];\n const container = document.getElementById('sys-metric').parentNode;\n \n \/\/ Simple animation\n container.style.opacity = 0;\n setTimeout(() => {\n document.getElementById('sys-title').innerText = data.title;\n document.getElementById('sys-desc').innerText = data.desc;\n document.getElementById('metric-problem').innerText = data.problem;\n document.getElementById('metric-solution').innerText = data.solution;\n document.getElementById('sys-metric').classList.remove('hidden');\n container.style.opacity = 1;\n }, 200);\n }\n\n \/\/ --- Gemini AI Logic ---\n async function callGeminiDiagnosis() {\n const phone = document.getElementById('ai-phone').value;\n const headphones = document.getElementById('ai-headphones').value;\n const app = document.getElementById('ai-app').value;\n const style = document.getElementById('ai-style').value;\n \n const btn = document.getElementById('ai-btn-text');\n const loader = document.getElementById('ai-loader');\n const resultArea = document.getElementById('ai-result');\n const errorArea = document.getElementById('ai-error');\n\n if(!phone || !headphones) {\n alert('\u8bf7\u586b\u5199\u624b\u673a\u548c\u8033\u673a\u578b\u53f7');\n return;\n }\n\n \/\/ UI Loading State\n btn.innerText = \"\u8bca\u65ad\u5206\u6790\u4e2d...\";\n loader.classList.remove('hidden');\n resultArea.innerHTML = '<div class=\"flex flex-col items-center justify-center h-full text-indigo-400 space-y-2\"><div class=\"loader\"><\/div><p>\u6b63\u5728\u5206\u6790\u94fe\u8def\u74f6\u9888...<\/p><\/div>';\n errorArea.classList.add('hidden');\n\n const prompt = `\n Act as an expert audiophile and audio engineer. The user has the following setup:\n - Phone: ${phone}\n - Headphones: ${headphones}\n - Source App: ${app}\n - Preferred Genre: ${style}\n\n Please provide a structured diagnosis in Simplified Chinese (zh-CN) using HTML formatting (<b>, <ul>, <li>, <br>).\n Structure your response exactly like this:\n 1. <b>\u94fe\u8def\u74f6\u9888\u5206\u6790 (Chain Analysis):<\/b> Identify the weakest link (Bluetooth codec, DAC, Source file, or Headphone quality). Mention if the phone supports LDAC\/AptX based on general knowledge.\n 2. <b>\u542c\u611f\u9884\u4f30 (Expected Experience):<\/b> Briefly describe what they are likely hearing (e.g., \"Bass heavy but muddy\", \"Clean but lacking dynamics\").\n 3. <b>\u4e13\u5c5e\u8bd5\u97f3\u66f2\u63a8\u8350 (Test Tracks):<\/b> Suggest 3 specific songs that match their genre (${style}) and would test their specific gear's strengths or weaknesses. Format as a bullet list.\n 4. <b>\u5347\u7ea7\u5efa\u8bae (One-line Tip):<\/b> The single most cost-effective upgrade.\n\n Keep it concise, professional but friendly. Do not use markdown syntax like # or ##, use HTML tags.\n `;\n\n try {\n const response = await fetch(`https:\/\/generativelanguage.googleapis.com\/v1beta\/models\/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({\n contents: [{ parts: [{ text: prompt }] }]\n })\n });\n\n if (!response.ok) throw new Error('API call failed');\n \n const data = await response.json();\n const aiText = data.candidates[0].content.parts[0].text;\n \n \/\/ Simple parser to clean up markdown if Gemini adds it despite instructions\n let formattedText = aiText\n .replace(\/```html\/g, '')\n .replace(\/```\/g, '')\n .replace(\/\\*\\*(.*?)\\*\\*\/g, '<strong>$1<\/strong>'); \n\n resultArea.innerHTML = formattedText;\n\n } catch (error) {\n console.error(error);\n errorArea.innerText = \"\u8bca\u65ad\u5931\u8d25\uff0c\u8bf7\u7a0d\u540e\u91cd\u8bd5\u6216\u68c0\u67e5\u7f51\u7edc\u3002 (Error: \" + error.message + \")\";\n errorArea.classList.remove('hidden');\n resultArea.innerHTML = '<div class=\"flex flex-col items-center justify-center h-full text-stone-400\"><span class=\"text-4xl\">\u26a0\ufe0f<\/span><p>\u5206\u6790\u4e2d\u65ad<\/p><\/div>';\n } finally {\n btn.innerText = \"\u2728 \u91cd\u65b0\u751f\u6210\u62a5\u544a\";\n loader.classList.add('hidden');\n }\n }\n\n \/\/ --- Chart Initialization ---\n document.addEventListener('DOMContentLoaded', () => {\n \n \/\/ 1. Bitrate Chart (Chart.js)\n const ctxBitrate = document.getElementById('bitrateChart').getContext('2d');\n new Chart(ctxBitrate, {\n type: 'line',\n data: {\n labels: ['64k', '128k', '192k', '320k', 'CD(1411k)', 'Hi-Res'],\n datasets: [{\n label: '\u4eba\u8033\u611f\u77e5\u8fd8\u539f\u5ea6 (Perceived Fidelity)',\n data: [40, 75, 88, 95, 98, 99], \/\/ Diminishing returns\n borderColor: '#4f46e5', \/\/ Indigo-600\n backgroundColor: 'rgba(79, 70, 229, 0.1)',\n fill: true,\n tension: 0.4\n }, {\n label: '\u6587\u4ef6\u4f53\u79ef (\u76f8\u5bf9\u5927\u5c0f)',\n data: [5, 10, 15, 25, 100, 300], \/\/ Exponential growth\n borderColor: '#a8a29e', \/\/ Stone-400\n borderDash: [5, 5],\n yAxisID: 'y1',\n tension: 0.2\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n interaction: { mode: 'index', intersect: false },\n scales: {\n y: { title: { display: true, text: '\u542c\u611f\u8bc4\u5206 (0-100)' }, min: 0, max: 100 },\n y1: { position: 'right', title: { display: true, text: '\u6587\u4ef6\u4f53\u79ef\u7cfb\u6570' }, grid: { drawOnChartArea: false } }\n }\n }\n });\n\n \/\/ 2. Frequency Response (Plotly)\n initPlotly();\n\n \/\/ 3. Blind Test Chart (Chart.js)\n const ctxBlind = document.getElementById('blindTestChart').getContext('2d');\n new Chart(ctxBlind, {\n type: 'bar',\n data: {\n labels: ['\u4f4e\u7aef\u8033\u673a + \u5608\u6742\u73af\u5883', '\u4e3b\u6d41\u8033\u673a + \u5b89\u9759\u73af\u5883', '\u9ad8\u7aefHi-Fi + \u5b89\u9759\u73af\u5883'],\n datasets: [{\n label: '\u65e0\u6cd5\u5206\u8fa8',\n data: [95, 60, 35],\n backgroundColor: '#e7e5e4', \/\/ Stone-200\n }, {\n label: '\u80fd\u5206\u8fa8 320k vs \u65e0\u635f',\n data: [5, 40, 65],\n backgroundColor: '#4f46e5', \/\/ Indigo-600\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n x: { stacked: true },\n y: { stacked: true, max: 100, title: {display: true, text: '\u6d4b\u8bd5\u4eba\u7fa4\u5360\u6bd4 (%)'} }\n },\n plugins: {\n tooltip: {\n callbacks: {\n afterBody: function(context) {\n return \"\u7ed3\u8bba: \u73af\u5883\u548c\u8bbe\u5907\u6bd4\u97f3\u6e90\u683c\u5f0f\u66f4\u91cd\u8981\";\n }\n }\n }\n }\n }\n });\n\n \/\/ Initialize interactions\n ['input-source', 'input-gear', 'input-dac'].forEach(id => {\n document.getElementById(id).addEventListener('input', calculateScore);\n });\n calculateScore(); \/\/ Initial run\n });\n\n \/\/ --- Plotly Logic ---\n function initPlotly() {\n \/\/ Simulated Data\n const freqs = [20, 50, 100, 200, 500, 1000, 2000, 5000, 10000, 16000, 20000];\n \n \/\/ Budget: Boosted Bass, Recessed Mids, Rolled off highs\n const budgetData = {\n x: freqs,\n y: [5, 8, 6, 2, -2, -3, -1, 2, -5, -10, -15],\n mode: 'lines',\n name: '\u5165\u95e8\u8033\u673a (V\u578b\u8c03\u97f3)',\n line: { color: '#ef4444', width: 3 }\n };\n\n \/\/ Hi-Fi: Neutral, slight Harman curve\n const hifiData = {\n x: freqs,\n y: [2, 3, 1, 0, 0, 0, 1, 2, 1, 0, -2],\n mode: 'lines',\n name: 'Hi-Fi\u8033\u673a (\u5747\u8861\u8c03\u97f3)',\n line: { color: '#3b82f6', width: 3 }\n };\n\n const layout = {\n title: '\u9891\u54cd\u66f2\u7ebf\u5bf9\u6bd4 (Frequency Response)',\n xaxis: { type: 'log', title: '\u9891\u7387 (Hz) - \u5bf9\u6570\u5750\u6807', range: [1.3, 4.3] }, \/\/ log10(20) to log10(20000)\n yaxis: { title: '\u54cd\u5e94\u5e45\u5ea6 (dB)', range: [-20, 15] },\n margin: { t: 40, r: 20, l: 50, b: 50 },\n paper_bgcolor: 'rgba(0,0,0,0)',\n plot_bgcolor: 'rgba(0,0,0,0)',\n showlegend: true,\n legend: { x: 0.7, y: 1 }\n };\n \n \/\/ Save data for toggling\n window.plotData = { budget: budgetData, hifi: hifiData, layout: layout };\n \n Plotly.newPlot('freqPlot', [budgetData, hifiData], layout, {responsive: true, displayModeBar: false});\n }\n\n function updatePlot(mode) {\n const { budget, hifi, layout } = window.plotData;\n let data = [];\n if (mode === 'budget') data = [budget];\n else if (mode === 'hifi') data = [hifi];\n else data = [budget, hifi];\n \n Plotly.react('freqPlot', data, layout, {responsive: true, displayModeBar: false});\n }\n\n \/\/ --- Navigation Helper ---\n function scrollToSection(id) {\n const el = document.getElementById(id);\n if (el) el.scrollIntoView({ behavior: 'smooth' });\n }\n\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u5b89\u5353\u7aef\u97f3\u8d28\u4e0e\u542c\u611f\u6df1\u5ea6\u89e3\u6790 AudioLab Analysis \u542c\u611f\u6a21\u62df \u97f3\u6e90\u89e3\u6790 \u8033\u673a\u6027\u80fd \u7cfb\u7edf\u74f6\u9888 \u2728 AI \u8bca\u65ad \u5b89\u5353\u7aef\u542c\u611f\u6df1\u5ea6\u89e3\u6790 \u5728\u79fb\u52a8\u97f3\u9891\u9886\u57df\uff0c”\u97f3\u8d28”\u5f80\u5f80\u88ab\u7384\u5b66\u5316\u3002\u672c\u62a5\u544a\u57fa\u4e8e\u6570\u636e\u5206\u6790\u4e0e\u58f0\u5b66\u539f\u7406\uff0c\u89e3\u6784**\u97f3\u6e90\u6587\u4ef6\uff08Bitrate\uff09**\u3001**\u8033\u673a\u7d20\u8d28**\u4ee5\u53ca**\u5b89\u5353\u97f3\u9891\u67b6\u6784**\u4e09\u8005\u5982\u4f55\u5171\u540c\u51b3\u5b9a\u6700\u7ec8\u7684\u542c\u611f\u4f53\u9a8c\u3002 \u542c\u611f\u6784\u6210\u6a21\u62df\u5668 \u542c\u611f\u5e76\u975e\u5355\u70b9\u51b3\u5b9a\uff0c\u800c\u662f\u201c\u6728\u6876\u6548\u5e94\u201d\u3002\u8c03\u6574\u4e0b\u65b9\u6ed1\u5757\uff0c\u89c2\u5bdf\u5728\u5b89\u5353\u73af\u5883\u4e0b\uff0c\u5404\u8981\u7d20\u5bf9\u6700\u7ec8\u201c\u5b9e\u9645\u542c\u611f\u5f97\u5206\u201d\u7684\u8fb9\u9645\u8d21\u732e\u3002\u6b64\u6a21\u578b\u57fa\u4e8e\u58f0\u5b66\u5fc3\u7406\u5b66\u6743\u91cd\u6784\u5efa\u3002 \u97f3\u6e90\u8d28\u91cf (Source) 320k MP3 \u4ece 128kbps \u5230 24bit\/96kHz Hi-Res \u8033\u673a\u7d20\u8d28 (Gear) \u5165\u95e8\u7ea7 (\u00a5200) \u4ece\u767e\u5143\u8033\u673a\u5230\u65d7\u8230\u52a8\u5708\/\u52a8\u94c1 \u4f20\u8f93\/\u89e3\u7801 (DAC\/Codec) \u6807\u51c6 SBC\/AAC \u4ece\u84dd\u7259SBC\u5230\u72ec\u7acbUSB DAC \u9884\u4f30\u542c\u611f\u8bc4\u5206 0 \u8ba1\u7b97\u4e2d… \u89e3\u6790\u529b\u74f6\u9888: \u5206\u6790\u4e2d \u63d0\u5347\u5efa\u8bae: \u5206\u6790\u4e2d \u4e00\u3001\u97f3\u6e90\uff1a\u8fb9\u9645\u6548\u5e94\u7684\u4e34\u754c\u70b9 \u8bb8\u591a\u7528\u6237\u8ffd\u6c42\u201c\u65e0\u635f\u201d\u97f3\u8d28\uff0c\u4f46\u5728\u79fb\u52a8\u542c\u97f3\u73af\u5883\u4e0b\uff0c\u9ad8\u7801\u7387\u5e26\u6765\u7684\u63d0\u5347\u5e76\u975e\u7ebf\u6027\u7684\u3002\u4e0b\u56fe\u5c55\u793a\u4e86\u4e0d\u540c\u7801\u7387\uff08Bitrate\uff09\u4e0e\u4eba\u8033\u611f\u77e5\u5230\u7684\u201c\u4fdd\u771f\u5ea6\u201d\u4e4b\u95f4\u7684\u5173\u7cfb\u3002\u53ef\u4ee5\u770b\u5230\uff0c\u5728320kbps\u4e4b\u540e\uff0c\u66f2\u7ebf\u8d8b\u4e8e\u5e73\u7f13\uff0c\u8fd9\u610f\u5473\u7740\u6587\u4ef6\u4f53\u79ef\u6210\u500d\u589e\u52a0\uff0c\u4f46\u542c\u611f\u63d0\u5347\u5374\u975e\u5e38\u5fae\u5f31\u3002 \u5173\u952e\u53d1\u73b0 1 128kbps: \u9ad8\u9891\u4fe1\u606f\u88ab\u5927\u5e45\u201c\u5207\u9664\u201d\uff0c\u4e3b\u8981\u572816kHz\u4ee5\u4e0a\uff0c\u542c\u611f\u53d1\u95f7\uff0c\u91d1\u5c5e\u4e50\u5668\u5931\u771f\u3002 2 320kbps (MP3\/AAC): \u6240\u8c13\u7684\u201c\u9ec4\u91d1\u542c\u611f\u70b9\u201d\u3002\u4fdd\u7559\u4e86\u5927\u90e8\u5206\u4eba\u8033\u654f\u611f\u9891\u6bb5\uff0c\u5373\u4fbf\u5728\u9ad8\u7aef\u8bbe\u5907\u4e0a\uff0c\u4e0e\u65e0\u635f\u7684\u533a\u522b\u4e5f\u6781\u5176\u7ec6\u5fae\u3002 3 Hi-Res \/ Lossless: \u4e3b\u8981\u662f\u52a8\u6001\u8303\u56f4\u548c\u6781\u9ad8\u9891\u7684\u5ef6\u4f38\u3002\u4f46\u5728\u5608\u6742\u7684\u901a\u52e4\u73af\u5883\u4e2d\uff0c\u8fd9\u79cd\u4f18\u52bf\u51e0\u4e4e\u5b8c\u5168\u88ab\u73af\u5883\u566a\u97f3\u63a9\u76d6\u3002 \u4e8c\u3001\u8033\u673a\uff1a\u51b3\u5b9a\u97f3\u8272\u7684\u753b\u7b14 \u76f8\u6bd4\u4e8e\u97f3\u6e90\uff0c\u8033\u673a\u7684\u7269\u7406\u7d20\u8d28\uff08\u9891\u54cd\u66f2\u7ebf\u3001\u77ac\u6001\u54cd\u5e94\u3001\u603b\u8c10\u6ce2\u5931\u771f\uff09\u5bf9\u542c\u611f\u7684\u5f71\u54cd\u662f\u51b3\u5b9a\u6027\u7684\u3002\u4e0b\u56fe\u5bf9\u6bd4\u4e86\u5178\u578b\u5165\u95e8\u7ea7\u8033\u673a\uff08\u4e3b\u8981\u63d0\u5347\u4f4e\u9891\u91cf\u611f\u4ee5\u63a9\u76d6\u7d20\u8d28\u4e0d\u8db3\uff09\u4e0e\u9ad8\u4fdd\u771f\u8033\u673a\uff08\u8ffd\u6c42\u4e09\u9891\u5747\u8861\u8fd8\u539f\uff09\u7684\u9891\u54cd\u5dee\u5f02\u3002 \u663e\u793a\u5165\u95e8\u7ea7\u66f2\u7ebf \u663e\u793aHi-Fi\u66f2\u7ebf \u5bf9\u6bd4\u6a21\u5f0f \ud83d\udd34 \u5165\u95e8\u7ea7\u7279\u5f81 (V\u578b\u8c03\u97f3) \u4f4e\u9891\u5927\u5e45\u9686\u8d77(\u8f70\u5934)\uff0c\u4e2d\u9891\u51f9\u9677(\u4eba\u58f0\u8fdc)\uff0c\u9ad8\u9891\u6eda\u964d\u65e9(\u89e3\u6790\u5dee)\u3002\u9002\u5408\u52a8\u6b21\u6253\u6b21\uff0c\u4e0d\u9002\u5408\u53e4\u5178\/\u4eba\u58f0\u3002 \ud83d\udd35 Hi-Fi\u7279\u5f81 (\u54c8\u66fc\/\u5747\u8861) \u5e73\u6ed1\u7684\u66f2\u7ebf\uff0c\u5ef6\u4f38\u81f320kHz\u4ee5\u4e0a\u3002\u4f4e\u9891\u8d28\u611f\u597d\u4f46\u4e0d\u63a9\u76d6\u4e2d\u9891\uff0c\u80fd\u542c\u5230\u66f4\u591a\u4e50\u5668\u5206\u79bb\u5ea6\u548c\u5fae\u5c0f\u7ec6\u8282\u3002 \u4e09\u3001\u5b89\u5353\u97f3\u9891\u67b6\u6784\uff1a\u9690\u5f62\u7684\u6740\u624b \u5728\u5b89\u5353\u624b\u673a\u4e0a\uff0c\u5373\u4f7f\u4f60\u6709\u6700\u597d\u7684\u65e0\u635f\u6587\u4ef6\u548c\u6700\u8d35\u7684\u8033\u673a\uff0c\u97f3\u8d28\u4ecd\u53ef\u80fd\u5728\u4f20\u8f93\u8fc7\u7a0b\u4e2d\u53d7\u635f\u3002\u6700\u5178\u578b\u7684\u95ee\u9898\u662f **SRC (\u91c7\u6837\u7387\u8f6c\u6362)** \u548c **\u84dd\u7259\u7f16\u7801**\u3002\u70b9\u51fb\u4e0b\u65b9\u7684\u8282\u70b9\uff0c\u67e5\u770b\u4fe1\u53f7\u5728\u54ea\u4e2a\u73af\u8282\u53d1\u751f\u4e86\u52a3\u53d8\u3002 1 \u97f3\u4e50 App (\u64ad\u653e\u5c42) 44.1kHz \/ 96kHz 2 Android Mixer (\u7cfb\u7edf\u5c42) SRC \u98ce\u9669! 3 \u84dd\u7259\u7f16\u7801 (\u4f20\u8f93\u5c42) AAC \/ LDAC \/ AptX 4 DAC\/Amp (\u786c\u4ef6\u5c42) \u6a21\u62df\u4fe1\u53f7\u8f6c\u6362 \u70b9\u51fb\u5de6\u4fa7\u8282\u70b9\u67e5\u770b\u8be6\u60c5 \u4e86\u89e3\u5b89\u5353\u97f3\u9891\u6d41\u7684\u5de5\u4f5c\u539f\u7406\u662f\u63d0\u5347\u97f3\u8d28\u7684\u7b2c\u4e00\u6b65\u3002\u6bcf\u4e00\u4e2a\u73af\u8282\u90fd\u53ef\u80fd\u6210\u4e3a\u74f6\u9888\u3002 \u4e3b\u8981\u95ee\u9898 – \u89e3\u51b3\u65b9\u6848 – \u2728 AI \u542c\u611f\u8bca\u65ad\u5ba4 \u4e0d\u786e\u5b9a\u81ea\u5df1\u7684\u8bbe\u5907\u74f6\u9888\u5728\u54ea\u91cc\uff1f\u8f93\u5165\u60a8\u7684\u8bbe\u5907\u4fe1\u606f\uff0c\u8ba9 Gemini AI \u5145\u5f53\u60a8\u7684\u79c1\u4eba\u97f3\u9891\u987e\u95ee\uff0c\u5206\u6790\u60a8\u7684\u97f3\u9891\u94fe\u8def\u77ed\u677f\u5e76\u63a8\u8350\u4e13\u5c5e\u8bd5\u97f3\u66f2\u76ee\u3002 \u624b\u673a\u578b\u53f7 (Phone) \u8033\u673a\u578b\u53f7 (Headphones) \u97f3\u4e50 App \u7f51\u6613\u4e91\/QQ\u97f3\u4e50Apple MusicSpotify\u6d77\u8d1d\/Poweramp (\u672c\u5730) \u504f\u597d\u98ce\u683c \u6d41\u884c\u4eba\u58f0\u6447\u6eda\/\u91d1\u5c5e\u53e4\u5178\/\u5927\u7f16\u5236ACG\/\u7535\u5b50 \u2728 \u751f\u6210\u8bca\u65ad\u62a5\u544a AI \u8bca\u65ad\u7ed3\u679c \ud83e\ude7a \u8bf7\u5728\u5de6\u4fa7\u586b\u5199\u4fe1\u606f\u5e76\u70b9\u51fb\u751f\u6210… \u56db\u3001\u76f2\u6d4b\u6570\u636e\uff1a\u6253\u7834\u5e7b\u89c9 \u5728\u4e0d\u77e5\u9053\u6b63\u5728\u64ad\u653e\u4ec0\u4e48\u683c\u5f0f\u7684\u60c5\u51b5\u4e0b\uff0c\u7528\u6237\u771f\u7684\u80fd\u542c\u51fa\u533a\u522b\u5417\uff1f\u4ee5\u4e0b\u6570\u636e\u6c47\u603b\u4e86\u591a\u9879\u9488\u5bf9\u666e\u901a\u7528\u6237\u548c\u53d1\u70e7\u53cb\u7684\u76f2\u6d4b\uff08ABX\u6d4b\u8bd5\uff09\u3002\u7ed3\u679c\u663e\u793a\uff0c**\u8bbe\u5907\u7684\u5f71\u54cd\u529b\u8fdc\u5927\u4e8e\u6587\u4ef6\u683c\u5f0f**\u3002 \u6570\u636e\u89e3\u8bfb\uff1a\u5728\u4f4e\u7aef\u8bbe\u5907\u4e0a\uff0c\u51e0\u4e4e\u65e0\u4eba\u80fd\u5206\u8fa8320k\u4e0e\u65e0\u635f\u3002\u5373\u4f7f\u5728\u9ad8\u7aef\u8bbe\u5907\u4e0a\uff0c\u5206\u8fa8\u6210\u529f\u7387\u4e5f\u4ec5\u670965%\u5de6\u53f3\u3002 \u603b\u7ed3\uff1a\u94b1\u8be5\u82b1\u5728\u54ea\u91cc\uff1f \u666e\u901a\u7528\u6237 \u6d41\u5a92\u4f53\u4f1a\u5458\u5f00\u5230”\u9ad8\u97f3\u8d28” (320k) \u5373\u53ef\u3002\u8d2d\u4e70\u4e00\u6b3e\u4f69\u6234\u8212\u9002\u3001\u652f\u6301AAC\/AptX\u7684\u4e3b\u6d41\u84dd\u7259\u8033\u673a\uff08\u00a5300-500\uff09\u3002\u65e0\u9700\u6298\u817e\u5c0f\u5c3e\u5df4\u3002 \u8fdb\u9636\u542c\u53cb \u4f18\u5148\u5347\u7ea7\u8033\u673a\uff08\u00a51000+\uff09\u3002\u4f7f\u7528\u652f\u6301 LDAC \u7684\u5b89\u5353\u624b\u673a\u3002\u53ef\u4ee5\u5c1d\u8bd5 Apple Music \u6216 Qobuz \u7684\u65e0\u635f\u97f3\u6e90\u3002 \u53d1\u70e7\u53cb \u5fc5\u9700\u4f7f\u7528 USB \u72ec\u5360\u6a21\u5f0f\u7ed5\u8fc7\u5b89\u5353SRC\u3002\u5916\u63a5\u89e3\u7801\u8033\u653e\uff08\u5c0f\u5c3e\u5df4\uff09\u3002\u4f7f\u7528\u9ad8\u7075\u654f\u5ea6\u6709\u7ebf\u8033\u673a\u3002\u97f3\u6e90\u5fc5\u987b\u662f FLAC\/DSD\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-579","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/trantor.ink\/index.php?rest_route=\/wp\/v2\/pages\/579","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/trantor.ink\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/trantor.ink\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/trantor.ink\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/trantor.ink\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=579"}],"version-history":[{"count":1,"href":"https:\/\/trantor.ink\/index.php?rest_route=\/wp\/v2\/pages\/579\/revisions"}],"predecessor-version":[{"id":580,"href":"https:\/\/trantor.ink\/index.php?rest_route=\/wp\/v2\/pages\/579\/revisions\/580"}],"wp:attachment":[{"href":"https:\/\/trantor.ink\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=579"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":579,"date":"2025-12-09T11:11:22","date_gmt":"2025-12-09T03:11:22","guid":{"rendered":"https:\/\/trantor.ink\/?page_id=579"},"modified":"2025-12-09T11:11:34","modified_gmt":"2025-12-09T03:11:34","slug":"%e5%ae%89%e5%8d%93%e7%ab%af%e5%90%ac%e6%84%9f%e6%b7%b1%e5%ba%a6%e8%a7%a3%e6%9e%90","status":"publish","type":"page","link":"https:\/\/trantor.ink\/?page_id=579","title":{"rendered":"\u5b89\u5353\u7aef\u542c\u611f\u6df1\u5ea6\u89e3\u6790"},"content":{"rendered":"\n\n\n\n \n \n \u5b89\u5353\u7aef\u97f3\u8d28\u4e0e\u542c\u611f\u6df1\u5ea6\u89e3\u6790<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <script src=\"https:\/\/cdn.plot.ly\/plotly-2.27.0.min.js\"><\/script>\n \n <style>\n \/* Chart Container Styling Requirements *\/\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 800px; \/* Constrain width on large screens *\/\n margin-left: auto;\n margin-right: auto;\n height: 350px; \/* Base height *\/\n max-height: 400px;\n background-color: #ffffff;\n border-radius: 0.5rem;\n padding: 1rem;\n box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);\n }\n\n @media (min-width: 768px) {\n .chart-container {\n height: 400px;\n }\n }\n\n \/* Custom Scrollbar for internal overflow elements *\/\n .custom-scroll::-webkit-scrollbar {\n width: 6px;\n }\n .custom-scroll::-webkit-scrollbar-track {\n background: #f1f1f1;\n }\n .custom-scroll::-webkit-scrollbar-thumb {\n background: #d6d3d1;\n border-radius: 3px;\n }\n .custom-scroll::-webkit-scrollbar-thumb:hover {\n background: #a8a29e;\n }\n \n body {\n font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n }\n\n \/* Loading Spinner *\/\n .loader {\n border: 3px solid #f3f3f3;\n border-radius: 50%;\n border-top: 3px solid #4f46e5;\n width: 24px;\n height: 24px;\n -webkit-animation: spin 1s linear infinite; \/* Safari *\/\n animation: spin 1s linear infinite;\n }\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n \n \/* Markdown-like simple rendering for AI response *\/\n .ai-content ul { list-style-type: disc; margin-left: 1.5rem; margin-bottom: 0.5rem; }\n .ai-content li { margin-bottom: 0.25rem; }\n .ai-content strong { color: #4338ca; font-weight: 600; }\n <\/style>\n \n \n \n \n<\/head>\n<body class=\"bg-stone-50 text-stone-800\">\n\n \n <nav class=\"bg-white\/90 backdrop-blur-md border-b border-stone-200 sticky top-0 z-50\">\n <div class=\"max-w-6xl mx-auto px-4\">\n <div class=\"flex justify-between items-center h-16\">\n <span class=\"text-xl font-bold tracking-tight text-stone-900\">Audio<span class=\"text-indigo-600\">Lab<\/span> Analysis<\/span>\n <div class=\"hidden md:flex space-x-8 text-sm font-medium text-stone-600\">\n <button onclick=\"scrollToSection('simulator')\" class=\"hover:text-indigo-600 transition-colors\">\u542c\u611f\u6a21\u62df<\/button>\n <button onclick=\"scrollToSection('source')\" class=\"hover:text-indigo-600 transition-colors\">\u97f3\u6e90\u89e3\u6790<\/button>\n <button onclick=\"scrollToSection('gear')\" class=\"hover:text-indigo-600 transition-colors\">\u8033\u673a\u6027\u80fd<\/button>\n <button onclick=\"scrollToSection('system')\" class=\"hover:text-indigo-600 transition-colors\">\u7cfb\u7edf\u74f6\u9888<\/button>\n <button onclick=\"scrollToSection('ai-clinic')\" class=\"flex items-center text-indigo-600 hover:text-indigo-800 transition-colors font-bold\">\n <span>\u2728 AI \u8bca\u65ad<\/span>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/nav>\n\n \n <header class=\"max-w-4xl mx-auto px-4 py-12 text-center\">\n <h1 class=\"text-3xl md:text-5xl font-bold text-stone-900 mb-6\">\u5b89\u5353\u7aef\u542c\u611f\u6df1\u5ea6\u89e3\u6790<\/h1>\n <p class=\"text-lg text-stone-600 leading-relaxed max-w-2xl mx-auto\">\n \u5728\u79fb\u52a8\u97f3\u9891\u9886\u57df\uff0c”\u97f3\u8d28”\u5f80\u5f80\u88ab\u7384\u5b66\u5316\u3002\u672c\u62a5\u544a\u57fa\u4e8e\u6570\u636e\u5206\u6790\u4e0e\u58f0\u5b66\u539f\u7406\uff0c\u89e3\u6784**\u97f3\u6e90\u6587\u4ef6\uff08Bitrate\uff09**\u3001**\u8033\u673a\u7d20\u8d28**\u4ee5\u53ca**\u5b89\u5353\u97f3\u9891\u67b6\u6784**\u4e09\u8005\u5982\u4f55\u5171\u540c\u51b3\u5b9a\u6700\u7ec8\u7684\u542c\u611f\u4f53\u9a8c\u3002\n <\/p>\n <\/header>\n\n <main class=\"max-w-6xl mx-auto px-4 pb-20 space-y-24\">\n\n \n <section id=\"simulator\" class=\"scroll-mt-20\">\n <div class=\"bg-white rounded-2xl shadow-sm border border-stone-100 p-6 md:p-8\">\n <div class=\"mb-6\">\n <h2 class=\"text-2xl font-bold text-stone-800 mb-2\">\u542c\u611f\u6784\u6210\u6a21\u62df\u5668<\/h2>\n <p class=\"text-stone-600\">\n \u542c\u611f\u5e76\u975e\u5355\u70b9\u51b3\u5b9a\uff0c\u800c\u662f\u201c\u6728\u6876\u6548\u5e94\u201d\u3002\u8c03\u6574\u4e0b\u65b9\u6ed1\u5757\uff0c\u89c2\u5bdf\u5728\u5b89\u5353\u73af\u5883\u4e0b\uff0c\u5404\u8981\u7d20\u5bf9\u6700\u7ec8\u201c\u5b9e\u9645\u542c\u611f\u5f97\u5206\u201d\u7684\u8fb9\u9645\u8d21\u732e\u3002\u6b64\u6a21\u578b\u57fa\u4e8e\u58f0\u5b66\u5fc3\u7406\u5b66\u6743\u91cd\u6784\u5efa\u3002\n <\/p>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-12 items-center\">\n \n <div class=\"space-y-8\">\n <div>\n <div class=\"flex justify-between mb-2\">\n <label class=\"font-semibold text-stone-700\">\u97f3\u6e90\u8d28\u91cf (Source)<\/label>\n <span id=\"val-source\" class=\"text-indigo-600 font-mono\">320k MP3<\/span>\n <\/div>\n <input type=\"range\" id=\"input-source\" min=\"1\" max=\"100\" value=\"60\" class=\"w-full h-2 bg-stone-200 rounded-lg appearance-none cursor-pointer accent-indigo-600\">\n <p class=\"text-xs text-stone-500 mt-1\">\u4ece 128kbps \u5230 24bit\/96kHz Hi-Res<\/p>\n <\/div>\n \n <div>\n <div class=\"flex justify-between mb-2\">\n <label class=\"font-semibold text-stone-700\">\u8033\u673a\u7d20\u8d28 (Gear)<\/label>\n <span id=\"val-gear\" class=\"text-indigo-600 font-mono\">\u5165\u95e8\u7ea7 (\u00a5200)<\/span>\n <\/div>\n <input type=\"range\" id=\"input-gear\" min=\"1\" max=\"100\" value=\"30\" class=\"w-full h-2 bg-stone-200 rounded-lg appearance-none cursor-pointer accent-indigo-600\">\n <p class=\"text-xs text-stone-500 mt-1\">\u4ece\u767e\u5143\u8033\u673a\u5230\u65d7\u8230\u52a8\u5708\/\u52a8\u94c1<\/p>\n <\/div>\n\n <div>\n <div class=\"flex justify-between mb-2\">\n <label class=\"font-semibold text-stone-700\">\u4f20\u8f93\/\u89e3\u7801 (DAC\/Codec)<\/label>\n <span id=\"val-dac\" class=\"text-indigo-600 font-mono\">\u6807\u51c6 SBC\/AAC<\/span>\n <\/div>\n <input type=\"range\" id=\"input-dac\" min=\"1\" max=\"100\" value=\"40\" class=\"w-full h-2 bg-stone-200 rounded-lg appearance-none cursor-pointer accent-indigo-600\">\n <p class=\"text-xs text-stone-500 mt-1\">\u4ece\u84dd\u7259SBC\u5230\u72ec\u7acbUSB DAC<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-stone-50 rounded-xl p-6 flex flex-col items-center justify-center text-center relative overflow-hidden\">\n <div class=\"z-10\">\n <h3 class=\"text-stone-500 font-medium uppercase tracking-wider text-sm mb-2\">\u9884\u4f30\u542c\u611f\u8bc4\u5206<\/h3>\n <div class=\"text-6xl font-bold text-stone-900 mb-2\" id=\"score-display\">0<\/div>\n <div class=\"text-sm font-medium px-3 py-1 rounded-full bg-stone-200 text-stone-700 inline-block\" id=\"score-label\">\u8ba1\u7b97\u4e2d…<\/div>\n <\/div>\n <div class=\"mt-6 text-left w-full text-sm text-stone-500 space-y-2\">\n <div class=\"flex justify-between border-b border-stone-200 pb-1\">\n <span>\u89e3\u6790\u529b\u74f6\u9888:<\/span>\n <span id=\"bottleneck-display\" class=\"font-semibold text-red-500\">\u5206\u6790\u4e2d<\/span>\n <\/div>\n <div class=\"flex justify-between\">\n <span>\u63d0\u5347\u5efa\u8bae:<\/span>\n <span id=\"recommendation-display\" class=\"font-semibold text-indigo-600\">\u5206\u6790\u4e2d<\/span>\n <\/div>\n <\/div>\n \n <div class=\"absolute -right-10 -bottom-10 w-32 h-32 bg-indigo-100 rounded-full blur-3xl opacity-50\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"source\" class=\"scroll-mt-20\">\n <div class=\"mb-6 max-w-3xl\">\n <h2 class=\"text-2xl font-bold text-stone-800 mb-3\">\u4e00\u3001\u97f3\u6e90\uff1a\u8fb9\u9645\u6548\u5e94\u7684\u4e34\u754c\u70b9<\/h2>\n <p class=\"text-stone-600 leading-relaxed\">\n \u8bb8\u591a\u7528\u6237\u8ffd\u6c42\u201c\u65e0\u635f\u201d\u97f3\u8d28\uff0c\u4f46\u5728\u79fb\u52a8\u542c\u97f3\u73af\u5883\u4e0b\uff0c\u9ad8\u7801\u7387\u5e26\u6765\u7684\u63d0\u5347\u5e76\u975e\u7ebf\u6027\u7684\u3002\u4e0b\u56fe\u5c55\u793a\u4e86\u4e0d\u540c\u7801\u7387\uff08Bitrate\uff09\u4e0e\u4eba\u8033\u611f\u77e5\u5230\u7684\u201c\u4fdd\u771f\u5ea6\u201d\u4e4b\u95f4\u7684\u5173\u7cfb\u3002\u53ef\u4ee5\u770b\u5230\uff0c\u5728320kbps\u4e4b\u540e\uff0c\u66f2\u7ebf\u8d8b\u4e8e\u5e73\u7f13\uff0c\u8fd9\u610f\u5473\u7740\u6587\u4ef6\u4f53\u79ef\u6210\u500d\u589e\u52a0\uff0c\u4f46\u542c\u611f\u63d0\u5347\u5374\u975e\u5e38\u5fae\u5f31\u3002\n <\/p>\n <\/div>\n\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n <div class=\"lg:col-span-2\">\n <div class=\"chart-container\">\n <canvas id=\"bitrateChart\"><\/canvas>\n <\/div>\n <\/div>\n <div class=\"bg-white p-6 rounded-lg border border-stone-200 shadow-sm flex flex-col justify-center\">\n <h3 class=\"font-bold text-stone-800 mb-4\">\u5173\u952e\u53d1\u73b0<\/h3>\n <ul class=\"space-y-4\">\n <li class=\"flex items-start\">\n <span class=\"inline-flex items-center justify-center w-6 h-6 rounded-full bg-indigo-100 text-indigo-600 text-xs font-bold mr-3 mt-0.5\">1<\/span>\n <span class=\"text-sm text-stone-600\"><strong>128kbps:<\/strong> \u9ad8\u9891\u4fe1\u606f\u88ab\u5927\u5e45\u201c\u5207\u9664\u201d\uff0c\u4e3b\u8981\u572816kHz\u4ee5\u4e0a\uff0c\u542c\u611f\u53d1\u95f7\uff0c\u91d1\u5c5e\u4e50\u5668\u5931\u771f\u3002<\/span>\n <\/li>\n <li class=\"flex items-start\">\n <span class=\"inline-flex items-center justify-center w-6 h-6 rounded-full bg-indigo-100 text-indigo-600 text-xs font-bold mr-3 mt-0.5\">2<\/span>\n <span class=\"text-sm text-stone-600\"><strong>320kbps (MP3\/AAC):<\/strong> \u6240\u8c13\u7684\u201c\u9ec4\u91d1\u542c\u611f\u70b9\u201d\u3002\u4fdd\u7559\u4e86\u5927\u90e8\u5206\u4eba\u8033\u654f\u611f\u9891\u6bb5\uff0c\u5373\u4fbf\u5728\u9ad8\u7aef\u8bbe\u5907\u4e0a\uff0c\u4e0e\u65e0\u635f\u7684\u533a\u522b\u4e5f\u6781\u5176\u7ec6\u5fae\u3002<\/span>\n <\/li>\n <li class=\"flex items-start\">\n <span class=\"inline-flex items-center justify-center w-6 h-6 rounded-full bg-indigo-100 text-indigo-600 text-xs font-bold mr-3 mt-0.5\">3<\/span>\n <span class=\"text-sm text-stone-600\"><strong>Hi-Res \/ Lossless:<\/strong> \u4e3b\u8981\u662f\u52a8\u6001\u8303\u56f4\u548c\u6781\u9ad8\u9891\u7684\u5ef6\u4f38\u3002\u4f46\u5728\u5608\u6742\u7684\u901a\u52e4\u73af\u5883\u4e2d\uff0c\u8fd9\u79cd\u4f18\u52bf\u51e0\u4e4e\u5b8c\u5168\u88ab\u73af\u5883\u566a\u97f3\u63a9\u76d6\u3002<\/span>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"gear\" class=\"scroll-mt-20\">\n <div class=\"mb-6 max-w-3xl\">\n <h2 class=\"text-2xl font-bold text-stone-800 mb-3\">\u4e8c\u3001\u8033\u673a\uff1a\u51b3\u5b9a\u97f3\u8272\u7684\u753b\u7b14<\/h2>\n <p class=\"text-stone-600 leading-relaxed\">\n \u76f8\u6bd4\u4e8e\u97f3\u6e90\uff0c\u8033\u673a\u7684\u7269\u7406\u7d20\u8d28\uff08\u9891\u54cd\u66f2\u7ebf\u3001\u77ac\u6001\u54cd\u5e94\u3001\u603b\u8c10\u6ce2\u5931\u771f\uff09\u5bf9\u542c\u611f\u7684\u5f71\u54cd\u662f\u51b3\u5b9a\u6027\u7684\u3002\u4e0b\u56fe\u5bf9\u6bd4\u4e86\u5178\u578b\u5165\u95e8\u7ea7\u8033\u673a\uff08\u4e3b\u8981\u63d0\u5347\u4f4e\u9891\u91cf\u611f\u4ee5\u63a9\u76d6\u7d20\u8d28\u4e0d\u8db3\uff09\u4e0e\u9ad8\u4fdd\u771f\u8033\u673a\uff08\u8ffd\u6c42\u4e09\u9891\u5747\u8861\u8fd8\u539f\uff09\u7684\u9891\u54cd\u5dee\u5f02\u3002\n <\/p>\n <\/div>\n\n <div class=\"bg-white p-4 rounded-xl shadow-sm border border-stone-200\">\n \n <div class=\"flex justify-end mb-2 space-x-2\">\n <button onclick=\"updatePlot('budget')\" class=\"px-3 py-1 text-xs font-medium bg-stone-100 hover:bg-stone-200 rounded text-stone-700 transition\">\u663e\u793a\u5165\u95e8\u7ea7\u66f2\u7ebf<\/button>\n <button onclick=\"updatePlot('hifi')\" class=\"px-3 py-1 text-xs font-medium bg-stone-100 hover:bg-stone-200 rounded text-stone-700 transition\">\u663e\u793aHi-Fi\u66f2\u7ebf<\/button>\n <button onclick=\"updatePlot('compare')\" class=\"px-3 py-1 text-xs font-medium bg-indigo-50 text-indigo-700 rounded transition border border-indigo-200\">\u5bf9\u6bd4\u6a21\u5f0f<\/button>\n <\/div>\n <div class=\"chart-container\">\n <div id=\"freqPlot\" style=\"width:100%; height:100%;\"><\/div>\n <\/div>\n <div class=\"mt-4 grid grid-cols-1 md:grid-cols-2 gap-4 text-sm\">\n <div class=\"p-3 bg-red-50 rounded border border-red-100\">\n <strong class=\"text-red-800 block mb-1\">\ud83d\udd34 \u5165\u95e8\u7ea7\u7279\u5f81 (V\u578b\u8c03\u97f3)<\/strong>\n <p class=\"text-red-700 opacity-80\">\u4f4e\u9891\u5927\u5e45\u9686\u8d77(\u8f70\u5934)\uff0c\u4e2d\u9891\u51f9\u9677(\u4eba\u58f0\u8fdc)\uff0c\u9ad8\u9891\u6eda\u964d\u65e9(\u89e3\u6790\u5dee)\u3002\u9002\u5408\u52a8\u6b21\u6253\u6b21\uff0c\u4e0d\u9002\u5408\u53e4\u5178\/\u4eba\u58f0\u3002<\/p>\n <\/div>\n <div class=\"p-3 bg-blue-50 rounded border border-blue-100\">\n <strong class=\"text-blue-800 block mb-1\">\ud83d\udd35 Hi-Fi\u7279\u5f81 (\u54c8\u66fc\/\u5747\u8861)<\/strong>\n <p class=\"text-blue-700 opacity-80\">\u5e73\u6ed1\u7684\u66f2\u7ebf\uff0c\u5ef6\u4f38\u81f320kHz\u4ee5\u4e0a\u3002\u4f4e\u9891\u8d28\u611f\u597d\u4f46\u4e0d\u63a9\u76d6\u4e2d\u9891\uff0c\u80fd\u542c\u5230\u66f4\u591a\u4e50\u5668\u5206\u79bb\u5ea6\u548c\u5fae\u5c0f\u7ec6\u8282\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"system\" class=\"scroll-mt-20\">\n <div class=\"mb-6 max-w-3xl\">\n <h2 class=\"text-2xl font-bold text-stone-800 mb-3\">\u4e09\u3001\u5b89\u5353\u97f3\u9891\u67b6\u6784\uff1a\u9690\u5f62\u7684\u6740\u624b<\/h2>\n <p class=\"text-stone-600 leading-relaxed\">\n \u5728\u5b89\u5353\u624b\u673a\u4e0a\uff0c\u5373\u4f7f\u4f60\u6709\u6700\u597d\u7684\u65e0\u635f\u6587\u4ef6\u548c\u6700\u8d35\u7684\u8033\u673a\uff0c\u97f3\u8d28\u4ecd\u53ef\u80fd\u5728\u4f20\u8f93\u8fc7\u7a0b\u4e2d\u53d7\u635f\u3002\u6700\u5178\u578b\u7684\u95ee\u9898\u662f **SRC (\u91c7\u6837\u7387\u8f6c\u6362)** \u548c **\u84dd\u7259\u7f16\u7801**\u3002\u70b9\u51fb\u4e0b\u65b9\u7684\u8282\u70b9\uff0c\u67e5\u770b\u4fe1\u53f7\u5728\u54ea\u4e2a\u73af\u8282\u53d1\u751f\u4e86\u52a3\u53d8\u3002\n <\/p>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n \n <div class=\"space-y-3\">\n <div onclick=\"showSystemDetail('app')\" class=\"cursor-pointer group p-4 border border-stone-200 rounded-lg hover:border-indigo-400 hover:shadow-md transition bg-white flex items-center justify-between\">\n <div class=\"flex items-center\">\n <span class=\"w-8 h-8 rounded bg-stone-100 text-stone-500 flex items-center justify-center mr-3 group-hover:bg-indigo-100 group-hover:text-indigo-600 font-bold\">1<\/span>\n <span class=\"font-medium text-stone-700\">\u97f3\u4e50 App (\u64ad\u653e\u5c42)<\/span>\n <\/div>\n <span class=\"text-xs text-stone-400\">44.1kHz \/ 96kHz<\/span>\n <\/div>\n\n <div class=\"h-6 w-0.5 bg-stone-300 mx-auto md:ml-8\"><\/div>\n\n <div onclick=\"showSystemDetail('mixer')\" class=\"cursor-pointer group p-4 border border-stone-200 rounded-lg hover:border-indigo-400 hover:shadow-md transition bg-white flex items-center justify-between\">\n <div class=\"flex items-center\">\n <span class=\"w-8 h-8 rounded bg-stone-100 text-stone-500 flex items-center justify-center mr-3 group-hover:bg-indigo-100 group-hover:text-indigo-600 font-bold\">2<\/span>\n <span class=\"font-medium text-stone-700\">Android Mixer (\u7cfb\u7edf\u5c42)<\/span>\n <\/div>\n <span class=\"text-xs text-red-500 font-bold\">SRC \u98ce\u9669!<\/span>\n <\/div>\n\n <div class=\"h-6 w-0.5 bg-stone-300 mx-auto md:ml-8\"><\/div>\n\n <div onclick=\"showSystemDetail('bt')\" class=\"cursor-pointer group p-4 border border-stone-200 rounded-lg hover:border-indigo-400 hover:shadow-md transition bg-white flex items-center justify-between\">\n <div class=\"flex items-center\">\n <span class=\"w-8 h-8 rounded bg-stone-100 text-stone-500 flex items-center justify-center mr-3 group-hover:bg-indigo-100 group-hover:text-indigo-600 font-bold\">3<\/span>\n <span class=\"font-medium text-stone-700\">\u84dd\u7259\u7f16\u7801 (\u4f20\u8f93\u5c42)<\/span>\n <\/div>\n <span class=\"text-xs text-stone-400\">AAC \/ LDAC \/ AptX<\/span>\n <\/div>\n\n <div class=\"h-6 w-0.5 bg-stone-300 mx-auto md:ml-8\"><\/div>\n\n <div onclick=\"showSystemDetail('dac')\" class=\"cursor-pointer group p-4 border border-stone-200 rounded-lg hover:border-indigo-400 hover:shadow-md transition bg-white flex items-center justify-between\">\n <div class=\"flex items-center\">\n <span class=\"w-8 h-8 rounded bg-stone-100 text-stone-500 flex items-center justify-center mr-3 group-hover:bg-indigo-100 group-hover:text-indigo-600 font-bold\">4<\/span>\n <span class=\"font-medium text-stone-700\">DAC\/Amp (\u786c\u4ef6\u5c42)<\/span>\n <\/div>\n <span class=\"text-xs text-stone-400\">\u6a21\u62df\u4fe1\u53f7\u8f6c\u6362<\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-stone-800 text-white rounded-xl p-6 flex flex-col justify-center min-h-[300px]\">\n <h3 id=\"sys-title\" class=\"text-xl font-bold text-indigo-400 mb-4\">\u70b9\u51fb\u5de6\u4fa7\u8282\u70b9\u67e5\u770b\u8be6\u60c5<\/h3>\n <p id=\"sys-desc\" class=\"text-stone-300 leading-relaxed\">\n \u4e86\u89e3\u5b89\u5353\u97f3\u9891\u6d41\u7684\u5de5\u4f5c\u539f\u7406\u662f\u63d0\u5347\u97f3\u8d28\u7684\u7b2c\u4e00\u6b65\u3002\u6bcf\u4e00\u4e2a\u73af\u8282\u90fd\u53ef\u80fd\u6210\u4e3a\u74f6\u9888\u3002\n <\/p>\n <div id=\"sys-metric\" class=\"mt-6 pt-6 border-t border-stone-700 grid grid-cols-2 gap-4 hidden\">\n <div>\n <span class=\"block text-xs text-stone-500 uppercase\">\u4e3b\u8981\u95ee\u9898<\/span>\n <span id=\"metric-problem\" class=\"font-medium text-red-400\">–<\/span>\n <\/div>\n <div>\n <span class=\"block text-xs text-stone-500 uppercase\">\u89e3\u51b3\u65b9\u6848<\/span>\n <span id=\"metric-solution\" class=\"font-medium text-green-400\">–<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"ai-clinic\" class=\"scroll-mt-20\">\n <div class=\"bg-gradient-to-br from-indigo-50 to-white rounded-2xl shadow-lg border border-indigo-100 p-6 md:p-10 relative overflow-hidden\">\n <div class=\"absolute top-0 right-0 -mt-10 -mr-10 w-40 h-40 bg-indigo-200 rounded-full blur-3xl opacity-30\"><\/div>\n \n <div class=\"mb-8 relative z-10\">\n <div class=\"flex items-center space-x-2 mb-2\">\n <span class=\"text-2xl\">\u2728<\/span>\n <h2 class=\"text-2xl font-bold text-indigo-900\">AI \u542c\u611f\u8bca\u65ad\u5ba4<\/h2>\n <\/div>\n <p class=\"text-indigo-800\/80\">\n \u4e0d\u786e\u5b9a\u81ea\u5df1\u7684\u8bbe\u5907\u74f6\u9888\u5728\u54ea\u91cc\uff1f\u8f93\u5165\u60a8\u7684\u8bbe\u5907\u4fe1\u606f\uff0c\u8ba9 Gemini AI \u5145\u5f53\u60a8\u7684\u79c1\u4eba\u97f3\u9891\u987e\u95ee\uff0c\u5206\u6790\u60a8\u7684\u97f3\u9891\u94fe\u8def\u77ed\u677f\u5e76\u63a8\u8350\u4e13\u5c5e\u8bd5\u97f3\u66f2\u76ee\u3002\n <\/p>\n <\/div>\n\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8 relative z-10\">\n \n <div class=\"space-y-4\">\n <div>\n <label class=\"block text-sm font-medium text-indigo-900 mb-1\">\u624b\u673a\u578b\u53f7 (Phone)<\/label>\n <input type=\"text\" id=\"ai-phone\" placeholder=\"\u4f8b\u5982: \u5c0f\u7c73 13, \u4e09\u661f S23, Pixel 7...\" class=\"w-full px-4 py-2 rounded-lg border border-indigo-200 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white\/80\">\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-indigo-900 mb-1\">\u8033\u673a\u578b\u53f7 (Headphones)<\/label>\n <input type=\"text\" id=\"ai-headphones\" placeholder=\"\u4f8b\u5982: \u7d22\u5c3c XM5, \u539f\u9053\u9171, AirPods Pro 2...\" class=\"w-full px-4 py-2 rounded-lg border border-indigo-200 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white\/80\">\n <\/div>\n <div class=\"grid grid-cols-2 gap-4\">\n <div>\n <label class=\"block text-sm font-medium text-indigo-900 mb-1\">\u97f3\u4e50 App<\/label>\n <select id=\"ai-app\" class=\"w-full px-4 py-2 rounded-lg border border-indigo-200 focus:ring-2 focus:ring-indigo-500 bg-white\/80\">\n <option value=\"\u7f51\u6613\u4e91\/QQ\u97f3\u4e50\">\u7f51\u6613\u4e91\/QQ\u97f3\u4e50<\/option>\n <option value=\"Apple Music\">Apple Music<\/option>\n <option value=\"Spotify\">Spotify<\/option>\n <option value=\"\u6d77\u8d1d\/Poweramp (\u672c\u5730)\">\u6d77\u8d1d\/Poweramp (\u672c\u5730)<\/option>\n <\/select>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-indigo-900 mb-1\">\u504f\u597d\u98ce\u683c<\/label>\n <select id=\"ai-style\" class=\"w-full px-4 py-2 rounded-lg border border-indigo-200 focus:ring-2 focus:ring-indigo-500 bg-white\/80\">\n <option value=\"\u6d41\u884c\u4eba\u58f0\">\u6d41\u884c\u4eba\u58f0<\/option>\n <option value=\"\u6447\u6eda\/\u91d1\u5c5e\">\u6447\u6eda\/\u91d1\u5c5e<\/option>\n <option value=\"\u53e4\u5178\/\u5927\u7f16\u5236\">\u53e4\u5178\/\u5927\u7f16\u5236<\/option>\n <option value=\"ACG\/\u7535\u5b50\">ACG\/\u7535\u5b50<\/option>\n <\/select>\n <\/div>\n <\/div>\n <button onclick=\"callGeminiDiagnosis()\" class=\"w-full py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-bold rounded-lg shadow-md transition-all flex justify-center items-center mt-4\">\n <span id=\"ai-btn-text\">\u2728 \u751f\u6210\u8bca\u65ad\u62a5\u544a<\/span>\n <div id=\"ai-loader\" class=\"loader ml-3 hidden\"><\/div>\n <\/button>\n <\/div>\n\n \n <div class=\"bg-white rounded-xl shadow-inner border border-stone-200 p-6 min-h-[300px] flex flex-col\">\n <h3 class=\"text-sm font-bold text-stone-400 uppercase tracking-wider mb-4 border-b pb-2\">AI \u8bca\u65ad\u7ed3\u679c<\/h3>\n <div id=\"ai-result\" class=\"flex-grow text-stone-600 text-sm leading-relaxed overflow-y-auto custom-scroll ai-content\">\n <div class=\"flex flex-col items-center justify-center h-full text-stone-400 space-y-2\">\n <span class=\"text-4xl opacity-20\">\ud83e\ude7a<\/span>\n <p>\u8bf7\u5728\u5de6\u4fa7\u586b\u5199\u4fe1\u606f\u5e76\u70b9\u51fb\u751f\u6210…<\/p>\n <\/div>\n <\/div>\n <div id=\"ai-error\" class=\"hidden mt-4 p-3 bg-red-50 text-red-600 text-xs rounded border border-red-100\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"scroll-mt-20\">\n <div class=\"mb-6 max-w-3xl\">\n <h2 class=\"text-2xl font-bold text-stone-800 mb-3\">\u56db\u3001\u76f2\u6d4b\u6570\u636e\uff1a\u6253\u7834\u5e7b\u89c9<\/h2>\n <p class=\"text-stone-600 leading-relaxed\">\n \u5728\u4e0d\u77e5\u9053\u6b63\u5728\u64ad\u653e\u4ec0\u4e48\u683c\u5f0f\u7684\u60c5\u51b5\u4e0b\uff0c\u7528\u6237\u771f\u7684\u80fd\u542c\u51fa\u533a\u522b\u5417\uff1f\u4ee5\u4e0b\u6570\u636e\u6c47\u603b\u4e86\u591a\u9879\u9488\u5bf9\u666e\u901a\u7528\u6237\u548c\u53d1\u70e7\u53cb\u7684\u76f2\u6d4b\uff08ABX\u6d4b\u8bd5\uff09\u3002\u7ed3\u679c\u663e\u793a\uff0c**\u8bbe\u5907\u7684\u5f71\u54cd\u529b\u8fdc\u5927\u4e8e\u6587\u4ef6\u683c\u5f0f**\u3002\n <\/p>\n <\/div>\n \n <div class=\"bg-white p-6 rounded-xl border border-stone-200 shadow-sm\">\n <div class=\"chart-container\">\n <canvas id=\"blindTestChart\"><\/canvas>\n <\/div>\n <div class=\"mt-4 text-center text-sm text-stone-500\">\n <p>\u6570\u636e\u89e3\u8bfb\uff1a\u5728\u4f4e\u7aef\u8bbe\u5907\u4e0a\uff0c\u51e0\u4e4e\u65e0\u4eba\u80fd\u5206\u8fa8320k\u4e0e\u65e0\u635f\u3002\u5373\u4f7f\u5728\u9ad8\u7aef\u8bbe\u5907\u4e0a\uff0c\u5206\u8fa8\u6210\u529f\u7387\u4e5f\u4ec5\u670965%\u5de6\u53f3\u3002<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <footer class=\"bg-stone-900 text-stone-300 rounded-2xl p-8 md:p-12 text-center space-y-6\">\n <h2 class=\"text-2xl font-bold text-white\">\u603b\u7ed3\uff1a\u94b1\u8be5\u82b1\u5728\u54ea\u91cc\uff1f<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6 text-left max-w-4xl mx-auto mt-8\">\n <div class=\"bg-stone-800 p-5 rounded-lg border-t-4 border-gray-500\">\n <h3 class=\"text-white font-bold text-lg mb-2\">\u666e\u901a\u7528\u6237<\/h3>\n <p class=\"text-sm text-stone-400\">\u6d41\u5a92\u4f53\u4f1a\u5458\u5f00\u5230”\u9ad8\u97f3\u8d28” (320k) \u5373\u53ef\u3002\u8d2d\u4e70\u4e00\u6b3e\u4f69\u6234\u8212\u9002\u3001\u652f\u6301AAC\/AptX\u7684\u4e3b\u6d41\u84dd\u7259\u8033\u673a\uff08\u00a5300-500\uff09\u3002\u65e0\u9700\u6298\u817e\u5c0f\u5c3e\u5df4\u3002<\/p>\n <\/div>\n <div class=\"bg-stone-800 p-5 rounded-lg border-t-4 border-indigo-500\">\n <h3 class=\"text-white font-bold text-lg mb-2\">\u8fdb\u9636\u542c\u53cb<\/h3>\n <p class=\"text-sm text-stone-400\">\u4f18\u5148\u5347\u7ea7\u8033\u673a\uff08\u00a51000+\uff09\u3002\u4f7f\u7528\u652f\u6301 LDAC \u7684\u5b89\u5353\u624b\u673a\u3002\u53ef\u4ee5\u5c1d\u8bd5 Apple Music \u6216 Qobuz \u7684\u65e0\u635f\u97f3\u6e90\u3002<\/p>\n <\/div>\n <div class=\"bg-stone-800 p-5 rounded-lg border-t-4 border-yellow-500\">\n <h3 class=\"text-white font-bold text-lg mb-2\">\u53d1\u70e7\u53cb<\/h3>\n <p class=\"text-sm text-stone-400\">\u5fc5\u9700\u4f7f\u7528 USB \u72ec\u5360\u6a21\u5f0f\u7ed5\u8fc7\u5b89\u5353SRC\u3002\u5916\u63a5\u89e3\u7801\u8033\u653e\uff08\u5c0f\u5c3e\u5df4\uff09\u3002\u4f7f\u7528\u9ad8\u7075\u654f\u5ea6\u6709\u7ebf\u8033\u673a\u3002\u97f3\u6e90\u5fc5\u987b\u662f FLAC\/DSD\u3002<\/p>\n <\/div>\n <\/div>\n <\/footer>\n\n <\/main>\n\n <script>\n \/\/ --- State & Data ---\n const state = {\n simulator: { source: 60, gear: 30, dac: 40 },\n currentPlotMode: 'compare'\n };\n\n const apiKey = \"\"; \/\/ Runtime provided\n\n \/\/ --- Simulator Logic ---\n function calculateScore() {\n const s = parseInt(document.getElementById('input-source').value);\n const g = parseInt(document.getElementById('input-gear').value);\n const d = parseInt(document.getElementById('input-dac').value);\n \n \/\/ Weights: Gear is most important (50%), then Source (30%), then DAC (20%)\n \/\/ However, Source has a bottleneck effect. If gear is great but source is trash, score tanks.\n \n let sourceScore = s;\n let gearScore = g;\n let dacScore = d;\n\n \/\/ Apply diminishing returns to source\n if (sourceScore > 80) sourceScore = 80 + (sourceScore - 80) * 0.2;\n\n \/\/ Bottleneck Logic: Quality cannot exceed the weakest link significantly\n let baseScore = (sourceScore * 0.3) + (gearScore * 0.5) + (dacScore * 0.2);\n \n \/\/ Penalty if Gear is much better than Source (Garbage In, Garbage Out)\n if (gearScore > sourceScore + 30) {\n baseScore -= 10;\n document.getElementById('bottleneck-display').innerText = \"\u97f3\u6e90\u8d28\u91cf\u62d6\u7d2f\u4e86\u9ad8\u7aef\u8033\u673a\";\n document.getElementById('recommendation-display').innerText = \"\u8bf7\u5347\u7ea7\u65e0\u635f\u97f3\u6e90\";\n } \n \/\/ Penalty if Source is much better than Gear (Waste)\n else if (sourceScore > gearScore + 40) {\n document.getElementById('bottleneck-display').innerText = \"\u8033\u673a\u65e0\u6cd5\u89e3\u6790\u9ad8\u7801\u7387\u7ec6\u8282\";\n document.getElementById('recommendation-display').innerText = \"\u5347\u7ea7\u8033\u673a\u63d0\u5347\u6700\u5927\";\n }\n \/\/ Penalty if DAC is low but Gear is high (Underpowered)\n else if (gearScore > 70 && dacScore < 40) {\n baseScore -= 15;\n document.getElementById('bottleneck-display').innerText = \"\u63a8\u529b\u4e0d\u8db3\/\u89e3\u7801\u592a\u5dee\";\n document.getElementById('recommendation-display').innerText = \"\u9700\u8981\u72ec\u7acbDAC\/\u5c0f\u5c3e\u5df4\";\n } else {\n document.getElementById('bottleneck-display').innerText = \"\u7cfb\u7edf\u76f8\u5bf9\u5e73\u8861\";\n document.getElementById('recommendation-display').innerText = \"\u6839\u636e\u9884\u7b97\u9010\u6b65\u5347\u7ea7\";\n }\n\n \/\/ Update UI Labels\n const sourceLabels = [\"128k MP3\", \"192k MP3\", \"320k MP3\", \"CD (16\/44)\", \"Hi-Res (24\/96)\"];\n const gearLabels = [\"\u8def\u8fb9\u644a\", \"\u767e\u5143\u7ea7\", \"\u4e3b\u6d41\u84dd\u7259\", \"\u4e2d\u7aef\u6709\u7ebf\", \"\u65d7\u8230Hi-Fi\"];\n const dacLabels = [\"\u666e\u901a\u84dd\u7259SBC\", \"AptX\/AAC\", \"LDAC\/AptX HD\", \"\u76f4\u63a8\/\u5c0f\u5c3e\u5df4\", \"\u4e13\u4e1a\u64ad\u653e\u5668\"];\n\n document.getElementById('val-source').innerText = sourceLabels[Math.min(4, Math.floor(s \/ 20))];\n document.getElementById('val-gear').innerText = gearLabels[Math.min(4, Math.floor(g \/ 20))];\n document.getElementById('val-dac').innerText = dacLabels[Math.min(4, Math.floor(d \/ 20))];\n\n \/\/ Animate Score\n const display = document.getElementById('score-display');\n const finalScore = Math.min(100, Math.round(baseScore));\n display.innerText = finalScore;\n \n \/\/ Color code score\n const label = document.getElementById('score-label');\n if(finalScore < 40) { label.innerText = \"\u542c\u4e2a\u54cd\"; label.className = \"text-sm font-medium px-3 py-1 rounded-full bg-stone-200 text-stone-600 inline-block\"; }\n else if(finalScore < 70) { label.innerText = \"\u5927\u4f17\u542c\u611f\"; label.className = \"text-sm font-medium px-3 py-1 rounded-full bg-blue-100 text-blue-800 inline-block\"; }\n else if(finalScore < 90) { label.innerText = \"\u9ad8\u4fdd\u771f\"; label.className = \"text-sm font-medium px-3 py-1 rounded-full bg-indigo-100 text-indigo-800 inline-block\"; }\n else { label.innerText = \"\u6781\u81f4\u53d1\u70e7\"; label.className = \"text-sm font-medium px-3 py-1 rounded-full bg-yellow-100 text-yellow-800 inline-block\"; }\n }\n\n \/\/ --- System Flow Logic ---\n const systemData = {\n 'app': {\n title: '1. \u97f3\u4e50 App',\n desc: '\u8fd9\u662f\u97f3\u9891\u6d41\u7684\u8d77\u70b9\u3002\u5927\u591a\u6570App\u9ed8\u8ba4\u5f00\u542f\u201c\u667a\u80fd\u97f3\u8d28\u201d\uff0c\u5728\u79fb\u52a8\u7f51\u7edc\u4e0b\u53ef\u80fd\u964d\u7ea7\u4e3a128kbps\u3002',\n problem: '\u97f3\u6e90\u6587\u4ef6\u88ab\u6709\u635f\u538b\u7f29',\n solution: '\u8bbe\u7f6e\u4e2d\u5f00\u542f\u201c\u65e0\u635f\/Hi-Res\u201d\u5e76\u4e0b\u8f7d\u5230\u672c\u5730'\n },\n 'mixer': {\n title: '2. Android Mixer (SRC)',\n desc: '\u5b89\u5353\u7cfb\u7edf\u7684\u201c\u5f3a\u5236\u91cd\u91c7\u6837\u201d\u95ee\u9898\u3002\u5982\u679c\u64ad\u653e44.1kHz\u97f3\u4e50\uff0c\u7cfb\u7edf\u53ef\u80fd\u4f1a\u5f3a\u5236\u8f6c\u6362\u4e3a48kHz\u8f93\u51fa\u3002\u8fd9\u79cd\u975e\u6574\u6570\u500d\u8f6c\u6362\u4f1a\u4ea7\u751f\u566a\u97f3\u548c\u5931\u771f\u3002',\n problem: 'SRC (Sample Rate Conversion) \u52a3\u5316\u97f3\u8d28',\n solution: '\u4f7f\u7528\u652f\u6301\u201cUSB\u72ec\u5360\u6a21\u5f0f\u201d\u7684App (\u5982\u6d77\u8d1d\u97f3\u4e50)'\n },\n 'bt': {\n title: '3. \u84dd\u7259\u7f16\u7801',\n desc: '\u65e0\u7ebf\u4f20\u8f93\u5fc5\u987b\u518d\u6b21\u538b\u7f29\u97f3\u9891\u3002SBC\u4e22\u5931\u7ec6\u8282\u4e25\u91cd\uff0cAAC\u7a0d\u597d\u3002LDAC\u662f\u76ee\u524d\u5b89\u5353\u7aef\u552f\u4e00\u80fd\u63a5\u8fd1\u65e0\u635f\u4f20\u8f93\u7684\u534f\u8bae\u3002',\n problem: '\u5e26\u5bbd\u4e0d\u8db3\u5bfc\u81f4\u7684\u9ad8\u9891\u622a\u6b62',\n solution: '\u786e\u4fdd\u624b\u673a\u548c\u8033\u673a\u90fd\u652f\u6301 LDAC \u6216 AptX Adaptive'\n },\n 'dac': {\n title: '4. DAC (\u6570\u6a21\u8f6c\u6362)',\n desc: '\u6570\u5b57\u4fe1\u53f7\u53d8\u4e3a\u6a21\u62df\u7535\u6d41\u3002\u624b\u673a\u81ea\u5e26\u7684\u89e3\u7801\u63a8\u529b\u5c0f\u3001\u5e95\u566a\u5927\u3002\u9ad8\u7aef\u8033\u673a\u5728\u8fd9\u91cc\u4f1a\u56e0\u4e3a\u201c\u63a8\u4e0d\u52a8\u201d\u800c\u663e\u5f97\u95f7\u7cca\u3002',\n problem: '\u63a8\u529b\u4e0d\u8db3\uff0c\u52a8\u6001\u8303\u56f4\u538b\u7f29',\n solution: '\u8d2d\u4e70\u5916\u63a5 USB-C\u89e3\u7801\u8033\u653e\u7ebf (\u5c0f\u5c3e\u5df4)'\n }\n };\n\n function showSystemDetail(key) {\n const data = systemData[key];\n const container = document.getElementById('sys-metric').parentNode;\n \n \/\/ Simple animation\n container.style.opacity = 0;\n setTimeout(() => {\n document.getElementById('sys-title').innerText = data.title;\n document.getElementById('sys-desc').innerText = data.desc;\n document.getElementById('metric-problem').innerText = data.problem;\n document.getElementById('metric-solution').innerText = data.solution;\n document.getElementById('sys-metric').classList.remove('hidden');\n container.style.opacity = 1;\n }, 200);\n }\n\n \/\/ --- Gemini AI Logic ---\n async function callGeminiDiagnosis() {\n const phone = document.getElementById('ai-phone').value;\n const headphones = document.getElementById('ai-headphones').value;\n const app = document.getElementById('ai-app').value;\n const style = document.getElementById('ai-style').value;\n \n const btn = document.getElementById('ai-btn-text');\n const loader = document.getElementById('ai-loader');\n const resultArea = document.getElementById('ai-result');\n const errorArea = document.getElementById('ai-error');\n\n if(!phone || !headphones) {\n alert('\u8bf7\u586b\u5199\u624b\u673a\u548c\u8033\u673a\u578b\u53f7');\n return;\n }\n\n \/\/ UI Loading State\n btn.innerText = \"\u8bca\u65ad\u5206\u6790\u4e2d...\";\n loader.classList.remove('hidden');\n resultArea.innerHTML = '<div class=\"flex flex-col items-center justify-center h-full text-indigo-400 space-y-2\"><div class=\"loader\"><\/div><p>\u6b63\u5728\u5206\u6790\u94fe\u8def\u74f6\u9888...<\/p><\/div>';\n errorArea.classList.add('hidden');\n\n const prompt = `\n Act as an expert audiophile and audio engineer. The user has the following setup:\n - Phone: ${phone}\n - Headphones: ${headphones}\n - Source App: ${app}\n - Preferred Genre: ${style}\n\n Please provide a structured diagnosis in Simplified Chinese (zh-CN) using HTML formatting (<b>, <ul>, <li>, <br>).\n Structure your response exactly like this:\n 1. <b>\u94fe\u8def\u74f6\u9888\u5206\u6790 (Chain Analysis):<\/b> Identify the weakest link (Bluetooth codec, DAC, Source file, or Headphone quality). Mention if the phone supports LDAC\/AptX based on general knowledge.\n 2. <b>\u542c\u611f\u9884\u4f30 (Expected Experience):<\/b> Briefly describe what they are likely hearing (e.g., \"Bass heavy but muddy\", \"Clean but lacking dynamics\").\n 3. <b>\u4e13\u5c5e\u8bd5\u97f3\u66f2\u63a8\u8350 (Test Tracks):<\/b> Suggest 3 specific songs that match their genre (${style}) and would test their specific gear's strengths or weaknesses. Format as a bullet list.\n 4. <b>\u5347\u7ea7\u5efa\u8bae (One-line Tip):<\/b> The single most cost-effective upgrade.\n\n Keep it concise, professional but friendly. Do not use markdown syntax like # or ##, use HTML tags.\n `;\n\n try {\n const response = await fetch(`https:\/\/generativelanguage.googleapis.com\/v1beta\/models\/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({\n contents: [{ parts: [{ text: prompt }] }]\n })\n });\n\n if (!response.ok) throw new Error('API call failed');\n \n const data = await response.json();\n const aiText = data.candidates[0].content.parts[0].text;\n \n \/\/ Simple parser to clean up markdown if Gemini adds it despite instructions\n let formattedText = aiText\n .replace(\/```html\/g, '')\n .replace(\/```\/g, '')\n .replace(\/\\*\\*(.*?)\\*\\*\/g, '<strong>$1<\/strong>'); \n\n resultArea.innerHTML = formattedText;\n\n } catch (error) {\n console.error(error);\n errorArea.innerText = \"\u8bca\u65ad\u5931\u8d25\uff0c\u8bf7\u7a0d\u540e\u91cd\u8bd5\u6216\u68c0\u67e5\u7f51\u7edc\u3002 (Error: \" + error.message + \")\";\n errorArea.classList.remove('hidden');\n resultArea.innerHTML = '<div class=\"flex flex-col items-center justify-center h-full text-stone-400\"><span class=\"text-4xl\">\u26a0\ufe0f<\/span><p>\u5206\u6790\u4e2d\u65ad<\/p><\/div>';\n } finally {\n btn.innerText = \"\u2728 \u91cd\u65b0\u751f\u6210\u62a5\u544a\";\n loader.classList.add('hidden');\n }\n }\n\n \/\/ --- Chart Initialization ---\n document.addEventListener('DOMContentLoaded', () => {\n \n \/\/ 1. Bitrate Chart (Chart.js)\n const ctxBitrate = document.getElementById('bitrateChart').getContext('2d');\n new Chart(ctxBitrate, {\n type: 'line',\n data: {\n labels: ['64k', '128k', '192k', '320k', 'CD(1411k)', 'Hi-Res'],\n datasets: [{\n label: '\u4eba\u8033\u611f\u77e5\u8fd8\u539f\u5ea6 (Perceived Fidelity)',\n data: [40, 75, 88, 95, 98, 99], \/\/ Diminishing returns\n borderColor: '#4f46e5', \/\/ Indigo-600\n backgroundColor: 'rgba(79, 70, 229, 0.1)',\n fill: true,\n tension: 0.4\n }, {\n label: '\u6587\u4ef6\u4f53\u79ef (\u76f8\u5bf9\u5927\u5c0f)',\n data: [5, 10, 15, 25, 100, 300], \/\/ Exponential growth\n borderColor: '#a8a29e', \/\/ Stone-400\n borderDash: [5, 5],\n yAxisID: 'y1',\n tension: 0.2\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n interaction: { mode: 'index', intersect: false },\n scales: {\n y: { title: { display: true, text: '\u542c\u611f\u8bc4\u5206 (0-100)' }, min: 0, max: 100 },\n y1: { position: 'right', title: { display: true, text: '\u6587\u4ef6\u4f53\u79ef\u7cfb\u6570' }, grid: { drawOnChartArea: false } }\n }\n }\n });\n\n \/\/ 2. Frequency Response (Plotly)\n initPlotly();\n\n \/\/ 3. Blind Test Chart (Chart.js)\n const ctxBlind = document.getElementById('blindTestChart').getContext('2d');\n new Chart(ctxBlind, {\n type: 'bar',\n data: {\n labels: ['\u4f4e\u7aef\u8033\u673a + \u5608\u6742\u73af\u5883', '\u4e3b\u6d41\u8033\u673a + \u5b89\u9759\u73af\u5883', '\u9ad8\u7aefHi-Fi + \u5b89\u9759\u73af\u5883'],\n datasets: [{\n label: '\u65e0\u6cd5\u5206\u8fa8',\n data: [95, 60, 35],\n backgroundColor: '#e7e5e4', \/\/ Stone-200\n }, {\n label: '\u80fd\u5206\u8fa8 320k vs \u65e0\u635f',\n data: [5, 40, 65],\n backgroundColor: '#4f46e5', \/\/ Indigo-600\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n x: { stacked: true },\n y: { stacked: true, max: 100, title: {display: true, text: '\u6d4b\u8bd5\u4eba\u7fa4\u5360\u6bd4 (%)'} }\n },\n plugins: {\n tooltip: {\n callbacks: {\n afterBody: function(context) {\n return \"\u7ed3\u8bba: \u73af\u5883\u548c\u8bbe\u5907\u6bd4\u97f3\u6e90\u683c\u5f0f\u66f4\u91cd\u8981\";\n }\n }\n }\n }\n }\n });\n\n \/\/ Initialize interactions\n ['input-source', 'input-gear', 'input-dac'].forEach(id => {\n document.getElementById(id).addEventListener('input', calculateScore);\n });\n calculateScore(); \/\/ Initial run\n });\n\n \/\/ --- Plotly Logic ---\n function initPlotly() {\n \/\/ Simulated Data\n const freqs = [20, 50, 100, 200, 500, 1000, 2000, 5000, 10000, 16000, 20000];\n \n \/\/ Budget: Boosted Bass, Recessed Mids, Rolled off highs\n const budgetData = {\n x: freqs,\n y: [5, 8, 6, 2, -2, -3, -1, 2, -5, -10, -15],\n mode: 'lines',\n name: '\u5165\u95e8\u8033\u673a (V\u578b\u8c03\u97f3)',\n line: { color: '#ef4444', width: 3 }\n };\n\n \/\/ Hi-Fi: Neutral, slight Harman curve\n const hifiData = {\n x: freqs,\n y: [2, 3, 1, 0, 0, 0, 1, 2, 1, 0, -2],\n mode: 'lines',\n name: 'Hi-Fi\u8033\u673a (\u5747\u8861\u8c03\u97f3)',\n line: { color: '#3b82f6', width: 3 }\n };\n\n const layout = {\n title: '\u9891\u54cd\u66f2\u7ebf\u5bf9\u6bd4 (Frequency Response)',\n xaxis: { type: 'log', title: '\u9891\u7387 (Hz) - \u5bf9\u6570\u5750\u6807', range: [1.3, 4.3] }, \/\/ log10(20) to log10(20000)\n yaxis: { title: '\u54cd\u5e94\u5e45\u5ea6 (dB)', range: [-20, 15] },\n margin: { t: 40, r: 20, l: 50, b: 50 },\n paper_bgcolor: 'rgba(0,0,0,0)',\n plot_bgcolor: 'rgba(0,0,0,0)',\n showlegend: true,\n legend: { x: 0.7, y: 1 }\n };\n \n \/\/ Save data for toggling\n window.plotData = { budget: budgetData, hifi: hifiData, layout: layout };\n \n Plotly.newPlot('freqPlot', [budgetData, hifiData], layout, {responsive: true, displayModeBar: false});\n }\n\n function updatePlot(mode) {\n const { budget, hifi, layout } = window.plotData;\n let data = [];\n if (mode === 'budget') data = [budget];\n else if (mode === 'hifi') data = [hifi];\n else data = [budget, hifi];\n \n Plotly.react('freqPlot', data, layout, {responsive: true, displayModeBar: false});\n }\n\n \/\/ --- Navigation Helper ---\n function scrollToSection(id) {\n const el = document.getElementById(id);\n if (el) el.scrollIntoView({ behavior: 'smooth' });\n }\n\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u5b89\u5353\u7aef\u97f3\u8d28\u4e0e\u542c\u611f\u6df1\u5ea6\u89e3\u6790 AudioLab Analysis \u542c\u611f\u6a21\u62df \u97f3\u6e90\u89e3\u6790 \u8033\u673a\u6027\u80fd \u7cfb\u7edf\u74f6\u9888 \u2728 AI \u8bca\u65ad \u5b89\u5353\u7aef\u542c\u611f\u6df1\u5ea6\u89e3\u6790 \u5728\u79fb\u52a8\u97f3\u9891\u9886\u57df\uff0c”\u97f3\u8d28”\u5f80\u5f80\u88ab\u7384\u5b66\u5316\u3002\u672c\u62a5\u544a\u57fa\u4e8e\u6570\u636e\u5206\u6790\u4e0e\u58f0\u5b66\u539f\u7406\uff0c\u89e3\u6784**\u97f3\u6e90\u6587\u4ef6\uff08Bitrate\uff09**\u3001**\u8033\u673a\u7d20\u8d28**\u4ee5\u53ca**\u5b89\u5353\u97f3\u9891\u67b6\u6784**\u4e09\u8005\u5982\u4f55\u5171\u540c\u51b3\u5b9a\u6700\u7ec8\u7684\u542c\u611f\u4f53\u9a8c\u3002 \u542c\u611f\u6784\u6210\u6a21\u62df\u5668 \u542c\u611f\u5e76\u975e\u5355\u70b9\u51b3\u5b9a\uff0c\u800c\u662f\u201c\u6728\u6876\u6548\u5e94\u201d\u3002\u8c03\u6574\u4e0b\u65b9\u6ed1\u5757\uff0c\u89c2\u5bdf\u5728\u5b89\u5353\u73af\u5883\u4e0b\uff0c\u5404\u8981\u7d20\u5bf9\u6700\u7ec8\u201c\u5b9e\u9645\u542c\u611f\u5f97\u5206\u201d\u7684\u8fb9\u9645\u8d21\u732e\u3002\u6b64\u6a21\u578b\u57fa\u4e8e\u58f0\u5b66\u5fc3\u7406\u5b66\u6743\u91cd\u6784\u5efa\u3002 \u97f3\u6e90\u8d28\u91cf (Source) 320k MP3 \u4ece 128kbps \u5230 24bit\/96kHz Hi-Res \u8033\u673a\u7d20\u8d28 (Gear) \u5165\u95e8\u7ea7 (\u00a5200) \u4ece\u767e\u5143\u8033\u673a\u5230\u65d7\u8230\u52a8\u5708\/\u52a8\u94c1 \u4f20\u8f93\/\u89e3\u7801 (DAC\/Codec) \u6807\u51c6 SBC\/AAC \u4ece\u84dd\u7259SBC\u5230\u72ec\u7acbUSB DAC \u9884\u4f30\u542c\u611f\u8bc4\u5206 0 \u8ba1\u7b97\u4e2d… \u89e3\u6790\u529b\u74f6\u9888: \u5206\u6790\u4e2d \u63d0\u5347\u5efa\u8bae: \u5206\u6790\u4e2d \u4e00\u3001\u97f3\u6e90\uff1a\u8fb9\u9645\u6548\u5e94\u7684\u4e34\u754c\u70b9 \u8bb8\u591a\u7528\u6237\u8ffd\u6c42\u201c\u65e0\u635f\u201d\u97f3\u8d28\uff0c\u4f46\u5728\u79fb\u52a8\u542c\u97f3\u73af\u5883\u4e0b\uff0c\u9ad8\u7801\u7387\u5e26\u6765\u7684\u63d0\u5347\u5e76\u975e\u7ebf\u6027\u7684\u3002\u4e0b\u56fe\u5c55\u793a\u4e86\u4e0d\u540c\u7801\u7387\uff08Bitrate\uff09\u4e0e\u4eba\u8033\u611f\u77e5\u5230\u7684\u201c\u4fdd\u771f\u5ea6\u201d\u4e4b\u95f4\u7684\u5173\u7cfb\u3002\u53ef\u4ee5\u770b\u5230\uff0c\u5728320kbps\u4e4b\u540e\uff0c\u66f2\u7ebf\u8d8b\u4e8e\u5e73\u7f13\uff0c\u8fd9\u610f\u5473\u7740\u6587\u4ef6\u4f53\u79ef\u6210\u500d\u589e\u52a0\uff0c\u4f46\u542c\u611f\u63d0\u5347\u5374\u975e\u5e38\u5fae\u5f31\u3002 \u5173\u952e\u53d1\u73b0 1 128kbps: \u9ad8\u9891\u4fe1\u606f\u88ab\u5927\u5e45\u201c\u5207\u9664\u201d\uff0c\u4e3b\u8981\u572816kHz\u4ee5\u4e0a\uff0c\u542c\u611f\u53d1\u95f7\uff0c\u91d1\u5c5e\u4e50\u5668\u5931\u771f\u3002 2 320kbps (MP3\/AAC): \u6240\u8c13\u7684\u201c\u9ec4\u91d1\u542c\u611f\u70b9\u201d\u3002\u4fdd\u7559\u4e86\u5927\u90e8\u5206\u4eba\u8033\u654f\u611f\u9891\u6bb5\uff0c\u5373\u4fbf\u5728\u9ad8\u7aef\u8bbe\u5907\u4e0a\uff0c\u4e0e\u65e0\u635f\u7684\u533a\u522b\u4e5f\u6781\u5176\u7ec6\u5fae\u3002 3 Hi-Res \/ Lossless: \u4e3b\u8981\u662f\u52a8\u6001\u8303\u56f4\u548c\u6781\u9ad8\u9891\u7684\u5ef6\u4f38\u3002\u4f46\u5728\u5608\u6742\u7684\u901a\u52e4\u73af\u5883\u4e2d\uff0c\u8fd9\u79cd\u4f18\u52bf\u51e0\u4e4e\u5b8c\u5168\u88ab\u73af\u5883\u566a\u97f3\u63a9\u76d6\u3002 \u4e8c\u3001\u8033\u673a\uff1a\u51b3\u5b9a\u97f3\u8272\u7684\u753b\u7b14 \u76f8\u6bd4\u4e8e\u97f3\u6e90\uff0c\u8033\u673a\u7684\u7269\u7406\u7d20\u8d28\uff08\u9891\u54cd\u66f2\u7ebf\u3001\u77ac\u6001\u54cd\u5e94\u3001\u603b\u8c10\u6ce2\u5931\u771f\uff09\u5bf9\u542c\u611f\u7684\u5f71\u54cd\u662f\u51b3\u5b9a\u6027\u7684\u3002\u4e0b\u56fe\u5bf9\u6bd4\u4e86\u5178\u578b\u5165\u95e8\u7ea7\u8033\u673a\uff08\u4e3b\u8981\u63d0\u5347\u4f4e\u9891\u91cf\u611f\u4ee5\u63a9\u76d6\u7d20\u8d28\u4e0d\u8db3\uff09\u4e0e\u9ad8\u4fdd\u771f\u8033\u673a\uff08\u8ffd\u6c42\u4e09\u9891\u5747\u8861\u8fd8\u539f\uff09\u7684\u9891\u54cd\u5dee\u5f02\u3002 \u663e\u793a\u5165\u95e8\u7ea7\u66f2\u7ebf \u663e\u793aHi-Fi\u66f2\u7ebf \u5bf9\u6bd4\u6a21\u5f0f \ud83d\udd34 \u5165\u95e8\u7ea7\u7279\u5f81 (V\u578b\u8c03\u97f3) \u4f4e\u9891\u5927\u5e45\u9686\u8d77(\u8f70\u5934)\uff0c\u4e2d\u9891\u51f9\u9677(\u4eba\u58f0\u8fdc)\uff0c\u9ad8\u9891\u6eda\u964d\u65e9(\u89e3\u6790\u5dee)\u3002\u9002\u5408\u52a8\u6b21\u6253\u6b21\uff0c\u4e0d\u9002\u5408\u53e4\u5178\/\u4eba\u58f0\u3002 \ud83d\udd35 Hi-Fi\u7279\u5f81 (\u54c8\u66fc\/\u5747\u8861) \u5e73\u6ed1\u7684\u66f2\u7ebf\uff0c\u5ef6\u4f38\u81f320kHz\u4ee5\u4e0a\u3002\u4f4e\u9891\u8d28\u611f\u597d\u4f46\u4e0d\u63a9\u76d6\u4e2d\u9891\uff0c\u80fd\u542c\u5230\u66f4\u591a\u4e50\u5668\u5206\u79bb\u5ea6\u548c\u5fae\u5c0f\u7ec6\u8282\u3002 \u4e09\u3001\u5b89\u5353\u97f3\u9891\u67b6\u6784\uff1a\u9690\u5f62\u7684\u6740\u624b \u5728\u5b89\u5353\u624b\u673a\u4e0a\uff0c\u5373\u4f7f\u4f60\u6709\u6700\u597d\u7684\u65e0\u635f\u6587\u4ef6\u548c\u6700\u8d35\u7684\u8033\u673a\uff0c\u97f3\u8d28\u4ecd\u53ef\u80fd\u5728\u4f20\u8f93\u8fc7\u7a0b\u4e2d\u53d7\u635f\u3002\u6700\u5178\u578b\u7684\u95ee\u9898\u662f **SRC (\u91c7\u6837\u7387\u8f6c\u6362)** \u548c **\u84dd\u7259\u7f16\u7801**\u3002\u70b9\u51fb\u4e0b\u65b9\u7684\u8282\u70b9\uff0c\u67e5\u770b\u4fe1\u53f7\u5728\u54ea\u4e2a\u73af\u8282\u53d1\u751f\u4e86\u52a3\u53d8\u3002 1 \u97f3\u4e50 App (\u64ad\u653e\u5c42) 44.1kHz \/ 96kHz 2 Android Mixer (\u7cfb\u7edf\u5c42) SRC \u98ce\u9669! 3 \u84dd\u7259\u7f16\u7801 (\u4f20\u8f93\u5c42) AAC \/ LDAC \/ AptX 4 DAC\/Amp (\u786c\u4ef6\u5c42) \u6a21\u62df\u4fe1\u53f7\u8f6c\u6362 \u70b9\u51fb\u5de6\u4fa7\u8282\u70b9\u67e5\u770b\u8be6\u60c5 \u4e86\u89e3\u5b89\u5353\u97f3\u9891\u6d41\u7684\u5de5\u4f5c\u539f\u7406\u662f\u63d0\u5347\u97f3\u8d28\u7684\u7b2c\u4e00\u6b65\u3002\u6bcf\u4e00\u4e2a\u73af\u8282\u90fd\u53ef\u80fd\u6210\u4e3a\u74f6\u9888\u3002 \u4e3b\u8981\u95ee\u9898 – \u89e3\u51b3\u65b9\u6848 – \u2728 AI \u542c\u611f\u8bca\u65ad\u5ba4 \u4e0d\u786e\u5b9a\u81ea\u5df1\u7684\u8bbe\u5907\u74f6\u9888\u5728\u54ea\u91cc\uff1f\u8f93\u5165\u60a8\u7684\u8bbe\u5907\u4fe1\u606f\uff0c\u8ba9 Gemini AI \u5145\u5f53\u60a8\u7684\u79c1\u4eba\u97f3\u9891\u987e\u95ee\uff0c\u5206\u6790\u60a8\u7684\u97f3\u9891\u94fe\u8def\u77ed\u677f\u5e76\u63a8\u8350\u4e13\u5c5e\u8bd5\u97f3\u66f2\u76ee\u3002 \u624b\u673a\u578b\u53f7 (Phone) \u8033\u673a\u578b\u53f7 (Headphones) \u97f3\u4e50 App \u7f51\u6613\u4e91\/QQ\u97f3\u4e50Apple MusicSpotify\u6d77\u8d1d\/Poweramp (\u672c\u5730) \u504f\u597d\u98ce\u683c \u6d41\u884c\u4eba\u58f0\u6447\u6eda\/\u91d1\u5c5e\u53e4\u5178\/\u5927\u7f16\u5236ACG\/\u7535\u5b50 \u2728 \u751f\u6210\u8bca\u65ad\u62a5\u544a AI \u8bca\u65ad\u7ed3\u679c \ud83e\ude7a \u8bf7\u5728\u5de6\u4fa7\u586b\u5199\u4fe1\u606f\u5e76\u70b9\u51fb\u751f\u6210… \u56db\u3001\u76f2\u6d4b\u6570\u636e\uff1a\u6253\u7834\u5e7b\u89c9 \u5728\u4e0d\u77e5\u9053\u6b63\u5728\u64ad\u653e\u4ec0\u4e48\u683c\u5f0f\u7684\u60c5\u51b5\u4e0b\uff0c\u7528\u6237\u771f\u7684\u80fd\u542c\u51fa\u533a\u522b\u5417\uff1f\u4ee5\u4e0b\u6570\u636e\u6c47\u603b\u4e86\u591a\u9879\u9488\u5bf9\u666e\u901a\u7528\u6237\u548c\u53d1\u70e7\u53cb\u7684\u76f2\u6d4b\uff08ABX\u6d4b\u8bd5\uff09\u3002\u7ed3\u679c\u663e\u793a\uff0c**\u8bbe\u5907\u7684\u5f71\u54cd\u529b\u8fdc\u5927\u4e8e\u6587\u4ef6\u683c\u5f0f**\u3002 \u6570\u636e\u89e3\u8bfb\uff1a\u5728\u4f4e\u7aef\u8bbe\u5907\u4e0a\uff0c\u51e0\u4e4e\u65e0\u4eba\u80fd\u5206\u8fa8320k\u4e0e\u65e0\u635f\u3002\u5373\u4f7f\u5728\u9ad8\u7aef\u8bbe\u5907\u4e0a\uff0c\u5206\u8fa8\u6210\u529f\u7387\u4e5f\u4ec5\u670965%\u5de6\u53f3\u3002 \u603b\u7ed3\uff1a\u94b1\u8be5\u82b1\u5728\u54ea\u91cc\uff1f \u666e\u901a\u7528\u6237 \u6d41\u5a92\u4f53\u4f1a\u5458\u5f00\u5230”\u9ad8\u97f3\u8d28” (320k) \u5373\u53ef\u3002\u8d2d\u4e70\u4e00\u6b3e\u4f69\u6234\u8212\u9002\u3001\u652f\u6301AAC\/AptX\u7684\u4e3b\u6d41\u84dd\u7259\u8033\u673a\uff08\u00a5300-500\uff09\u3002\u65e0\u9700\u6298\u817e\u5c0f\u5c3e\u5df4\u3002 \u8fdb\u9636\u542c\u53cb \u4f18\u5148\u5347\u7ea7\u8033\u673a\uff08\u00a51000+\uff09\u3002\u4f7f\u7528\u652f\u6301 LDAC \u7684\u5b89\u5353\u624b\u673a\u3002\u53ef\u4ee5\u5c1d\u8bd5 Apple Music \u6216 Qobuz \u7684\u65e0\u635f\u97f3\u6e90\u3002 \u53d1\u70e7\u53cb \u5fc5\u9700\u4f7f\u7528 USB \u72ec\u5360\u6a21\u5f0f\u7ed5\u8fc7\u5b89\u5353SRC\u3002\u5916\u63a5\u89e3\u7801\u8033\u653e\uff08\u5c0f\u5c3e\u5df4\uff09\u3002\u4f7f\u7528\u9ad8\u7075\u654f\u5ea6\u6709\u7ebf\u8033\u673a\u3002\u97f3\u6e90\u5fc5\u987b\u662f FLAC\/DSD\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-579","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/trantor.ink\/index.php?rest_route=\/wp\/v2\/pages\/579","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/trantor.ink\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/trantor.ink\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/trantor.ink\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/trantor.ink\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=579"}],"version-history":[{"count":1,"href":"https:\/\/trantor.ink\/index.php?rest_route=\/wp\/v2\/pages\/579\/revisions"}],"predecessor-version":[{"id":580,"href":"https:\/\/trantor.ink\/index.php?rest_route=\/wp\/v2\/pages\/579\/revisions\/580"}],"wp:attachment":[{"href":"https:\/\/trantor.ink\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=579"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}