< style type = "text/css" >
body {font-family: "Old Standard TT"; font-size: 20px; line-height: 1.4; letter-spacing: 1px;}
h2 {
text-align: center;
letter-spacing: 4px;
font-size: 28px;}
section {margin-bottom: 50px;}
table, th, td {vertical-align: top; border-collapse: separate; padding: 6px;}
button {width: 100px;}
.short-description{
margin-left: 40%;
margin-right: 40%;
text-align: center;
}
a {
text-decoration:none;
}
#transcriptWrapper {
overflow: hidden;
}
#transcriptWrapper3 {
overflow: hidden;
}
#transcript3 > div {
transition: all .8s ease;
list-style-type: disc;
}
.speaking3 {
font-weight:bold
}
#transcript > div {
transition: all .8s ease;
list-style-type: disc;
}
.speaking {
font-weight:bold
}
< / style >
< body >
< section >
< h2 > Feedback composition< / h2 >
< p align = "center" > Annotating sounds< / p >
< p class = "short-description" >
< a href = "../index.html" > Utterance< / a >
< / p >
< / section >
< section >
< div >
< audio style = "width: 100%; background: #FFFFFF;" id = "a1" controls src = "audio/selection-track-extracts-1.mp3" > < / audio >
< audio ontimeupdate = "playTranscript()" style = "width: 100%; background: #222;" id = "a2" controls src = "audio/description-lidia-CUT.mp3" > < / audio >
< audio ontimeupdate = "playTranscript3()" style = "width: 100%; background: #222;" id = "a3" controls src = "audio/description-eugenie-CUT-SHORT.mp3" > < / audio >
< audio style = "width: 100%; background: #222;" id = "a4" controls src = "audio/description-alex1.mp3" > < / audio >
< button id = "but" > listen< / button >
< button id = "butI" > interrupt< / button >
< / div >
< audio id = "interrupt" src = "audio/leeszaal-meetings-discussion.mp3" > < / audio >
< / section >
< section >
< div >
< audio style = "width: 100%; background: #FFFFFF;" id = "b1" controls src = "audio/selectionB.mp3" > < / audio >
< audio style = "width: 100%; background: #222;" id = "b2" controls src = "audio/description-tommi.mp3" > < / audio >
< audio style = "width: 100%; background: #222;" id = "b3" controls src = "audio/description-alex2.mp3" > < / audio >
< button id = "butB" > listen< / button >
< / div >
< / section >
< table > < tr >
< td >
< div id = "transcriptWrapper" class = 'sub' >
< h3 > Lidia< / h3 >
< div id = "transcript" >
< div > < a data-start = "0.4" href = "#" > 00:00:00,400< / a > A vint< / div >
< div > < a data-start = "8.18" href = "#" > 00:00:08,180< / a > A bag< / div >
< div > < a data-start = "16.54" href = "#" > 00:00:16,540< / a > Someone with a bag< / div >
< div > < a data-start = "28.52" href = "#" > 00:00:28,520< / a > Ok. Music< / div >
< div > < a data-start = "33.16" href = "#" > 00:00:33,160< / a > Nice music< / div >
< div > < a data-start = "50.86" href = "#" > 00:00:50,860< / a > What is that? Oh, the car, the market. I think< / div >
< div > < a data-start = "77.68" href = "#" > 00:01:17,680< / a > Wind< / div >
< div > < a data-start = "120.6" href = "#" > 00:02:00,600< / a > Wow< / div >
< div > < a data-start = "136.68" href = "#" > 00:02:16,680< / a > Children?< / div >
< / div > < / div >
< / td >
< td >
< div id = "transcriptWrapper3" class = 'sub' >
< h3 > Eugenie< / h3 >
< div id = "transcript3" >
< div > < a data-start = "1.8" href = "#" > 00:00:01,800< / a > Children outside< / div >
< div > < a data-start = "10.76" href = "#" > 00:00:10,760< / a > I think it's outside< / div >
< div > < a data-start = "13.7" href = "#" > 00:00:13,700< / a > Shoes, walking people< / div >
< div > < a data-start = "20.44" href = "#" > 00:00:20,440< / a > Or maybe papers< / div >
< div > < a data-start = "27.48" href = "#" > 00:00:27,480< / a > Music inside< / div >
< div > < a data-start = "31.38" href = "#" > 00:00:31,380< / a > Chilling up< / div >
< div > < a data-start = "53.06" href = "#" > 00:00:53,060< / a > This is outside. It's a troll, it's a bag< / div >
< div > < a data-start = "58.24" href = "#" > 00:00:58,240< / a > Wheels< / div >
< div > < a data-start = "75.7" href = "#" > 00:01:15,700< / a > Water< / div >
< div > < a data-start = "90.9" href = "#" > 00:01:30,900< / a > People in a room. Inside. They are moving, close< / div >
< div > < a data-start = "114.62" href = "#" > 00:01:54,620< / a > It's inside somewhere, somewhere...< / div >
< div > < a data-start = "135.4" href = "#" > 00:02:15,400< / a > Children in a swimming pool< / div >
< / div > < / div >
< / td >
< td >
< div class = 'sub' >
< h3 > Alex< / h3 >
< div > < a data-start = "11.74" href = "#" > 00:00:11,740< / a > Em... I hear... It sounds like walking and it's quite windy outside< / div >
< div > < a data-start = "18.62" href = "#" > 00:00:18,620< / a > But it sounds like... It's... The microphone is inside or something< / div >
< div > < a data-start = "26.98" href = "#" > 00:00:26,980< / a > It's probably music< / div >
< div > < a data-start = "30.32" href = "#" > 00:00:30,320< / a > From a car maybe or from some radio?< / div >
< div > < a data-start = "37.6" href = "#" > 00:00:37,600< / a > It's outside on the street. I hear some cars in the background< / div >
< div > < a data-start = "48.7" href = "#" > 00:00:48,700< / a > Mmmm... It sounds like gardening sounds< / div >
< div > < a data-start = "54.82" href = "#" > 00:00:54,820< / a > There are people in the background or maybe it's bikes< / div >
< div > < a data-start = "65.84" href = "#" > 00:01:05,840< / a > Oh I hear a bird in the background< / div >
< div > < a data-start = "72.12" href = "#" > 00:01:12,120< / a > A very monotone sound< / div >
< div > < a data-start = "76.74" href = "#" > 00:01:16,740< / a > It's like driving, maybe driving in a car< / div >
< div > < a data-start = "95.12" href = "#" > 00:01:35,120< / a > And some wind around
It seems like outside but there is some noise in the background< / div >
< div > < a data-start = "96.58" href = "#" > 00:01:36,580< / a > It seems like outside but there is some noise in the background< / div >
< div > < a data-start = "106.34" href = "#" > 00:01:46,340< / a > It's outside< / div >
< div > < a data-start = "124.92" href = "#" > 00:02:04,920< / a > Oh, I hear children in the background crying< / div >
< div > < a data-start = "124.94" href = "#" > 00:02:04,940< / a > There is some weird sound in the foreground, which I... It's hard to describe [chuckling]
Oh, I hear children in the background crying< / div >
< div > < a data-start = "128.36" href = "#" > 00:02:08,360< / a > There is some weird sound in the foreground, which I... It's hard to describe [chuckling]< / div >
< div > < a data-start = "134.9" href = "#" > 00:02:14,900< / a > Again it sounds like there is a kindergarten or school nearby< / div >
< / div >
< / td >
< / tr >
< / table >
< table > < tr >
< td >
< div class = 'subB' >
< h3 > Tommi< / h3 >
< div > < a data-start = "12.98" href = "#" > 00:00:12,980< / a > This is some water ** maybe from a fountain< / div >
< div > < a data-start = "61.48" href = "#" > 00:01:01,480< / a > Plates< / div >
< div > < a data-start = "64.44" href = "#" > 00:01:04,440< / a > A bus at stand by at a bus stop< / div >
< div > < a data-start = "70.02" href = "#" > 00:01:10,020< / a > Some people are chatting< / div >
< div > < a data-start = "76.94" href = "#" > 00:01:16,940< / a > Some kids talking talking while they are playing in the sand or something< / div >
< div > < a data-start = "87.94" href = "#" > 00:01:27,940< / a > Two people having a conversation on a street< / div >
< div > < a data-start = "96.28" href = "#" > 00:01:36,280< / a > One of them is walking away [chuckling]< / div >
< div > < a data-start = "102.1" href = "#" > 00:01:42,100< / a > And now a car is passing< / div >
< div > < a data-start = "110.6" href = "#" > 00:01:50,600< / a > It's a construction site< / div >
< div > < a data-start = "113.3" href = "#" > 00:01:53,300< / a > Something is being hammered< / div >
< div > < a data-start = "121.2" href = "#" > 00:02:01,200< / a > Some sports match or something< / div >
< div > < a data-start = "124.16" href = "#" > 00:02:04,160< / a > Everyone is **< / div >
< div > < a data-start = "132.54" href = "#" > 00:02:12,540< / a > Someone is speaking Arabic< / div >
< div > < a data-start = "138.76" href = "#" > 00:02:18,760< / a > To a group of people< / div >
< div > < a data-start = "142.76" href = "#" > 00:02:22,760< / a > It's like a very large voluminous space [chuckling] cause it's echoing a lot< / div >
< div > < a data-start = "156.76" href = "#" > 00:02:36,760< / a > Some people are shouting at something at a distance< / div >
< div > < a data-start = "163.76" href = "#" > 00:02:43,760< / a > It sounds like in a courtyard< / div >
< div > < a data-start = "166.54" href = "#" > 00:02:46,540< / a > A baby crying< / div >
< / div >
< / td >
< td >
< div class = 'subB' >
< h3 > Alex< / h3 >
< div > < a data-start = "7.82" href = "#" > 00:00:07,820< / a > There is teenagers nearby and it's walking< / div >
< div > < a data-start = "11.7" href = "#" > 00:00:11,700< / a > Oh, there is water< / div >
< div > < a data-start = "15.24" href = "#" > 00:00:15,240< / a > That's running< / div >
< div > < a data-start = "20.66" href = "#" > 00:00:20,660< / a > Outside probably< / div >
< div > < a data-start = "28.88" href = "#" > 00:00:28,880< / a > Oh, that's... It sounds like there is something clapping or like hitting against a surface< / div >
< div > < a data-start = "38.52" href = "#" > 00:00:38,520< / a > And it's very repetitive sound< / div >
< div > < a data-start = "46.6" href = "#" > 00:00:46,600< / a > Oh, I can hear some, some radio or some music or broadcast< / div >
< div > < a data-start = "60.2" href = "#" > 00:01:00,200< / a > That was too short. I don't know [chuckling]< / div >
< div > < a data-start = "64.44" href = "#" > 00:01:04,440< / a > Oh, it's quite loud. It's... Maybe it's in some kind of transport< / div >
< div > < a data-start = "76.22" href = "#" > 00:01:16,220< / a > Oh, there is a child speaking< / div >
< div > < a data-start = "85.74" href = "#" > 00:01:25,740< / a > There are people talking outside... In a foreign language< / div >
< div > < a data-start = "96.28" href = "#" > 00:01:36,280< / a > It's not Dutch and there is some wind< / div >
< div > < a data-start = "102.32" href = "#" > 00:01:42,320< / a > There are more people talking< / div >
< div > < a data-start = "112.76" href = "#" > 00:01:52,760< / a > Oh, there is sounds like there are construction works< / div >
< div > < a data-start = "116.72" href = "#" > 00:01:56,720< / a > Or hammering< / div >
< div > < a data-start = "120.92" href = "#" > 00:02:00,920< / a > Oh, it's very loud. Oh [chuckling], it's applause or... a crowd of people. I don't know [chuckling]< / div >
< div > < a data-start = "132.06" href = "#" > 00:02:12,060< / a > It's inside. It sounds like a hallway... I don't know. Like inside< / div >
< div > < a data-start = "138.26" href = "#" > 00:02:18,260< / a > Because I hear some echoing< / div >
< div > < a data-start = "142.56" href = "#" > 00:02:22,560< / a > Ot it's inside a tunnel, where people are passing by< / div >
< div > < a data-start = "158.2" href = "#" > 00:02:38,200< / a > It sounds like near some street outside and I hear some kids in the background< / div >
< div > < a data-start = "166.6" href = "#" > 00:02:46,600< / a > Again, there is a child screaming or crying< / div >
< / div >
< / td >
< / tr >
< / table >
< script >
var a1 = document.getElementById("a1"),
a2 = document.getElementById("a2"),
but = document.getElementById("but");
but.addEventListener("click", function () {
if (a1.paused) {
a1.play();
a2.play();
a3.play();
a4.play();
} else {
a1.pause();
a2.pause();
a3.pause();
a4.pause();
}
})
a1.addEventListener("play", function(){
but.innerHTML="pause"
})
a1.addEventListener("pause", function(){
but.innerHTML="listen"
})
var links=document.querySelectorAll("div.sub a")
for (var i=0, l=links.length; i< l ; i + + ) {
var a = links[i];
a.addEventListener("click", function(e) {
console.log("CLICK", this);
var t=parseFloat(this.getAttribute("data-start"))
a1.currentTime=t
a2.currentTime=t
a3.currentTime=t
a4.currentTime=t
e.preventDefault()
a1.play();
a2.play();
a3.play();
a4.play();
})
}
var interrupt = document.getElementById("interrupt");
butI = document.getElementById("butI");
butI.addEventListener("click", function () {
if (interrupt.paused) {
b1.pause();
b2.pause();
b3.pause();
a1.pause();
a2.pause();
a3.pause();
a4.pause();
interrupt.play();
} else {
interrupt.pause();
a1.play();
a2.play();
a3.play();
a4.play();
b1.play();
b2.play();
b3.play();
}
})
interrupt.addEventListener("play", function(){
butI.innerHTML="stop interrupt"
})
interrupt.addEventListener("pause", function(){
butI.innerHTML="interrupt"
})
< / script >
< script >
var b1 = document.getElementById("b1"),
b2 = document.getElementById("b2"),
butB = document.getElementById("butB");
butB.addEventListener("click", function () {
if (b1.paused) {
b1.play();
b2.play();
b3.play();
} else {
b1.pause();
b2.pause();
b3.pause();
}
})
b1.addEventListener("play", function(){
butB.innerHTML="pause"
})
b1.addEventListener("pause", function(){
butB.innerHTML="listen"
})
var links=document.querySelectorAll("div.subB a")
for (var i=0, l=links.length; i< l ; i + + ) {
var b = links[i];
b.addEventListener("click", function(e) {
console.log("CLICK", this);
var t=parseFloat(this.getAttribute("data-start"))
b1.currentTime=t
b2.currentTime=t
b3.currentTime=t
e.preventDefault()
b1.play();
b2.play();
b3.play();
})
}
< / script >
< script >
var dialogueTimings = [0,8,16,28,33,50,77,120,136],
dialogues = document.querySelectorAll('#transcript>div'),
transcriptWrapper = document.querySelector('#transcriptWrapper'),
audio = document.querySelector('#a2'),
previousDialogueTime = -1;
function playTranscript() {
var currentDialogueTime = Math.max.apply(Math, dialogueTimings.filter(function(v){return v < = audio.currentTime}));
if(previousDialogueTime !== currentDialogueTime) {
previousDialogueTime = currentDialogueTime;
var currentDialogue = dialogues[dialogueTimings.indexOf(currentDialogueTime)];
transcriptWrapper.scrollTop = currentDialogue.offsetTop - 50;
var previousDialogue = document.getElementsByClassName('speaking')[0];
if(previousDialogue !== undefined)
previousDialogue.className = previousDialogue.className.replace('speaking','');
currentDialogue.className +=' speaking';
}
}
;
var dialogueTimings3 = [1,10,13,20,27,31,53,58,135],
dialogues3 = document.querySelectorAll('#transcript3>div'),
transcriptWrapper3 = document.querySelector('#transcriptWrapper3'),
audio = document.querySelector('#a3'),
previousDialogueTime = -1;
function playTranscript3() {
var currentDialogueTime = Math.max.apply(Math, dialogueTimings3.filter(function(v){return v < = audio.currentTime}));
if(previousDialogueTime !== currentDialogueTime) {
previousDialogueTime = currentDialogueTime;
var currentDialogue = dialogues3[dialogueTimings3.indexOf(currentDialogueTime)];
transcriptWrapper3.scrollTop = currentDialogue.offsetTop - 50;
var previousDialogue = document.getElementsByClassName('speaking3')[0];
if(previousDialogue !== undefined)
previousDialogue.className = previousDialogue.className.replace('speaking3','');
currentDialogue.className +=' speaking3';
}
}
;
< / script >
< img src = "images/soundwalk-photo1.jpg" style = "float:center;" width = "300px" > < / img >
< img src = "images/soundwalk-photo3.jpg" style = "float:center;" width = "300px" > < / img >
< / body >
