Generated by XState Viz: https://xstate.js.org/viz

machine.js

// https://xstate.js.org/viz/?gist=917b7d0c4992306057067c08166fdb7d

const playingEffect = actions.assign(
  ctx => ({
    pos: ctx.pos + 1
  })
);

const forwardingEffect = actions.assign(
  ctx => ({
    pos: ctx.pos + (10 - ctx.pos % 10)
  })
);

const rewindingEffect = actions.assign(
  ctx => ({
    pos: ctx.pos - (ctx.pos % 10 || 10)
  })
);

const machine = Machine(
    {
      id: "tape player",
      initial: "stopped",
      context: {
        pos: 0
      },
      states: {
        rewinding: {
          onEntry: ["rewindingEffect"],
          after: {
            500: [
              {
                target: "rewinding",
                cond: ctx => ctx.pos > 0
              },
              {
                target: "stopped"
              }
            ]
          },
          on: { STOP: "stopped" }
        },
        stopped: {
          on: {
            PLAY: { target: "playing" },
            FORWARD: "forwarding",
            REWIND: "rewinding"
          }
        },
        playing: {
          onEntry: ["playingEffect"],
          after: {
            500: [
              {
                target: "playing",
                cond: ctx => ctx.pos < 100
              },
              {
                target: "stopped"
              }
            ]
          },
          on: {
            FORWARD: "forwarding",
            STOP: "stopped"
          }
        },
        forwarding: {
          onEntry: ["forwardingEffect"],
          after: {
            500: [
              {
                target: "forwarding",
                cond: ctx => ctx.pos < 100
              },
              { target: "stopped" }
            ]
          },
          on: { PLAY: "playing", STOP: "stopped" }
        }
      }
    },
    {
      actions: {
        playingEffect,
        forwardingEffect,
        rewindingEffect
      }
    }
  )