audiosynctest1

by Craig Martin

HTML

<div id="transcriptWrapperParent" style="">
<div id="transcriptWrapper">
	<ul id="transcript"><li spkr_name="Fictionz" class="cue speaker1 spk trlistyle speaking" start-offset="2"><div class="mark_time">0:02</div><span>Hello, you are listening to Fictionz. Short serialized, female forward stories. Please be advised the show may contain scenes that some viewers may find disturbing. It is intended for mature listeners.</span></li><li spkr_name="Rose" class="cue speaker1 spk trlistyle notspeaking" start-offset="29"><div class="mark_time">0:29</div><span>You know that romantic comedy where the girl is faking that her life is so perfect? And you're like, stop lying, we can all see that you have a shit job and your boyfriend is cheating on you, and you could stand to lose 10 pounds. Well, maybe 13 and a half. Anyway, I can relate to this poor unfortunate soul. It's like when your friend group assigns everyone a character in Sex in the City. I'm always Miranda Hobbs. No one ever wants to be Miranda. I can't possibly be all of Miranda. But that's not the point. It all started two weeks ago when I caught my boyfriend. </span></li><li spkr_name="Cliff" class="cue speaker1 spk trlistyle notspeaking" start-offset="65"><div class="mark_time">1:05</div><span>Ex, your ex boyfriend. </span></li><li spkr_name="Rose" class="cue speaker1 spk trlistyle notspeaking" start-offset="68"><div class="mark_time">1:08</div><span>Correction, ex boyfriend cheating on me. We were a month deep into quarantine and that strong female intuition kicked in. So naturally, I started snooping.</span></li><li spkr_name="Rose" class="cue speaker1 spk trlistyle notspeaking" start-offset="85"><div class="mark_time">1:25</div><span>For those of you who aren't experts in this prestigious field, snooping is unlocking his iPhone with face recognition while he's sleeping, going on his Facebook Snapchat and Instagram. Always look at the DMs. </span></li><li spkr_name="Cliff" class="cue speaker1 spk trlistyle...

CSS

body {
	font-family: Arial, sans-serif;
}
#transcriptWrapper {
	width: 500px;
	height: 250px;
	overflow: hidden;
}
#transcript {
	font-family: garamond;
	font-size: 14pt;
	list-style: none;
	border-left: 1px solid;
	padding-left: 13px;
	position: relative;
}
#transcript > li {
	margin: 5px 0;
	padding: 5px;
	-webkit-filter: blur(3px);
	filter: blur(3px);
	transition: all .8s ease;
	list-style-type: disc;
}
.speaker1 {
	background: #F5E566;
}
.speaker2 {
	background: #F57E66;
}
.speakerName {
	text-transform: uppercase;
}
.speaking {
	-webkit-filter: blur(0px) !important;
	filter: blur(0px) !important;
}

JavaScript

seriesdata = {
"series_title":"The Break-Up Diet",  
"coverimage":"https://www.hollywoodtechshop.com/podscribe/wp-content/uploads/2021/07/Break-Up-Diet-Image-e1629319597834.png", 
"epi_id":"30282", 
    "episodes":{
        "ep1":{
            "epi_num":1_1,
            "endof_series" : false,
            "episode_title":" I’m Not Miranda Hobbes",
            "mp3":"THE_BRAKE_UP_DIET_1_1.mp3",
            "offsets":{
            "dialogtimes" : [2,29,65,68,85,100,101,114,125,130,166,185,186,196,207,209,210,223,233,239,249,250,252,253,254,258,263,266,271,272,274,275,281,286,295,296,299,300,301,305,306,307,315,318,322]
            },
            "content":"<li spkr_name='Fictionz' class='cue speaker1 spk trlistyle notspeaking' start-offset='2'><div class='mark_time'>0:02</div><span>Hello, you are listening to Fictionz. Short serialized, female forward stories. Please be advised the show may contain scenes that some viewers may find disturbing. It is intended for mature listeners.</span></li><li spkr_name='Rose' class='cue speaker1 spk trlistyle notspeaking' start-offset='29'><div class='mark_time'>0:29</div><span>You know that romantic comedy where the girl is faking that her life is so perfect? And you're like, stop lying, we can all see that you have a shit job and your boyfriend is cheating on you, and you could stand to lose 10 pounds. Well, maybe 13 and a half. Anyway, I can relate to this poor unfortunate soul. It's like when your friend group assigns everyone a character in Sex in the City. I'm always Miranda Hobbs. No one ever wants to be Miranda. I can't possibly be all of Miranda. But that's not the point. It all started two weeks ago when I caught my boyfriend. </span></li><li spkr_name='Cliff' class='cue speaker1 spk trlistyle notspeaking' start-offset='65'><div class='mark_time'>1:05</div><span>Ex, your ex boyfriend. </span></li><li spkr_name='Rose' class='cue speaker1 spk trlistyle notspeaking' start-offset='68'><div...