2021-05-24 18:30:16 +02:00
<!DOCTYPE html>
< html >
2024-10-23 08:26:52 +02:00
< 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" / >
2024-10-24 09:09:41 +02:00
{% if usersConfig.enableTags %}
< link rel = "stylesheet" href = "/tags.css" / >
{% endif %} {% if config.topButtons == "mppnet" %}
< link rel = "stylesheet" href = "/top-button.css" / >
{% endif %}
2024-10-23 08:26:52 +02:00
< / head >
< body >
2024-10-24 09:09:41 +02:00
{% if config.topButtons == "original" %}
2024-10-23 08:26:52 +02:00
< div id = "social" >
< div id = "more-button" > < / div >
< / div >
2024-10-24 09:09:41 +02:00
{% 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 %}
2021-05-24 18:30:16 +02:00
2024-10-23 08:26:52 +02:00
< div id = "chat" >
< ul > < / ul >
< input
placeholder="You can chat with this thing."
class="translate"
maxlength="512"
/>
< / div >
2021-05-24 18:30:16 +02:00
2024-10-23 08:26:52 +02:00
< div id = "room-notice" > < / div >
2021-05-24 18:30:16 +02:00
2024-10-23 08:26:52 +02:00
< div id = "names" > < / div >
2021-05-24 18:30:16 +02:00
2024-10-23 08:26:52 +02:00
< div id = "piano" > < / div >
2021-05-24 18:30:16 +02:00
2024-10-23 08:26:52 +02:00
< div id = "cursors" > < / div >
2021-05-24 18:30:16 +02:00
2024-10-23 08:26:52 +02:00
< 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 >
2021-05-24 18:30:16 +02:00
2024-10-23 08:26:52 +02:00
< 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 >
2021-05-24 18:30:16 +02:00
2024-10-23 08:26:52 +02:00
< 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 >
2021-05-24 18:30:16 +02:00
2024-10-23 08:26:52 +02:00
< div id = "config" style = "display: none" > {{base64config}}< / div >
2021-05-24 18:30:16 +02:00
2024-10-23 08:26:52 +02:00
< 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 >
2021-05-24 18:30:16 +02:00
< / html >
