# Ignore isMuted, volume, positionMillis, rate, etc. for now

SketchSystems.spec

# Ignore isMuted, volume, positionMillis, rate, etc. for now
Audio Player*

  Unloaded*
    # Call Audio.Sound.createAsync()
    # Should start getting status updates
    load -> Loading

  Loading
    # e.g. navigate away, need to clean up
    unload -> Unloaded

    # Receive { isLoaded: false }
    loadingFailed -> Error

    # Receive { shouldPlay: false }
    shouldNotPlay -> Stopped

    # Receive { isBuffering: true }
    isBuffering -> Buffering

    # Receive { isPlaying: true }
    # Should keep track of the position
    isPlaying -> Playing

    # Receive { didJustFinish: true }
    # Send { shouldPlay: false, positionMillis: 0 }
    didJustFinish -> Stopped
    
  Stopped
    # User presses "Play"
    # Send { shouldPlay: true }
    # Wait for the status update to change to Playing
    play -> Stopped

    isBuffering -> Buffering
    isPlaying -> Playing
    unload -> Unloaded

    # Maybe we were right near the end when the user pressed "Play"
    # so playback ended before we got any other status updates
    didJustFinish -> Stopped

  # Like Stopped, but we need a distinct state to show the buttons correctly
  Paused
    play -> Paused
    unload -> Unloaded

    isBuffering -> Buffering
    isPlaying -> Playing
    didJustFinish -> Stopped

  Buffering
    # User pressed "Pause"
    # Send { shouldPlay: false }
    pause -> Buffering

    # User pressed "Stop"
    # Send { shouldPlay: false, positionMillis: 0 }
    stop -> Buffering

    unload -> Unloaded

    shouldNotPlay -> Paused
    isPlaying -> Playing

    # Send { shouldPlay: false, positionMillis: 0 }
    didJustFinish -> Stopped

  # Similar to Buffering
  Playing
    pause -> Playing
    stop -> Playing
    unload -> Unloaded

    shouldNotPlay -> Paused
    isBuffering -> Buffering
    didJustFinish -> Stopped

Error

SketchSystems_prototype.js

function render(model){
  let current_state_name = model.active_states[0].name;
  return $("h1",
           {style: {color: "darkBlue"}},
           `The current state is: ${current_state_name}`);
}