Combine Audio and VTT/SRT

differentj · 04-01-2023, 01:29 PM

I’ve never created an ebook before but have been using MacWhisper AI to create transcripts of hour long audio files.

I came across a demo HTML page blow that loads in audio and a transcription where you can click anywhere in the transcription and the audio jumps to that.
https://umd-mith.github.io/webvtt-player/index.html

I’m not hosting websites and doing HTML on device doesn’t work easily on mobile. I’ve also looked into existing programs and Shortcuts app but the best solution I’ve come up with is an interactive eBook.

I have my audio files and I have the transcript in VTT and SRT file format.

Ideally I’d like to load the audio and sync the audio to the transcript. The transcript would either be raw or hide time stamps and could be read like a book but if I tap or click on a word I’d like the audio to start playing (or jump) to that point.

If anyone has a good video or instructions or a template for this I’d appreciate it as most of my searches are pulling up older posts of people attempting this when it wasn’t possible in Sigil or took workarounds.

I know basic HTML, and I can fumble through some CSS but I don’t know any JavaScript.

The demo page linked above I did recreate locally on my computer if that helps.

KevinH · 04-01-2023, 02:17 PM

You might want to explore epub3 media overlays.

http://kb.daisy.org/publishing/docs/.../overlays.html

https://www.w3.org/publishing/epub3/...aoverlays.html

https://wiki.mobileread.com/wiki/SMIL

differentj · 04-01-2023, 03:19 PM

Quote:

Originally Posted by KevinH

You might want to explore epub3 media overlays.

http://kb.daisy.org/publishing/docs/.../overlays.html

https://www.w3.org/publishing/epub3/...aoverlays.html

https://wiki.mobileread.com/wiki/SMIL

Thank you for the reply!

I'm currently looking into Media Overlays and already stumbled across the w3 link but will look into the others as well.

I'm essentially looking for a cookie cutter approach where I can just drop in my audio file and VTT and just make personal interactive transcripts of hour long podcasts so there's no chapters or anything.

It seems a little intimidating but I'm diving in to see what I can come up with 😄

KevinH · 04-01-2023, 04:37 PM

That is pretty much what the project you linked to does:

https://github.com/umd-mith/webvtt-player

Check out the section of the readme that talks about using the player *without* React and it has a link to the javascript you will need to link to.

So creating an epub3 with a single xhtml page that uses that javascript should be doable.

elibrarian · 04-01-2023, 04:54 PM

Quote:

Originally Posted by differentj

I'm essentially looking for a cookie cutter approach where I can just drop in my audio file and VTT and just make personal interactive transcripts of hour long podcasts so there's no chapters or anything.

It seems a little intimidating but I'm diving in to see what I can come up with 😄

.srt and .vtt are common formats for video-subtitles, and any decent subtitleeditor software should be able to do what you want (not the epub conversion, though, but mayby that's not even necessery), even if you're working with sound only instead of full-fledged movies (I have used this one https://www.nikse.dk/ in the past, mostly for subtitling some movies for my son – many, many years ago and in a galaxy far away (or so it seems sometimes), but I think that's Windows only.

AFAIR, it was somewhat timeconsuming making the sound and text timecoding fit together correctly, but then this wasn't an everyday task for me.

Anyway, just a suggestion

Regards,

Kim

differentj · 04-01-2023, 09:52 PM

I wanted to say I spent around a lot of time on this but was able to get it to work and shockingly it works in iBooks and I can tap on the text and the audio skips to the right part.. Amazing. It looks awful and I'll have to look into how to span the text to other pages as right now it's showing as one tremendously long page and the formatting is horrid but it's working!!!!

Thank you!!

differentj · 04-05-2023, 11:16 AM

Thank you! I did check out his site and looked at the software but it does seem to be windows only for the software and for the website while actually doing 90% of what I was looking for doesn't do audio outside of waveforms and for me that would be an additional hurdle I don't currently have but I do appreciate the suggestion!

04-01-2023, 01:29 PM	#1
differentj Member Posts: 12 Karma: 10 Join Date: Apr 2023 Device: Mac	Combine Audio and VTT/SRT I’ve never created an ebook before but have been using MacWhisper AI to create transcripts of hour long audio files. I came across a demo HTML page blow that loads in audio and a transcription where you can click anywhere in the transcription and the audio jumps to that. https://umd-mith.github.io/webvtt-player/index.html I’m not hosting websites and doing HTML on device doesn’t work easily on mobile. I’ve also looked into existing programs and Shortcuts app but the best solution I’ve come up with is an interactive eBook. I have my audio files and I have the transcript in VTT and SRT file format. Ideally I’d like to load the audio and sync the audio to the transcript. The transcript would either be raw or hide time stamps and could be read like a book but if I tap or click on a word I’d like the audio to start playing (or jump) to that point. If anyone has a good video or instructions or a template for this I’d appreciate it as most of my searches are pulling up older posts of people attempting this when it wasn’t possible in Sigil or took workarounds. I know basic HTML, and I can fumble through some CSS but I don’t know any JavaScript. The demo page linked above I did recreate locally on my computer if that helps.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Looking for Audio adapter USB-C to AUDIO / earphone - BOOX Nova Pro	Michal Jancik	Onyx Boox	13	08-16-2019 07:36 AM
Combine lines	gipsy	Sigil	2	02-19-2014 08:52 AM
RK2729 subtitle srt font size	istvan58	Introduce Yourself	2	09-22-2011 07:21 PM
Combine Books?	pghaworth	Calibre	4	08-13-2010 10:25 AM
Blackstone Audio to release audio books as DRM-free MP3s	Donnageddon	News	4	07-07-2008 12:16 PM

04-01-2023, 02:17 PM	#2
KevinH Sigil Developer Posts: 7,713 Karma: 5444398 Join Date: Nov 2009 Device: many	You might want to explore epub3 media overlays. http://kb.daisy.org/publishing/docs/.../overlays.html https://www.w3.org/publishing/epub3/...aoverlays.html https://wiki.mobileread.com/wiki/SMIL

04-01-2023, 04:37 PM	#4
KevinH Sigil Developer Posts: 7,713 Karma: 5444398 Join Date: Nov 2009 Device: many	That is pretty much what the project you linked to does: https://github.com/umd-mith/webvtt-player Check out the section of the readme that talks about using the player without React and it has a link to the javascript you will need to link to. So creating an epub3 with a single xhtml page that uses that javascript should be doable.

04-01-2023, 09:52 PM	#6
differentj Member Posts: 12 Karma: 10 Join Date: Apr 2023 Device: Mac	I wanted to say I spent around a lot of time on this but was able to get it to work and shockingly it works in iBooks and I can tap on the text and the audio skips to the right part.. Amazing. It looks awful and I'll have to look into how to span the text to other pages as right now it's showing as one tremendously long page and the formatting is horrid but it's working!!!! Thank you!!

04-05-2023, 11:16 AM	#7
differentj Member Posts: 12 Karma: 10 Join Date: Apr 2023 Device: Mac	Thank you! I did check out his site and looked at the software but it does seem to be windows only for the software and for the website while actually doing 90% of what I was looking for doesn't do audio outside of waveforms and for me that would be an additional hurdle I don't currently have but I do appreciate the suggestion!

Advert

Advert