There are a number of excellent programs available for running sound for a live theatrical show, e.g. Qlab for Mac and SFX for Windows. These programs are industry standards and can truly make your life easier when creating a sound script for a live performance. Generally speaking, they provide fine control over a sound plot and automate many playback functions. They are well worth their licensing fees.
As good as they are, these programs are platform-specific. They only work on specific operating systems and are generally not transferable. Also, not all theatrical organizations can AFFORD the proprietary options, or may wish a backup that works on another platform. A "free" option is a web page written in HTML5 using very basic coding and the AUDIO element. A fairly simple HTML page can provide the sound operator (using a web browser) with a simple way to play recorded sound effects on cue during a performance using a web page interface.
An advantage to using a browser to run sound cues is that the method works on most every platform in almost every browser. A disadvantage is that all controls are manual. Each cue must be triggered individually. Each cue will play at full volume, so gain must be controlled externally with a mixer. A cue can not trigger another effect, so playlists aren't possible using just basic HTML. Note that some of these limitations can be overcome using JavaScript, but that is beyond the scope of this tutorial.
Another disadvantage: all edits to the cue sheet must be made and saved in the external plain-text editor, and then refreshed in the browser to take effect.
Let's start with a basic HTML file. An HTML page is really just a plain-text file that is interpreted by a browser to display entities, called 'elements', on a web page. Elements are containers with content inside. Elements are identified with Tags, simple labels that tell a browser to display the contents of the element in a certain way. For example, a Header element is identified by a header tag <h1>, <h2>, <h3>, etc. The browser to display the contents with the Header format, h1 being largest, h2 smaller, h3 smaller yet, etc. Similarly, a paragraph tag, <p> tells the browser to display the contents as a paragraph with standard format for any text. Paragraphs by default are displayed with a space between it and surrounding containers. Tags must also be closed. A closing tag is similar to the opening tag, with a slash added. A paragraph <p> is closed with a </p> tag. A few tags, like Image and Source tags are self-closing.
Pages follow a basic structure. The entire page is contained within HTML tags. Between the HTML tags are HEAD and BODY tags. The HEAD contains information about the page that does not appear directly on the web page e.g. a page title. The BODY contains content that does appear on the page, such as Headers, Paragraphs of text, Images, etc.
The AUDIO tag is a relatively new element. Using this tag, an audio player can be added to a web page to play a particular sound file. Add several players and you have effectively created a cue sheet that lets you trigger each cue with a mouse click. You can even play overlapping sounds to create a layered effect.
Modern HTML5 browsers have the ability to play play sound file using pretty simple code. The basic player source code looks like this:
<p>
<audio controls="controls">
<source src="crickets.ogg" />
<source src="crickets.mp3" />
</audio>
<br>Crickets
</p>
Most tags require an opening tag when an item begins and a closing tag when it stops. A few tags ads self-closing. This sample audio player uses both.
Explanation: of each line:
<p> Opens a paragraph to contain the audio player. That puts a space before and after the player.<audio controls="controls"> The audio tag opens an audio player in the webpage. The controls option makes the player visible and displays manual controls. Otherwise, the players starts playing when the page opens (all of them simultaneously) and you can't turn them off. Cacophony!<source src="crickets.ogg" />
<source src="crickets.mp3" /> <br> This is a line break tag, a return without a space. "Crickets" is visible on the webpage as a caption.</p> This closes the container paragraph.The basic player will appear on the page using the default styling of the browser, which means it will look slightly different in different browsers. You can change the appearance by adding styling (Wix does this) but that involves using CSS which is advanced stuff.
Crickets
An HTML document begins with a DOCTYPE declaration. In this case the type is "HTML", which identified is as HTML 5, the latest version of htnl and the version capable of playing media, including audio. Next comes the HTML opening tag, which in this case includes a language declarations for English.
<!DOCTYPE html>
<html lang="en">
An HTML document should contain a HEAD section and a BODY section. The Head is not displayed but contains information and instructions about the page. Ours will be very basic. The Style declaration includes just a bit of CSS code to put a thin border around the audio players.
<head>
<title>Audio Cue Sheet</title>
<style>
audio {border: solid black 1px;}
</style>
</head>
Next comes the Body. This Container holds all the content that will be displayed in the webpage plus instructions on formatting the content.
<body>
<h1>HTML5 Sound Cue Sheet</h1>
<h2>Sample sounds</h2>
<p>
<audio controls="controls">
<source src="crickets.mp3" />
<source src="crickets.ogg" />
</audio><br>
Crickets
</p>
Explanation: the Paragraph tag creates a container to hold the audio player. The Audio tag has a control attribute set to display manual controls for the audio player. The sound file to be played is specified with the source tag at a location in the same directory. The source is given in two file formats. As the MP3 file comes first, it will play that file if it can. If the browser cannot play the MP3, it will try to play the next file, the OGG version. The source tag is self-closed with a forward slash. Then the audio tag is closed. The <b> tag causes a line break without creating a new paragraph. Next is a caption for the audio player to be displayed below the control strip, and finally the paragraph is closed.
Then we add another sound file. This time we will not include an OGG version:
<p>
<audio controls="controls">
<source src="dog.mp3" />
</audio><br>
Dog
</p>
Finally, we close the body, and then the HTML page itself.
</body>
</html>
Below is the finished web page without comments (but dispensing with the OGG version). You can copy the code below the asterisk line into a new plain text file. Save it with a .html extension, and substitute your own MP3 files and text. Re-save, and place in the SAME directory as your source sound files, and it should play.
Crickets
Dog
Source code for the above "webpage" would look like this:
*********
<!DOCTYPE html>
<html lang="en">
<head>
<title>Audio Cue Sheet</title>
<style>
audio {border: solid black 1px;}
</style>
</head>
<body>
<h1>HTML5 Sound Cue Sheet</h1>
<h2>Sample Sounds</h2>
<p>
<audio controls="controls">
<source src="crickets.mp3" />
<source src="crickets.ogg" />
</audio><br>
Crickets
</p>
<p><audio controls="controls">
<source src="dog.mp3" />
</audio><br>
Dog
</p>
</body>
</html>
© 2020 Mick Alderson