296 lines
11 KiB
HTML
Executable File
296 lines
11 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
|
<title>Multiplayer Piano</title>
|
|
<meta
|
|
name="description"
|
|
content="An online piano you can play alone or with others in real-time. MIDI support, 88 keys, velocity sensitive. You can show off your skill or chat while listening to others play."
|
|
/>
|
|
<link rel="stylesheet" href="/screen.css" />
|
|
{% if usersConfig.enableTags %}
|
|
<link rel="stylesheet" href="/tags.css" />
|
|
{% endif %} {% if config.topButtons == "mppnet" %}
|
|
<link rel="stylesheet" href="/top-button.css" />
|
|
{% endif %}
|
|
</head>
|
|
<body>
|
|
{% if config.topButtons == "original" %}
|
|
<div id="social">
|
|
<div id="more-button"></div>
|
|
</div>
|
|
{% elif config.topButtons == "mppnet" %}
|
|
<a
|
|
href="https://mpp.community/"
|
|
title="MPPNet Community Forum"
|
|
target="_blank"
|
|
>
|
|
<button
|
|
class="mppcommunity-button icon-button top-button"
|
|
aria-hidden="true"
|
|
>
|
|
<img src="/mppcommunity.ico" style="vertical-align: middle" />
|
|
</button>
|
|
</a>
|
|
<a
|
|
href="https://github.com/mppnet/frontend"
|
|
title="MPPNet Frontend Repo"
|
|
target="_blank"
|
|
>
|
|
<button
|
|
class="github-button icon-button top-button"
|
|
aria-hidden="true"
|
|
>
|
|
<img src="/github.ico" style="vertical-align: middle" />
|
|
</button>
|
|
</a>
|
|
<a
|
|
href="https://www.reddit.com/r/multiplayerpianonet/"
|
|
title="MPPNet Reddit"
|
|
target="_blank"
|
|
>
|
|
<button
|
|
class="reddit-button icon-button top-button"
|
|
aria-hidden="true"
|
|
>
|
|
<img src="/reddit.ico" style="vertical-align: middle" />
|
|
</button>
|
|
</a>
|
|
<a
|
|
href="https://discord.gg/338D2xMufC"
|
|
title="MPPNet Discord"
|
|
target="_blank"
|
|
>
|
|
<button
|
|
class="discord-button icon-button top-button"
|
|
aria-hidden="true"
|
|
>
|
|
<img src="/discord.ico" style="vertical-align: middle" />
|
|
</button>
|
|
</a>
|
|
<a
|
|
href="https://docs.google.com/document/d/1wQvGwQdaI8PuEjSWxKDDThVIoAlCYIxQOyfyi4o6HcM/edit?usp=sharing"
|
|
title="Multiplayer Piano Rules"
|
|
target="_blank"
|
|
>
|
|
<button class="mpp-rules-button top-button" aria-hidden="true">
|
|
Rules
|
|
</button>
|
|
</a>
|
|
{% endif %}
|
|
|
|
<div id="chat">
|
|
<ul></ul>
|
|
<input
|
|
placeholder="You can chat with this thing."
|
|
class="translate"
|
|
maxlength="512"
|
|
/>
|
|
</div>
|
|
|
|
<div id="room-notice"></div>
|
|
|
|
<div id="names"></div>
|
|
|
|
<div id="piano"></div>
|
|
|
|
<div id="cursors"></div>
|
|
|
|
<noscript>
|
|
<center>
|
|
<p>
|
|
Multiplayer Piano is an online, full 88-key piano you can
|
|
play alone or with others in real-time. Plug up your MIDI
|
|
keyboard, MIDI in and out are supported. You should be able
|
|
to hear some seriously talented piano players performing
|
|
here! Join in or just chat and listen.
|
|
</p>
|
|
<p>
|
|
For good performance, Chrome is highly recommended. Firefox
|
|
also supports the requisite Web Audio API, but performance
|
|
may not be as good. Chrome has Web MIDI.
|
|
</p>
|
|
<p>
|
|
Of course, first you need to
|
|
<a href="http://www.enable-javascript.com/" class="link"
|
|
>Enable Javascript</a
|
|
>
|
|
or it won't do anything...!
|
|
</p>
|
|
</center>
|
|
</noscript>
|
|
|
|
<div id="bottom">
|
|
<div class="relative">
|
|
<div id="room">
|
|
<div class="info"></div>
|
|
<div class="expand"></div>
|
|
<div class="more">
|
|
<div class="new translate">New Room...</div>
|
|
</div>
|
|
</div>
|
|
<div id="new-room-btn" class="ugly-button translate">
|
|
New Room...
|
|
</div>
|
|
<div id="play-alone-btn" class="ugly-button">Play Alone</div>
|
|
<div id="room-settings-btn" class="ugly-button">
|
|
Room Settings
|
|
</div>
|
|
<div id="midi-btn" class="ugly-button translate">
|
|
MIDI In/Out
|
|
</div>
|
|
<div id="record-btn" class="ugly-button translate">
|
|
Record MP3
|
|
</div>
|
|
<div id="synth-btn" class="ugly-button translate">Synth</div>
|
|
<div id="sound-btn" class="ugly-button sound-btn">
|
|
Sound Select
|
|
</div>
|
|
<div id="status"></div>
|
|
<div id="volume">
|
|
<input
|
|
type="range"
|
|
id="volume-slider"
|
|
min="0.0"
|
|
max="1.0"
|
|
step="0.01"
|
|
/>
|
|
</div>
|
|
<div id="volume-label">volume</div>
|
|
<div id="quota">
|
|
<div class="value"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="modal">
|
|
<div class="bg"></div>
|
|
<div id="modals">
|
|
<div id="sound-warning" class="dialog">
|
|
<p>
|
|
This site makes a lot of sound! You may want to adjust
|
|
the volume before continuing.
|
|
</p>
|
|
<button class="submit">PLAY</button>
|
|
</div>
|
|
<div id="new-room" class="dialog">
|
|
<p>
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
placeholder="room name"
|
|
class="text translate"
|
|
maxlength="512"
|
|
/>
|
|
</p>
|
|
<p>
|
|
<label
|
|
><input
|
|
type="checkbox"
|
|
name="visible"
|
|
class="checkbox translate"
|
|
checked
|
|
/>Visible (open to everyone)</label
|
|
>
|
|
</p>
|
|
<button class="submit">go</button>
|
|
</div>
|
|
<div id="room-settings" class="dialog">
|
|
<div class="ugly-button drop-crown">Drop crown</div>
|
|
<p>
|
|
<label
|
|
><input
|
|
type="checkbox"
|
|
name="visible"
|
|
class="checkbox translate"
|
|
checked
|
|
/>Visible (open to everyone)</label
|
|
>
|
|
</p>
|
|
<p>
|
|
<label
|
|
><input
|
|
type="checkbox"
|
|
name="chat"
|
|
class="checkbox translate"
|
|
checked
|
|
/>Enable Chat</label
|
|
>
|
|
</p>
|
|
<p>
|
|
<label
|
|
><input
|
|
type="checkbox"
|
|
name="crownsolo"
|
|
class="checkbox"
|
|
/>Only Owner can Play</label
|
|
>
|
|
</p>
|
|
<button class="submit">APPLY</button>
|
|
<p>
|
|
<label
|
|
>Background color: <input
|
|
type="color"
|
|
name="color"
|
|
placeholder=""
|
|
maxlength="7"
|
|
class="color"
|
|
/></label>
|
|
</p>
|
|
</div>
|
|
<div id="rename" class="dialog">
|
|
<p>
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
placeholder="My Fancy New Name"
|
|
maxlength="40"
|
|
class="text"
|
|
/>
|
|
</p>
|
|
{% if usersConfig.enableColorChanging %}
|
|
<p>
|
|
<input
|
|
type="color"
|
|
name="color"
|
|
placeholder=""
|
|
maxlength="7"
|
|
class="color"
|
|
/>
|
|
</p>
|
|
{% endif %}
|
|
<button class="submit">USER SET</button>
|
|
</div>
|
|
<div id="more">
|
|
<div class="header"></div>
|
|
<div class="items"></div>
|
|
<div class="footer">
|
|
Keep looking here for the eventual appearance of a blog,
|
|
help guide, etc. Also there are unofficial
|
|
(community-run)
|
|
<a href="http://www.reddit.com/r/multiplayerpiano"
|
|
>subreddit</a
|
|
>
|
|
and
|
|
<a href="http://www.youtube.com/MultiplayerPiano"
|
|
>youtube</a
|
|
>
|
|
pages. Thanks!
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="config" style="display: none">{{base64config}}</div>
|
|
|
|
<script src="/jquery.min.js"></script>
|
|
<script src="/util.js"></script>
|
|
<script src="/Client.js"></script>
|
|
<script src="/NoteQuota.js"></script>
|
|
<script src="/lame.min.js"></script>
|
|
<script src="/Color.js"></script>
|
|
<!--<script src="/ebsprite.js"></script>-->
|
|
<script src="/script.js"></script>
|
|
</body>
|
|
</html>
|