A pure HTML5 web app for cueing audio, video, images and HTML for stage performance.
Only tested on Chrome v40. HTML5 features like AudioContext API, FileSystem API and Media Element are used.
Demo: http://sam0737.github.io/ShowCueWeb/
This webapp was created for my one-off show performance, it might or might not fit your needs. And I don't plan on maintaining it, but I hope it serve as a resource for learning the power of HTML5 nevertheless. Feel free to fork the project as you see fit.
Configuration data are stored locally in HTML5 File System Storage. Media files are merely referenced but not stored in any storage.
The web server side is totally static. But even if running locally, you will need to setup a local web server and serve it over http://localhost instead of files://..., because of complicated permission issue.
- Drag a workspace folder containing some audio files (mp3, m4a, mp4, ogg, etc)
- Click "Add+" to add some audio files into the library (left pane).
- Single click the audio file in the libary to insert a audio cue (right pane).
- Press space to GO and get the audio playing
- Press ESC to stop
Configure are automatically saved in the Local Filesystem, and load automatically. Optionally it could be downloaded for backup purposes (Button on the navbar), and if the workspace contains "config.js", it will be used instead.
- Double click the channel name (the header of the cue list), add a screen and configure accordingly
- Position the popup screen accordingly (maybe to a projector screen and F11 to full-screen if needed)
- Now you could cue ogv, webm, png, gif, jpg and html files.
Channel and cue description could be changed by single clicking on the text.
By default, only one cue will be played upon GO. Several cues could go together, press Enter or double click the cue media item to config the Go Mode accordingly.
By default, playing a cue will stop/remove the previous playing cue in the same channel. Unless the previous cue were checked with "Allow Overlap?".
Several more configurations are self explanatory
- delay (in seconds)
- gain (1 for normal)
- range and offset (in seconds)
Fading in the middle could be controlled by audio control cue.
Style could be supplied in the video/image/html and Visual Control Cue item, which is very useful for animation control.
For example:
#$ID$ { animation: $ID$ 3s linear both; }
@keyframes $ID$ { from {opacity: 1;} to {opacity: 0;} }
would fade an element away in 3s.
Similarily, positional keyframes could be used for animation.
Check "Listen AnimationEnd as ending signal." and "At the end, kill active clip." to prevent hidden HTML elements from accumulating.
Javascript could also be supplied in Visual Control Cue. JQuery and AngularJS are available. If it returns a promise(), that promise resolution will be used for ending signal.
In video/image/html cue item, the postiion could be specified in the format of http://jqueryui.com/position/. Syntax like this could be used:
My: center top+30
At: left+20% center
The size of Image/Video are determined automically - for HTML element the width and height must be specified.
A transform style could be set in the channel > screen configure to accomodate actual screen layout - like scale(0.5)
There is no way to reference any midea file in HTML element. Though, you could use an inline data URL to include the data inline instead.
The data URL could be generated by dragging any file to the navbar "Drop to convert to Data URL".
- Space - Go
- ESC - Stop / Blackout
- Ctrl+Up - Move to previous cue
- Ctrl+Down - Move to next cue
- Ctrl+Shift+Up - Shift up the current cue.
- Ctrl+Shift+Down - Shift down the current cue
- Double Click on the cue description - Jump to cue
- Enter / Double click on the cue media item - Cue configuration
- Drag the cue media item left or right - move it to another channel
Pay attention to the Javascript console for any faliure messages if it's not acting as expected.
- Library Preview only works on audio file.
- Audio range modal dialog will be closed unexpectedly when the drag is released outside the dialog.
The MIT License (MIT)
Copyright (c) 2015 Sam Wong
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.