Skip to content

Instantly share code, notes, and snippets.

@georgeee

georgeee/README.md

Created February 8, 2019 19:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save georgeee/7d74b577beb2dc33e4b64669de85df95 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save georgeee/7d74b577beb2dc33e4b64669de85df95 to your computer and use it in GitHub Desktop.
Download ZIP
Asciinema with sound toolkit
Raw
README.md

File index.html contains web viewer for ascii cast with audio. To launch it, just cd dir where script is unpacked and run some simplest http server from it (e.g. webfsd -p 8080 -F works perfectly), then http://localhost:8080/index.html.

File index.html requires asciinema release files (asciinema-player.css and asciinema-player.js) to be downloaded from asciinema player releases.

Note, it won't work with file:// due to CORS.

Alternatively, one can run ./rec.sh play part1 to view cast from CLI but it won't allow you to control playback.

Also, you can create screencasts with audio with script: ./rec.sh rec myname.

Script rec.sh requires commands asciinema and play (from sox package).

Raw
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="asciinema-player.css" />
</head>
<body>
<div>
<h3>Part I</h3>
<asciinema-player src="part1.cast" id="ascii-part1">
</asciinema-player>
<audio id="audio-part1">
<source src="part1.ogg" type="audio/wav">
</audio>
<span> Speed control (from 0.5x to 5.5x) :
<input type="range" id="speed-part1" min=5 max=55 value=10></input>
<br>
Current speed: <span id="speed-cur-part1">1.0x</div>
</span>
</div>
<script>
function enableStart(name) {
var audio = document.getElementById("audio-" + name);
var ascii = document.getElementById("ascii-" + name);
var player;
function onPauseHandler () {
console.log("paused");
audio.pause();
}
function onPlayHandler (player) {
var currentTime = this.currentTime || (player.getCurrentTime && player.getCurrentTime()) || 0;
console.log("playing at ", currentTime);
audio.currentTime = currentTime;
audio.play();
}
function setRate(rate) {
var time = player ? player.getCurrentTime() : ascii.currentTime;
asciinema.player.js.UnmountPlayer(ascii);
audio.playbackRate = rate;
create(time, rate);
}
function create(time, rate) {
console.log("Creating with start " + time + " and rate " + rate)
player = asciinema.player.js.CreatePlayer(ascii, name + ".cast",
{ speed: rate || 1
, autoPlay: true
, startAt: time
, onPlay: function () { onPlayHandler (player); }
, onPause: onPauseHandler
})
}
var speed = document.getElementById("speed-" + name);
var speedCur = document.getElementById("speed-cur-" + name);
speed.addEventListener('change', function(e) {
var sp = this.valueAsNumber / 10;
console.log("setting speed " + sp + "x");
speedCur.innerHTML = sp + "x";
setRate(sp);
})
ascii.addEventListener('play', onPlayHandler)
ascii.addEventListener('pause', onPauseHandler)
}
enableStart("part1")
</script>
<script src="asciinema-player.js"></script>
</body>
</html>
Raw
rec.sh
#!/usr/bin/env bash
f="$2" # File name
case "$1" in
rec)
if [[ -f "$f.ogg" ]]; then
echo "File $f.ogg exists"
exit
fi
if [[ -f "$f.cast" ]]; then
echo "File $f.cast exists"
exit
fi
rec -q -c 2 "$f.ogg" &
pid="$!"
asciinema rec -t "$3" "$f.cast"
kill $pid
;;
play)
play -q "$f.ogg" &
pid="$!"
asciinema play "$f.cast"
kill $pid
;;
esac
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment