@AlephZero/

MusicEvolved

HTML, CSS, JS

Generating music using Markov chains and an interactive genetic algorithm

fork
loading
Files
  • index.html
  • samples
  • favicon.ico
  • MarkovChain.js
  • markovChainEditor.js
  • parseMidi.js
  • script.js
  • style.css
  • tutorial.js
index.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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>MusicEvolved</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
	<link href="https://fonts.googleapis.com/css?family=Muli:400,700&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

	<script type="text/javascript" src="https://unpkg.com/[email protected]/build/Tone.js">

	</script>
	<script type="text/javascript" src="https://unpkg.com/@tonejs/midi">

	</script>
	<script src="parseMidi.js">

	</script>
	<script src="MarkovChain.js">

	</script>

	<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
</head>

<body>
	<input type="file" id="hidden-file-input" accept="application/x-midi,audio/midi" id="file-selector" onchange="uploadMidiFile(event)" style="display:none;">

    <div id="popup">
        <h1 id="popup-title"></h1>
        <div id="popup-content"></div>
        <div id="popup-bottom-buttons">
            <button id="popup-back-button">
            <i class="material-icons">navigate_before</i>
          <span>Back</span>
        </button>
        <button id="popup-ok-button">
          <i class="material-icons">close</i>
          <span>Close</span>
        </button>
        <button id="popup-next-button">
          <span>Next</span>
          <i class="material-icons">navigate_next</i>
        </button>
      </div>
    </div>

    <div id="context-menu" class="disable-selection">
        <div id="background-context-menu">
            <label for="hidden-file-input"><i class="material-icons">publish</i> <span>Upload MIDI</span></label>
            <div onclick="makeRandomSongButton()"><i class="material-icons">waves</i> <span>Generate random</span></div>
            <div onclick="showMidiLibrary()"><i class="material-icons">library_music</i> <span>Library</span></div>
        </div>
        <div id="midi-library">
            <div onclick="makeSongWithRemoteMidi('/samples/ChopinConcerto.mid')"><i class="material-icons">music_note</i> <span>Chopin Concerto No.1</span></div>
            <div onclick="makeSongWithRemoteMidi('/samples/Mario.mid')"><i class="material-icons">music_note</i> <span>Mario</span></div>
            <div onclick="makeSongWithRemoteMidi('/samples/Megalovania.mid')"><i class="material-icons">music_note</i> <span>Megalovania</span></div>
        </div>
        <div id="song-context-menu">
            <div onclick="deleteRightClickedSong()"><i class="material-icons">delete</i>
            <span>Delete</span></div>
            <div onclick="duplicateRightClickedSong()"><i class="material-icons">file_copy</i>
            <span>Duplicate</span></div>
            <div onclick="mutateRightClickedSong()"><i class="material-icons">tune</i>
            <span>Mutate</span></div>
            <div onclick="downloadRightClickedSong()"><i class="material-icons">save_alt</i> Download Sample</div>
        </div>
    </div>

    <div id="song-settings-menu">
        <h1 style="align-self:stretch;"><i class="material-icons">settings</i> Song Settings Menu
        <i onclick="hideSongSettingsMenu()" id="song-settings-menu-close-button" class="material-icons">close</i></h1>
        <button class="transparent-button" onclick="MarkovChainEditor.clearMatrix()"><i class="material-icons">delete</i> <span>Clear Matrix</span></button>
        <div id="markov-chain-editor">
            <canvas id="markov-chain-mouse-overlay"></canvas>
            <canvas id="markov-chain-viewer"></canvas>
        </div>
    </div>

    <main oncontextmenu="showRightClickMenu(event)">
    </main>
    <script src="markovChainEditor.js"></script>
    <script src="script.js"></script>
    <script src="tutorial.js"></script>
  </body>
</html>
result
console