html5bytebeat.html

﻿<!--
 * Copyright 2012, Gregg Tavares.
 * All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are
 * met:
 *
 *     * Redistributions of source code must retain the above copyright
 * notice, this list of conditions and the following disclaimer.
 *     * Redistributions in binary form must reproduce the above
 * copyright notice, this list of conditions and the following disclaimer
 * in the documentation and/or other materials provided with the
 * distribution.
 *     * Neither the name of Gregg Tavares. nor the names of his
 * contributors may be used to endorse or promote products derived from
 * this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  <meta name="theme-color" content="#000000">

  <meta property="og:title" content="HTML5ByteBeat" />
  <meta property="og:type" content="website" />
  <meta property="og:image" content="https://greggman.com/downloads/examples/html5bytebeat/html5bytebeat.png" />
  <meta property="og:description" content="music by math" />
  <meta property="og:url" content="https://greggman.com/downloads/examples/html5bytebeat/html5bytebeat.html" />

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@greggman">
  <meta name="twitter:creator" content="@greggman">
  <meta name="twitter:domain" content="greggman.com">
  <meta name="twitter:title" content="HTML5ByteBeat">
  <meta name="twitter:url" content="https://greggman.com/downloads/examples/html5bytebeat/html5bytebeat.html">
  <meta name="twitter:description" content="music by math">
  <meta name="twitter:image:src" content="https://greggman.com/downloads/examples/html5bytebeat/html5bytebeat.png">

  <link href="icon.png" rel="shortcut icon" type="image/png">
  <link href="js/scrollbars.css" rel="stylesheet">

  <title>HTML5 Bytebeat</title>
<script src="js/lzma.js"></script>
<script src="js/wavmaker.js"></script>
<style>
:root {
  /* This is a hack just to make the songs button stay on top right
     and other buttons wrap */
  --show-songs-width: 7em;
}
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: Monospace;
    background-color: black;
    color: white;
}
a:link, a:visited, a:hover, a:active {
  color: white;
  text-decoration: none;
}
details>* {
  margin-left: 0.5em;
}
summary:hover {
  color: red;
}
.category summary {
  cursor: pointer;
  background-color: rgb(0, 0, 200, 0.4);
}
.sub-category summary {
  cursor: pointer;
  background-color: rgb(0, 0, 250, 0.4);
}
#split {
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 2;
}
#songs {
    flex: 0 0 auto;
    width: 300px;
    max-width: 35%;
    height: 100%;
    word-break: break-word;
    background-color: rgba(64, 64, 64, 0.5);
    display: flex;
    flex-direction: column;
}
#song-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}
#songs a {
    list-style: circle outside;
    margin-left: 0.5em;
    margin-bottom: 0.5em;
    display: list-item;
    max-height: 3.5em;
    overflow-y: hidden;
}
#search:focus,
summary:focus,
#songs a:focus {
    outline: 1px solid rgba(100, 50, 255, 1);
}
#songs .odd {
  background-color: rgba(0, 0, 0, 0.8);
}
#songs a:hover {
    color: magenta;
}
#main {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
}
#showSongs {
  position: absolute;
  right: 0;
  top: 0;
  width: var(--show-songs-width);
}
#background {
    width: 100%;
    height: 100%;
}
#foreground {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
#visualization {
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 66);
    display: block;
}
.status {
  color: #0F0;
}
.status.error {
  color: #F00;
}
#controls {
  margin-right: var(--show-songs-width);
}
#code {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px;

    border: none;
    border-radius: 5px;

    color: #ffffff;
    background-color: transparent;
    font-family: Monospace;
    font-size: 14px;
    font-weight: bold;
    text-shadow: rgba( 0, 0, 0, 1 ) 0px 1px 2px;

    white-space: pre-wrap;
}

#code:hover {
    background-color:rgba(0, 0, 0, 0.5);
}

textarea:focus {
    outline: 0; /* this removes browser-side outline */
}

button, select, .buttonstyle, #showSongs {
    padding: 8px 12px 8px 12px;
    white-space: pre;
    border: none;
    border-radius: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    color: #aaa;
    background-color: rgba(0, 0, 0, 0.5);
    font-family: Monospace;
    font-size: 12px;
    height: 32px;
    font-weight: bold;
    cursor: pointer;
}
button:hover, select:hover, .buttonstyle:select {
    opacity: 1;
}
option {
    color: #ffffff;
    background-color: #000000;
}
.play:before { content: " play ▶"; }
.pause:before { content: "pause ■"; }

#savedialog {
  display: none;
  z-index: 10;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}
#savecontainer {
  display: table-cell;
  vertical-align: middle;
}
#saveform {
  margin: auto;
  width: 400px;
  height: 200px;
  background-color: #888;
  padding: 20px;
  border-radius: 5px;
}
#saveform .settings {
  margin-top: 1em;
  margin-bottom: 1em;
}
input {
   background: #444;
   color: white;
   border: none;
}
#search {
  margin-top: 32px;
}
.highlight {
  color: red !important;
}
.hide {
  display: none !important;
}
#loadingContainer,
#startContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  background-color: rgba(0, 0, 0, 0.7);
}
#loadingContainer>*,
#startButton {
  color: white;
  font-size: 112pt;
  background-color: blue;
  padding: 0.2em;
  border-radius: 0.2em;
}
#loadingContainer>* {
  background-color: slateblue;
  font-size: 32pt;
}
#debug {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.5em;
  background-color: rgba(0, 0, 0, 0.9);
  color: #0F0
}
@media screen and (max-width: 700px) {
  #startButton {
    font-size: 48pt;
  }
  #code {
    font-size: 16px;
  }
  #songs a {
      margin-left: 0.5em;
  }
  details>* {
    margin-left: 0.25em;
  }
  .play:before { content: "▶"; }
  .pause:before { content: "■"; }
  button, select, .buttonstyle, #showSongs {
    max-width: 8em;
  }

}
</style>
</head>
<body>
<div id="split">
  <div id="main">
    <div id="background">
      <canvas id="visualization"></canvas>
    </div>
    <div id="foreground">
      <div id="controls"></div>
      <textarea id="code" class="layout-scrollbar"></textarea>
      <pre id="debug" style="display: none;"></pre>
    </div>
  </div>
  <div style="display: none;" id="songs">
      <input id="search" type="text" placeholder="Search" autocomplete="off" />
      <div id="song-list" class="layout-scrollbar"></div>
  </div>
</div>
<button id="showSongs"> ▶ beats</button>
<div id="savedialog">
  <div id="savecontainer">
    <div id="saveform">
      <div>
        <img id="screenshot" />
      </div>
      <div class="settings">
        <div> seconds: <input id="seconds" type="number" value="30" min="0" max="10000"></div>
      </div>
      <div><button id="save">save</button><button id="cancel">cancel</button></div>
    </div>
  </div>
</div>
<div id="startContainer" style="display: none;">
   <div id="startButton">play ▶</div>
</div>
<div id="loadingContainer">
   <div>loading...</div>
</div>
<script type="module" src="editor/index.js"></script>
</body>
</html>