-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathplayer.html
56 lines (54 loc) · 2.6 KB
/
player.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!--
This jsaSound Code is distributed under LGPL 3
Copyright (C) 2012 National University of Singapore
Inquiries: [email protected]
This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation; either version 3 of the License, or any later version.
This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNULesser General Public License for more details.
You should have received a copy of the GNU General Public License and GNU Lesser General Public License along with this program. If not, see <http://www.gnu.org/licenses/>
-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/player.css">
<title>jsaBard · Player</title>
<meta name="description" content="jsaBard: Interactive Sound Modeling for Storytellers">
<script type="text/javascript">
var jsaHost="/";
var jsaSoundRelHTML = "jsaSound";
</script>
<script type="text/javascript" data-main="scripts/player.js" src="scripts/require.js" ></script>
</head>
<body>
<div class="topContainer">
<h1>jsaBard for Storytelling with Interactive Sound Modeling</h1>
</div>
<hr />
<div class="mainContainer">
<div class="bardDescription">
<p>
This is the jsaBard story player. To use it:
<ol>
<!-- TODO: Put the input elements inside this list: looks neater like that -->
<li>Create a story using the <a href="/author">authoring tool</a>, which lets you load use sounds from the <a href = "http://animatedsoundworks.com/jsaSound/">jsaSound</a> library.
</li>
<li>Load the story below.</li>
<li>Load the <a href="/controller">controller interace</a> on a controlling device. For best results, try using a smartphone as a controller.</li>
</ol>
</p>
</div>
<!-- TODO: Replace this message with an illustrative image -->
<div class="notice">
<h2> Always push the <FONT COLOR="#cc0066"> ALLOW </FONT> button(s) (above) to enable microphone.</h2>
</div>
<div id="storySelector">
<p>1. Enter the name of a previously authored story and press Load:</p>
<input class="textInput" id="storyName" type="text" placeholder="Story name" autofocus />
<button id="loadStory">Load</button>
</div>
<div hidden id="partySelector">
<!-- TODO: Maybe add generated QR Code later -->
<p>2. Type this 9-letter code in your controller to play:</p>
<p id="partyName" class="activeText">loading...</p>
</div>
</div>
</body>
</html>