User:Angeliki/Feedback Composition: Difference between revisions
No edit summary |
|||
| Line 16: | Line 16: | ||
== Example of html with annotative recordings == | == Example of html with annotative recordings == | ||
<syntaxhighlight lang="python" line='line'> | <syntaxhighlight lang="python" line='line'> | ||
<style type="text/css"> | <style type="text/css"> | ||
| Line 62: | Line 29: | ||
<h2>Feedback composition</h2> | <h2>Feedback composition</h2> | ||
</section> | </section> | ||
<div> | <div> | ||
<audio style="width: 100%; background: #222;" id="a1" controls src="description-lidia-CUT.mp3"></audio> | <audio style="width: 100%; background: #222;" id="a1" controls src="description-lidia-CUT.mp3"></audio> | ||
| Line 154: | Line 123: | ||
</body> | </body> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Revision as of 21:01, 27 March 2019
Convert transcriptions to linkable html
import pysrt, argparse
ap = argparse.ArgumentParser("srttojs")
ap.add_argument("srt")
args = ap.parse_args()
srt= pysrt.open(args.srt)
print("<div class='sub'>")
for t in srt:
print ('<div><a data-start="{1}" href="#">{0}</a> {2}</div>'.format(t.start, t.start.ordinal/1000.0, t.text))
print ("</div>")
Example of html with annotative recordings
<style type="text/css">
body {font-family: "Old Standard TT"; font-size: 20px; line-height: 1.4; letter-spacing: 1px;}
h2 {font-size: 24px;}
section {margin-bottom: 50px;}
table, th, td {vertical-align: top; border-collapse: separate; padding: 6px;}
button {width: 100px;}
</style>
<body>
<section>
<h2>Feedback composition</h2>
</section>
<div>
<audio style="width: 100%; background: #222;" id="a1" controls src="description-lidia-CUT.mp3"></audio>
<audio style="width: 100%; background: #222;" id="a2" controls src="selection-track-extracts-1.mp3"></audio>
<audio style="width: 100%; background: #222;" id="a3" controls src="description-eugenie-CUT-SHORT.mp3"></audio>
<button id="b">listen</button>
</div>
<table> <tr>
<td>
<div class='sub'>
<h3>Lidia</h3>
<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>
</td>
<td>
<div class='sub'>
<h3>Eugenie</h3>
<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>
</td>
</tr>
</table>
<img src="images/soundwalk-photo1.jpg" width="500px"></img>
<img src="images/soundwalk-photo3.jpg" width="500px"></img>
<script>
var a1 = document.getElementById("a1"),
a2 = document.getElementById("a2"),
b = document.getElementById("b");
b.addEventListener("click", function () {
if (a1.paused) {
a1.play();
a2.play();
a3.play();
} else {
a1.pause();
a2.pause();
a3.pause();
}
})
a1.addEventListener("play", function(){
b.innerHTML="pause"
})
a1.addEventListener("pause", function(){
b.innerHTML="play"
})
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
e.preventDefault()
a1.play();
a2.play();
a3.play();
})
}
</script>
</body>