an app and ecosystem for dramatic performance

A: Design Notes
B: Implementation content.

C: First app bits

Design Notes

PlayAlong is an imagined web app and ecosystem for group drama reading, dramatic role-playing, and practice for actors. Around a campfire, at a table together, or remotely in different parts of the country or world, a group of players will be able, through this app on their networked devices, to self-organize into a group, select a play, download or share it to each one's device, connect their devices to work together, assign speaking parts, and verbally perform the lines of the play one after the other in real time with each other, recorded for family, friends, and acting-coach feedback.

The speaker whose turn it is will see some visual indications of progress such as a bouncing ball or a "Your Turn Now" visual element or text-window scroll event triggered by another participant or automatically following the speaker's actual voice.

As a practice tool for dramatic acting, PlayAlong is perfect.

As a literacy-development tool, PlayAlong is exceptional. The speaker, him or herself, who may or may not be able to read, can be prompted by audio prompts in their earphones. Both speaker and audience will be able to follow along in the text so as to track both audio and text, which is a great way to learn reading, if you don't already know. It is also beautifully gentle and unassuming method since noone needs to know you can't read while you are going along with it. It also adds all the motivation of social participation to the task of reading better and better.

As a personal growth tool that approximates public speaking, PlayAlong is also great. Everyone knows what they are to do, does it on time, and contributes to the artistic experience of everyone else. Mutual appreciation is assured and real.

Connection between participants is enhanced; we are making art together.

The social skills exemplified in the spoken words of the drama are learned to a degree; whether insult or praise, informational or emotional, the words in a drama have been written into it after inspiration, second and third thoughts, and much editorial review, so they have the potential to bring quality educational content implicitly to participants.

By playing a role in Shakespeare, you learn a good part of being a human means.

PlayAlong aims to bring this kind of experience to everyone.

Implementation Content

The primary software idea here is for a PlayAlong app used to participate in a PlayAlong event. But there will also need be a supporting context of related apps (e.g., editing methods & tools, format interconversion, digital rights management), databases (users, plays, recordings, comments), workflow, and economy of human creatives as well as user quality ratings, likes and chats, external and internal advertising, etc. within which a single PlayAlong event is selected, organized, supported, and made the most of.

The PlayAlong event requires:

  • User account creation, email confirmation, login
  • Play selection process including on day one a menu of one or two items, but in future a search and filter system, a display of search results system, a crowd-sourced recommendation system, etc.
  • Play Enrollment: Each participant to sign up for a play individually or as a result of an invite-only group for which a play has been selected.
  • Part Assignment: Assign/Choose role R in play P; Role Trade Request/Accept.
  • Pre-Start: check:
    • All roles are taken
    • All missing roles have pre-recorded audio to play for their turns.
    • All participants registered and have the download and are ready.
  • Start: sync all participants.
  • LOOP: Prepare for New Turn: Assign line L, role R, participant P, prev, next.
  • Do This Turn:
    • Dehighlight previous if any; highlight this turn; display turn's text (on all displays)
    • Indicate P's name and role as Current speaker.
    • Be sure their content is visible to them.
    • Play audio-prompt for P to listen to.
    • Prompt role's player P to start.
    • Record P's audio to share with others. (remote mode only)
    • Transfer audio to each audience member. (remote mode only)
    • Track P's speech until complete (future version: with speech rec or pause detection)
    • Await Go To Next event (as a click from anyone or as something else)
    • If Not Done, GOTO LOOP.
Future Context Apps and Support:
  • Editing support. File format for a compatible play event.
  • Turn-by-turn recording storage format; database form; cloud infrastructure.
  • In future a media addition process including submit, check valid and reject or accept, add to the menu or the database.
  • In future an economy of authors getting something for their work.
  • In future subscriptions for groups. Chats. Share links, DRM checks, and replay process.
  • In future etc etc etc.
All that is too much to start with. To start, just a menu of one or two items, each manually entered into the system.

First app contents:

  • Header: PlayAlong brand display, maybe the Tom Veatch Sprex/Logos Logo, then MediaTitle UserName User RoleSet

  • Pages: Register, Login, ChooseMedia, ShareMedia, PlayAlong.

  • The PlayAlong page has the document loaded, and the other participants connected somehow.

  • peer.js might be the way to connect. One person or server might have to run a Peer Server for others to connect to.


           1) % npm i peerjs
           2) % npm i -g peer
    each   3) React app.
    each   4) js: state = { myId:'', friendId:'', peer:{}, message:'',messages:[] }
    each   5) js: const peer = new Peer(myName, { host:'localhost',port:'3001',path:'/' })
    2nd    6) js: peer.on('open',       (id)   => { this.setState({ myId:id, peer:peer }); });
    rcvr   7) js: peer.on('connection', (conn) => {
                        conn.on('data', (data) => {
    sndr   8) js: send = () => {
                    const conn = this.state.peer.connect(this.state.friendId);
                    conn.on('open', () => {
    		    const MsgObj = { sender:this.state.myId, message: this.state.message };
                        this.setState({messages:[...this.state.messages,msgObj], message:'' });
    video  9) js: peer.on('call', (call) => {
                    var getUserMedia = navigator.getUserMedia
    		                || navigator.webkitGetUserMedia
    		                || navigator.mozGetUserMedia;
                    getUserMedia({ video: true, audio: true }, (stream) => {
    		   this.myVideo.srcObject = stream; ;
    		   call.on('stream', (remoteStream) => {
    		     this.friendVideo.srcObject = remoteStream; 
    		}, err => { console.log('Error!') });
    JSX  10) js: return ( 

    My ID: {this.state.myId}

    { this.setState({ friendId: });}} />

    { this.setState({ message: }); } } /> { (message,i) => { return (


    { message: message }

    ) }); }
    ' );

Your thoughts?
(will not be shared or abused)
                                          Feedback is welcome.
Copyright © 2000-2022, Thomas C. Veatch. All rights reserved.
Modified: June 12, 2020; February 3, 2022.