tailwind+vue在线音频srt字幕编辑器代码-html代码-BFW代码库

tailwind+vue在线音频srt字幕编辑器代码

代码语言：html

所属分类：其他

代码描述：tailwind+vue在线音频srt字幕编辑器代码，可导入本地音频，试听、编辑字幕，导出srt

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>极简字幕编辑器</title>
    <!-- Tailwind CSS (用于快速样式) -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
    <!-- Vue 3 -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.global.3.5.18.js"></script>
    <!-- Phosphor Icons (图标库) -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/phosphor-icons@1.4.2.css">
    <style>
        /* 自定义滚动条 */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #1f2937; }
        ::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #6b7280; }
        
        .active-sub {
            border-left: 4px solid #3b82f6;
            background-color: #1f2937;
        }
        
        /* 时间输入框样式微调 */
        .time-input {
            font-family: 'Courier New', Courier, monospace;
        }
    </style>
</head>
<body class="bg-gray-900 text-gray-100 h-screen overflow-hidden flex flex-col font-sans">

<div id="app" class="h-full flex flex-col">

    <!-- 顶部导航栏 -->
    <header class="bg-gray-800 border-b border-gray-700 p-4 flex justify-between items-center shadow-md z-10">
        <div class="flex items-center gap-2">
            <i class="ph ph-closed-captioning text-3xl text-blue-500"></i>
            <h1 class="text-xl font-bold tracking-wide">字幕编辑器 <span class="text-xs text-gray-500 font-normal">Pro</span></h1>
        </div>
        
        <div class="flex gap-3">
            <!--.........完整代码请登录后点击上方下载按钮下载查看