georgeee/README.md

## README.md

      
    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).

  
## 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>

## 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
	<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>
	#!/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