vue3+ts webVTT与JSON之前格式互转
vue
interface Cue {startTime: stringendTime: stringcontent: string// 可以根据需要添加其他属性，如样式、行号等
}
/** @desc WebVtt转 JSON */
export function parseWebVTT(vttContent: any): Cue[] {const cues: Cue[] = []if (!vttContent) {return []}const lines = vttContent.split(/\r?\n/)let currentCue: Cue | null = nulllet inCue = falsefor (const line of lines) {// 跳过空行和注释行if (line.trim() === '' || line.startsWith('NOTE')) {continue}// 检查是否是新 Cue 的开始if (line.startsWith('WEBVTT')) {continue // 忽略文件头部} else if (line.match(/^\d+:\d+:\d+\.\d+ --> \d+:\d+:\d+\.\d+$/)) {// 开始一个新的 Cueif (currentCue) {cues.push(currentCue)}const times = line.split(' --> ')currentCue = {startTime: parseTime(times[0]),endTime: parseTime(times[1]),content: ''}inCue = true} else if (inCue) {// 在 Cue 中，累加文本行if (line.trim() !== '') {currentCue.content += line.trim() + '\n' // 保留换行符} else {// 空行表示 Cue 结束inCue = falseif (currentCue) {cues.push(currentCue)currentCue = null}}}}// 处理最后一个 Cue（如果有的话）if (currentCue) {cues.push(currentCue)}return cues
}
function parseTime(timeString: string): any {const times = timeString.split('.')return times[0]
}
/** @desc json 转 WebVtt */
export function cuesToWebVTT(cues: Cue[]): string {let webvttContent = 'WEBVTT\n\n'cues.forEach((cue, index) => {// 将时间戳转换为 WebVTT 格式const startTime = cue.startTime + '.000'const endTime = cue.endTime + '.000'// 构造 WebVTT 文本行const cueTextLines = cue.content.split('\n').map((line) => ` ${line}`)const cueText = cueTextLines.join('\n')// 添加编号（可选，但通常 WebVTT 文件包含编号）webvttContent += `${index + 1}\n`// 添加时间戳和文本webvttContent += `${startTime} --> ${endTime}\n${cueText}\n\n`})return webvttContent
}