File size: 2,853 Bytes
9c8c89a
 
 
 
 
 
bae70b4
d6ade35
4b3360a
 
bae70b4
 
 
9c8c89a
d6ade35
c6064ad
9c8c89a
 
 
a9d5892
deb197e
ef0377b
 
a9d5892
deb197e
ef0377b
9c8c89a
9618536
3d6dcf5
64fb01f
eef1266
3d6dcf5
 
 
 
 
64fb01f
629f772
 
 
 
 
 
3d6dcf5
 
9c8c89a
db081f4
 
 
5fadb14
 
db081f4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9c8c89a
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
<head>
  <!-- Metadata -->
  <meta charset="utf-8">
  <title>¿Title?</title>

  <!-- Bootstrap CSS files-->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">  
  
  <!-- Google web fonts -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,500,500i,600" rel="stylesheet">
  
  <!-- Personal styles -->
  <link rel="stylesheet" href="./css/main.css">
</head>

<body>
<audio controls id="speakera" width="360"> 
  <source src="https://huggingface.co/spaces/clr/prosaln/resolve/main/full_conversations/0f2c315c-affa-4552-9f36-f6b3bbac49d4/speaker_a_convo_0f2c315c-affa-4552-9f36-f6b3bbac49d4.wav"> 
</audio>

<audio controls id="speakerb" width="360"> 
  <source src="https://huggingface.co/spaces/clr/prosaln/resolve/main/full_conversations/0f2c315c-affa-4552-9f36-f6b3bbac49d4/speaker_b_convo_0f2c315c-affa-4552-9f36-f6b3bbac49d4.wav"> 
</audio>

<ul id="convo-list">
  <li class="row">
    <div class="text"><span name="utterance" beg="124000" end="133000"><span class="movcontrol"></span> line one longer longer 
      </span></div>
  </li><li class="row">
    <div class="text"><p>line two</p></div>
  </li><li class="row">
    <div class="text"><p>line three</p></div>
  </li><li class="row">
    <div class="text"><span name="utterance" beg="244000" end="255000">line four <span class="movcontrol"></span></span></div>
  </li><li class="row">
    <div class="text"><p>line 5</p></div>
  </li><li class="row">
    <div class="text"><p>line six shouls also be quite long i suppose</p></div>
  </li><li class="row">
    <div class="text"><p>line seven as well can get long</p></div>
  </li>
</ul>


<audio id="sample" src="./full_conversations/b107d272-73c7-45d2-af9e-9ded79697fd3/speaker_a_convo_b107d272-73c7-45d2-af9e-9ded79697fd3.wav" controls preload></audio>

<a href="javascript:playSegment(0, 13);">Play1</a>
<a href="javascript:playSegment(130, 140);">Play2</a>

<script>
var audio = document.getElementById('sample');
var segmentEnd;

audio.addEventListener('timeupdate', function (){
    if (segmentEnd && audio.currentTime >= segmentEnd) {
        audio.pause();
    }   
    console.log(audio.currentTime);
}, false);

function playSegment(startTime, endTime){
    segmentEnd = endTime;
    audio.currentTime = startTime;
    audio.play();
}
</script>

<!--<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script type="text/javascript" src="./js/js.php"></script>-->
</body>
</html>