【发布时间】：2021-07-01 08:46:03
【问题描述】：
我有以下代码解析demo SRT file 并在适当的时间打印出文本，如下所示：
const { default: srtParser2 } = require('srt-parser-2')
const fs = require('fs')
const parser = new srtParser2()
const srtText = fs.readFileSync('ex.srt', 'utf-8')
const chunks = parser.fromSrt(srtText).map(simplify)
animate(chunks)
function animate(chunks) {
chunks.forEach(({ startms, endms, text }) => {
setTimeout(() => {
console.clear()
console.log(text)
}, startms)
})
}
function simplify({ startTime, endTime, text }) {
let startms = toInterval(startTime)
let endms = toInterval(endTime)
return { startms, endms, text }
}
function toInterval(string) {
const [a, ms] = string.split(',')
const [h, m, s] = a.split(':')
const H = parseInt(h, 10) * 1000 * 60 * 60
const M = parseInt(m, 10) * 1000 * 60
const S = parseInt(s, 10) * 1000
const MS = parseInt(ms, 10)
return H + M + S + MS
}
当没有关联的音频时，这可以正常工作。但是如何更正确地将其与浏览器中的音频文件相关联？
预编译的一些东西，基本上我现在可以归结为这个（所以你可以在浏览器中运行）：
animate([
{
"startms": 50,
"endms": 2000,
"text": "- [Adam] Hello, my name is Adam Wilbert,"
},
{
"startms": 2000,
"endms": 3010,
"text": "and I'd like to welcome you"
},
{
"startms": 3010,
"endms": 5040,
"text": "to Learning Relational Databases."
},
{
"startms": 5040,
"endms": 7000,
"text": "In this course, I'm going\nto give you an overview"
},
{
"startms": 7000,
"endms": 8090,
"text": "of the planning steps that\nyou should move through"
},
{
"startms": 8090,
"endms": 11000,
"text": "before you start development\nin order to ensure"
},
{
"startms": 11000,
"endms": 13020,
"text": "that your system works as expected."
},
{
"startms": 13020,
"endms": 15000,
"text": "I'll start with an\noverview of what exactly"
},
{
"startms": 15000,
"endms": 17090,
"text": "a relational database is and\nhow its structure differs"
},
{
"startms": 17090,
"endms": 18070,
"text": "from the spreadsheets"
},
{
"startms": 18070,
"endms": 20030,
"text": "that you might be used to working with."
},
{
"startms": 20030,
"endms": 22030,
"text": "And I'll outline some of\nthe hidden difficulties"
},
{
"startms": 22030,
"endms": 24010,
"text": "that can arise if the\nstructure of your data"
},
{
"startms": 24010,
"endms": 27020,
"text": "isn't fully considered\nbefore development begins."
},
{
"startms": 27020,
"endms": 30000,
"text": "Then we'll discover the\ndatabase development lifecycle"
},
{
"startms": 30000,
"endms": 32050,
"text": "and use it as a guide for\nmoving through the process"
},
{
"startms": 32050,
"endms": 35040,
"text": "of thinking about our\nspecific data storage needs."
},
{
"startms": 35040,
"endms": 36090,
"text": "Finally, we'll talk about all of the rules"
},
{
"startms": 36090,
"endms": 38060,
"text": "that we've identified\nabout how the database"
},
{
"startms": 38060,
"endms": 40060,
"text": "needs to function and\nstart translating them"
},
{
"startms": 40060,
"endms": 41090,
"text": "into the components that will make up"
},
{
"startms": 41090,
"endms": 44020,
"text": "the actual relational database."
},
{
"startms": 44020,
"endms": 46050,
"text": "And along the way, we'll\ndiscuss design considerations"
},
{
"startms": 46050,
"endms": 48030,
"text": "that'll make the database\neasier to construct"
},
{
"startms": 48030,
"endms": 50050,
"text": "and easier to maintain."
},
{
"startms": 50050,
"endms": 52000,
"text": "So I'd like to thank you for joining me"
},
{
"startms": 52000,
"endms": 53070,
"text": "in learning relational databases."
},
{
"startms": 53070,
"endms": 55040,
"text": "Now let's get started."
}
]
)
function animate(chunks) {
chunks.forEach(({ startms, endms, text }) => {
setTimeout(() => {
console.clear()
console.log(text)
}, startms)
})
}我正在做的只是显示文本大约。但这就是问题所在，它是近似的。如果音频有任何延迟，那么一切都会被抛出。
当相应的音频播放时，我怎样才能使文本正确地动画？说我只是这样做：
var audio = new Audio('audio_file.mp3')
audio.play()
如何将 SRT 与此类音频文件同步？
我可以直接硬编码或将 SRT 文件直接嵌入到音频文件或显示字幕类型的东西并不是那么简单。我需要在文本上运行自定义动画，并允许用户在朗读文本时与文本进行交互。
【问题讨论】：
标签： javascript audio synchronization srt