website/index.html

﻿<!DOCTYPE html>
<html lang="en">
<head>
    <link rel='shortcut icon' type='image/x-icon' href='./favicon.ico' />
    <!-- CDN for jQuery and select2 -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JummBox</title>
    <meta name="application-name" content="JummBox" />
    <meta name="apple-mobile-web-app-title" content="JummBox">
	<meta name="description" content="JummBox is an online tool for sketching and sharing instrumental music." />
    <meta name="keywords" content="chiptune, instrumental, music, song, melody, composition, tool, free, square wave, NES, NSF, JummBox, jummbox, BeepBox, beepbox" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="theme-color" content="#444" />
    <meta name="msapplication-TileColor" content="#603cba" />
    <meta name="msapplication-config" content="/browserconfig.xml" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/icon_32.png" />
    <link rel="manifest" href="/manifest.webmanifest" />
    <link href="https://fonts.googleapis.com/css?family=B612" rel="stylesheet" media="none" onload="if (this.media != 'all') this.media='all';" /> <!-- this is a trick to load CSS asynchronously. -->
    <style type="text/css">

        html {
            background: var(--page-margin, black);
            overflow-x: hidden;
            font-size: large;
            font-family: 'B612', sans-serif;
            line-height: 1.3;
            color: var(--primary-text, white);
        }

        body {
            margin: auto;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            align-content: center;
        }

        #beepboxEditorContainer {
            min-height: 645px;
            overflow: auto;
            background: var(--editor-background, black);
            width: 100%;
			max-width: 710px;
            padding-left: 30px;
            padding-right: 30px;
        }

        #text-content {
            overflow: auto;
            background: var(--editor-background, black);
            width: 100%;
			max-width: 710px;
            padding-left: 30px;
            padding-right: 30px;
        }

        h1 {
            font-size: 1.7rem;
            text-align: center;
            margin-top: 0.5em;
            margin-bottom: 0.5em;
            -webkit-text-stroke-width: 0;
        }

        h2 {
            font-size: 1.5rem;
            text-align: center;
            margin-top: 0.5em;
            margin-bottom: 0.5em;
            -webkit-text-stroke-width: 0;
        }

        .centerDiv {
			margin: 0px auto;
		}

        a {
            color: var(--link-accent, #98f);
        }

        .donation form {
            display: inline;
        }

        .donation input[type="submit"] {
            -webkit-appearance: none;
            background: none;
            border: none;
            font-family: inherit;
            font-size: inherit;
            color: var(--link-accent, #98f);
            text-decoration: underline;
            cursor: pointer;
            padding: 0;
            margin: 0;
        }

        /* wide screen */
		@media (min-width: 711px) {
            html {
                width: 100%;
            }

            body {
                width: 100%;
            }

            .column-container {
				width: 710px;
                display: flex;
				gap: 25px;
            }

            .instructions-column {
				min-width: 0;
            }
        }

        /* narrow screen */
		@media (max-width: 710px) {
            body {
                width: 100%;
            }

            p, .donation {
                margin: 1em 0.5em;
            }

            .column-container {
                display: flex;
                flex-direction: column;
                align-items: center;
            }
        }
    </style>
</head>

<body>
    <div id="beepboxEditorContainer">
        <noscript>
            Sorry, JummBox requires a JavaScript-enabled browser.
        </noscript>
    </div>
    <div id="text-content">
        <section>

            <h1>
                <font color="#9c64f7">JummBox</font>
                <span id="jummboxPlant" style="display: inline; color:#62a13b"></span>
            </h1>
            
            <p id="introduction">
                This is an online tool for sketching and sharing chiptune melodies.<br>
                It is a modification of the <a href="https://www.beepbox.co/">original BeepBox</a> by John Nesky.
            </p>
            <p>
                If you're familiar with BeepBox and just want to learn what JummBox does differently, check out this <a href="https://youtu.be/26yDP4ACuzE">overview video</a>.
                You can also find the latest patch notes <a href="https://jummb.us/patch_notes/2.6.html">here</a>.
            </p>
            <p>
                All song data is contained in the URL at the top of your browser.
                When you make changes to the song, the URL is updated to reflect your changes.
                When you are satisfied with your song, just copy and paste the URL to save and share your song!
            </p>
            <!--
    <div class="donation">
        BeepBox is a passion project, and will always be free to use. If you find it valuable and have the means, any gratuity via
        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
            <input type="hidden" name="cmd" value="_donations" />
            <input type="hidden" name="business" value="QZJTX9GRYEV9N" />
            <input type="hidden" name="currency_code" value="USD" />
            <input type="submit" name="submit" value="Paypal"/>
        </form>
        would be appreciated!
    </div>
    -->
        </section>

        <div class="column-container">
            <main class="instructions-column">
                <section>
                    <h2>
                        Instructions
                    </h2>
                    <p>
                        You can add or remove notes by clicking on the gray rows at the top.
                        JummBox automatically plays the notes out loud for you. Try it!
                    </p>
                    <p>
                        Notes go into patterns, and you can edit one pattern at a time.
                        Those numbered boxes at the bottom of the editor are the different patterns you can edit.
                        <span id="bar-editing">
                            Click the boxes to move to a different part of the song, or click the arrows on the currently selected box to swap which pattern is played during that part of the song.
                        </span>
                    </p>
                    <p>
                        JummBox can play several rows of patterns simultaneously, and each row has its own set of patterns.
                        Most rows can play melodies or harmonies, but the bottom row is for drums.
                    </p>
                    <p>
                        All song data is contained in the URL at the top of your browser.
                        When you make changes to the song, the URL is updated to reflect your changes.
                        When you are satisfied with your song, just copy and paste the URL to save and share your song!
                    </p>

                    <div id="keyboard-instructions">
                        <p>
                            When JummBox has focus (click on its interface above), you can use these keyboard shortcuts: <br />
                        </p>
                        <ul>
                            <li><b>Spacebar</b>: play or pause the song</li>
                            <li><b>Shift Spacebar</b>: play from mouse location</li>
							<li><b>Z</b>: undo, <b>Y or Shift Z</b>: redo</li>
                            <li><b>C</b>: copy pattern from selection</li>
                            <li><b>V</b>: paste pattern into selection</li>
                            <li><b>0-9</b>: assign pattern number to selection</li>
							<li><b>Arrows</b>: move selection</li>
							<li><b>Ctrl + Arrows</b>: rearrange channels</li>
							<li><b>[ ]</b>: move playhead backward or forward</li>
							<li><b>F/H</b>: move to First or Highlighted pattern </li>
							<li><b>Shift & Drag</b>: select part of a pattern</li>
							<li>These are just a few shortcuts, check JummBox's edit menu for more!</li>
                        </ul>
                    </div>
                    <p>
                        In the note pattern editor, you can click and drag horizontally on a note to adjust its duration.
                        You can also click above or below an existing note to add more notes to be played simultaneously, which is called a chord.
                    </p>
                    <div id="mobile-instructions" style="display: none;">
						<p>
							You can also long-press in the pattern editor to select a time range within a pattern, which you can then drag to move multiple notes at once.<br/>
						</p>
					</div>
                    <p>
                        ADVANCED: Drag vertically from an existing note to bend its pitch, or drag vertically from above or below the note to adjust its volume. You can perform fine volume adjustment if you hold Control while doing this!
                    </p>
                    <p>
                        ADVANCED: Click and drag on the pattern grid to make a selection. You can then press C/V to mass copy/paste parts of your song.

                    </p>
                    <p>
                        JummBox has many more features.
                        Try playing with the buttons and menus on the right side to find out what it can do!
                        You can also click on the label next to each option for a description of what it does.
						Some features are hard to find anywhere though - for example, if your song has any modulator channels, you can hold Ctrl or Shift while the song is playing to record the movement of sliders directly! If you want to learn more tips, tricks, and best practices though, see below.
                    </p>
                    <p>
						Want to see what people have made with JummBox, BeepBox and other related sites? Songs that were shared on Twitter prior to 2023-05-22 can now be browsed in <a href="https://twitter-archive.beepbox.co/" target="_blank">this interactive archive</a>!
                        Additionally, there's an active <a href="https://discord.gg/beepbox">BeepBox Discord</a> who you can share songs with and ask questions!
					</p>
                </section>
                <section>
                    <h2>
                        About
                    </h2>
                    <p>
                        JummBox is developed by Jummbus. He doesn't really use Twitter or any social media any more, but if you have an urgent need to contact him, he can be reached via the BeepBox Discord.<br><br>
                        BeepBox was originally developed by <a href="http://www.johnnesky.com" target="_blank">John Nesky</a>, also known as <a href="https://twitter.com/shaktool" target="_blank">@shaktool</a>.
                    </p>
					<p>
						The next oldest version of JummBox is available <a href=https://jummb.us/2_5>here</a>.
					</p>
                    <p>
                        JummBox does not claim ownership over songs created with it, so original songs belong to their authors.
                    </p>
                    <p>
                        Neither Jummbus nor Jummbox assume responsibility for any copyrighted material played on JummBox. No songs are ever received, recorded, or distributed by JummBox's servers. All song data is contained in the URL after the hash (#) mark, and JummBox running inside your browser converts that data into sound waves.
                    </p>
                    <p>
                        JummBox does not collect, track, or share any user data.
                    </p>
                    <p id="offline-instructions">
                        You can download <a download="jummbox_offline.html" href="jummbox_offline.html">an offline version of JummBox</a> to use when you don't have access to the internet. The features are otherwise the same.
                    </p>
                    <p>
                        You can download and use <a href="https://github.com/jummbus/jummbox" target="_blank">the source code</a> under the MIT license.
                        The original BeepBox source code by John Nesky can be found <a href="https://github.com/johnnesky/beepbox" target="_blank">here</a>.
                    </p>
                </section>
            </main>
        </div>
    </div>

    <!--
    Instead of loading js beepbox editor interface directly, test for browser support.
    <script type="text/javascript" src="beepbox_editor.min.js"></script>
    -->
    <script type="text/javascript">

        // Randomize display of header
        // 1-in-10
        if (Math.floor(Math.random() * 10) == 0) {
            switch (Math.floor(Math.random() * 4)) {
                case 0:
                    document.getElementById("jummboxPlant").innerHTML = "  🍂";
                    break;
                case 1:
                    document.getElementById("jummboxPlant").innerHTML = "  🌿";
                    break;
                case 2:
                    document.getElementById("jummboxPlant").innerHTML = "  🌺";
                    break;
                case 3:
                    document.getElementById("jummboxPlant").innerHTML = "  🍃";
                    break;
            }
        }

        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|android|ipad|playbook|silk/i.test(navigator.userAgent)) {
            document.getElementById("introduction").innerHTML = "JummBox is an online tool for sketching and sharing chiptune melodies. Make sure that your volume is turned up, then press the play button!";
            document.getElementById("keyboard-instructions").style.display = "none";
			document.getElementById("mobile-instructions").style.display = "";
            document.getElementById("bar-editing").innerHTML = "Tap the boxes to move to a different part of the song, or tap on the currently selected box to swap which pattern is played during that part of the song.";
			//document.getElementById("offline-instructions").innerHTML = 'You can use BeepBox when your device is offline if you put a shortcut to BeepBox on your home screen. <ul><li>Chrome: find the "Add to Home Screen" option in the ⋮ menu.</li><li>Firefox: find the "Add Page Shortcut" option in the ⋮ menu.</li><li>Safari: find the "Add to Home Screen" option in the bookmark menu.</li></ul>';
        }

        function browserHasRequiredFeatures() {
            "use strict";
            if (window.AudioContext == undefined && window.webkitAudioContext == undefined) {
                return false;
            }

            try {
                eval("class T {}");
                eval("const a = () => 0");
                eval("for (const a of []);");
            } catch (error) {
                return false;
            }

            return true;
        }

        if (browserHasRequiredFeatures()) {
            // Go ahead and load js beepbox editor interface:
            var fileref = document.createElement("script");
            fileref.setAttribute("type", "text/javascript");
            fileref.setAttribute("src", "beepbox_editor.min.js");
            document.head.appendChild(fileref);
        } else {
            document.getElementById("beepboxEditorContainer").innerHTML = "Sorry, JummBox doesn't support your browser. Try a recent version of Chrome, Firefox, Edge, Safari, or Opera.";
        }

		// If the page was loaded with an old song version that old versions of BeepBox support,
		// update the links to the old versions so that they'll open the song.
		if (/^#[1-6]/.test(location.hash)) {
			document.getElementById("linkTo2_3").href += location.hash;
		}
		if (/^#[1-8]/.test(location.hash)) {
			document.getElementById("linkTo3_0").href += location.hash;
		}
    </script>
</body>
</html>