├── readme.md
├── css
    └── styles.css
├── js
    └── binary-music-player.js
└── index.html


/readme.md:
--------------------------------------------------------------------------------
 1 | ### Binary Music Player
 2 | 
 3 | As the binary counter counts (upwards) each column is given a musical note. If that column were to have a `1` in it, the note will play as it changes.
 4 | 
 5 | The binary music player is based around <a href="https://www.youtube.com/watch?v=CdaPhpGG6As" target="_blank">this</a> video which is using real piano sounds & sounds a lot more elegant - and is built with <a href="https://tonejs.github.io/" target="_blank">Tone.JS</a> and some relatively vanilla js/css/html.
 6 | 
 7 | The creations are shareable /w url parameters, for example `?keys=G1,C^2,E2,G^2,D3,E3,G3,B4,D4,F^4`. These will update when you customize your own creation.
 8 | 
 9 | ![Screenshot of the user interface](http://tholman.com/binary-music-player/screenshot.png)
10 | 


--------------------------------------------------------------------------------
/css/styles.css:
--------------------------------------------------------------------------------
  1 | @import "https://fonts.googleapis.com/css?family=Source+Code+Pro";
  2 | 
  3 | * {
  4 |   box-sizing: border-box;
  5 | }
  6 | 
  7 | html,
  8 | body {
  9 |   margin: 0px;
 10 |   min-height: 100%;
 11 |   height: 100%;
 12 |   font-family: "Source Code Pro", monospace;
 13 | }
 14 | 
 15 | .containers {
 16 |   height: 100%;
 17 |   display: flex;
 18 |   flex-direction: column;
 19 | }
 20 | 
 21 | .binary-container {
 22 |   position: relative;
 23 |   flex-grow: 1;
 24 |   display: flex;
 25 |   flex-direction: column;
 26 |   justify-content: center;
 27 |   align-items: center;
 28 | }
 29 | 
 30 | .binary {
 31 |   font-size: 50px;
 32 | }
 33 | 
 34 | .play-pause {
 35 |   font-family: serif;
 36 |   font-size: 30px;
 37 |   margin-top: 20px;
 38 |   cursor: pointer;
 39 | }
 40 | 
 41 | .editor-container {
 42 |   transition: height 150ms ease-out;
 43 |   width: 100%;
 44 |   background: #e9e9e9;
 45 |   bottom: 0px;
 46 |   left: 0px;
 47 |   height: 42px;
 48 |   overflow: hidden;
 49 |   padding-top: 11px;
 50 | }
 51 | 
 52 | .editor-container-contents {
 53 |   transition: opacity 250ms ease-out;
 54 |   opacity: 0;
 55 | }
 56 | 
 57 | .editor-container.open {
 58 |   height: 400px;
 59 | }
 60 | 
 61 | .editor-container.open .editor-container-contents {
 62 |   opacity: 1;
 63 | }
 64 | 
 65 | .play {
 66 |   width: 39px;
 67 |   font-size: 15px;
 68 |   height: 35px;
 69 |   border: 3px solid;
 70 |   margin-top: 10px;
 71 |   border-radius: 3px;
 72 |   position: relative;
 73 | }
 74 | 
 75 | .play:after {
 76 |   content: "";
 77 |   display: block;
 78 |   position: absolute;
 79 |   top: 50%;
 80 |   left: 50%;
 81 |   border-right: 8px solid transparent;
 82 |   border-top: 8px solid transparent;
 83 |   border-bottom: 8px solid transparent;
 84 |   border-left: 10px solid black;
 85 |   transform: translate(calc(-50% + 5px), -50%);
 86 | }
 87 | 
 88 | .pause:after {
 89 |   border: 6px solid black;
 90 |   transform: translate(-50%, -50%);
 91 | }
 92 | 
 93 | /**
 94 |  * The Keyboard
 95 |  */
 96 | 
 97 | ul {
 98 |   position: relative;
 99 |   width: 625px;
100 |   margin: auto;
101 |   padding: 0px;
102 |   height: 90px;
103 | }
104 | 
105 | li {
106 |   position: relative;
107 |   list-style: none;
108 |   float: left;
109 |   padding: 0;
110 |   margin: 0;
111 | }
112 | 
113 | .piano-key {
114 |   transition: background 100ms ease;
115 | }
116 | 
117 | ul .white {
118 |   border-bottom: 1px solid #ccc;
119 |   border-left: 1px solid #eee;
120 |   background: #fff;
121 |   height: 80px;
122 |   width: 12px;
123 |   z-index: 1;
124 | }
125 | 
126 | .white:hover {
127 |   background: #eee;
128 | }
129 | 
130 | .black {
131 |   margin: 0 -4px 0 -4px;
132 |   border: 1px solid #000;
133 |   background: black;
134 |   height: 50px;
135 |   width: 8px;
136 |   z-index: 2;
137 | }
138 | 
139 | .black:hover {
140 |   background: #444;
141 | }
142 | 
143 | .notes {
144 |   margin: auto;
145 |   display: block;
146 |   position: relative;
147 |   text-align: center;
148 |   font-size: 24px;
149 |   margin-top: 50px;
150 |   margin-bottom: 40px;
151 | }
152 | 
153 | .notes input {
154 |   border: none;
155 |   width: 55px;
156 |   font-size: inherit;
157 |   border-bottom: 4px solid #222;
158 |   outline: 0px;
159 |   text-align: center;
160 |   padding: 5px;
161 | }
162 | 
163 | .notes input:focus {
164 |   border-bottom: 4px solid hotpink;
165 | }
166 | 
167 | .info h1 {
168 |   text-align: center;
169 |   color: #222;
170 |   letter-spacing: 2px;
171 |   font-size: 14px;
172 |   cursor: pointer;
173 |   margin-top: 0px;
174 | }
175 | 
176 | .info span {
177 |   margin-left: 10px;
178 |   margin-right: 15px;
179 |   letter-spacing: -2px;
180 | }
181 | 
182 | .details {
183 |   max-width: 700px;
184 |   padding: 30px;
185 |   margin: auto;
186 |   text-align: center;
187 |   font-size: 15px;
188 | }
189 | 
190 | @media only screen and (max-width: 700px) {
191 |   .editor-container.open {
192 |     height: auto;
193 |   }
194 | 
195 |   .notes input {
196 |     margin-bottom: 8px;
197 |   }
198 | 
199 |   .info h1 {
200 |     font-size: 12px;
201 |     font-weight: bold;
202 |     letter-spacing: 0px;
203 |   }
204 | 
205 |   .notes {
206 |     margin-top: 20px;
207 |     margin-bottom: 20px;
208 |   }
209 | 
210 |   .details {
211 |     font-size: 10px;
212 |     padding: 10px;
213 |   }
214 | }
215 | 


--------------------------------------------------------------------------------
/js/binary-music-player.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Inspired by: 1023.exe (by Alfred Kedhammar) - /w Tone.js
  3 |  * -- Original video concept here: https://www.youtube.com/watch?v=CdaPhpGG6As
  4 |  * ---- Not quite as cool with the backing violins, but still cool!
  5 |  */
  6 | 
  7 | (function() {
  8 |   var count = 0;
  9 |   var played = false;
 10 |   var playing = false;
 11 |   var pad = "0000000000";
 12 |   var numberArea = document.querySelector(".binary");
 13 |   var previousBinarySet = pad.split("");
 14 |   var currentFocusedInput = 0;
 15 | 
 16 |   var notes = ["D4", "E4", "F4", "G4", "A5", "C5", "D5", "E5", "F5", "G5"];
 17 | 
 18 |   var times = [1.7, 1.5, 1.3, 1.2, 0.9, 0.7, 0.6, 0.5, 0.5, 0.4];
 19 | 
 20 |   var customizeButton, customizeArea, inputAreas, keys, play;
 21 | 
 22 |   function toBinary(number) {
 23 |     return (number >>> 0).toString(2);
 24 |   }
 25 | 
 26 |   function padNumber(numberString) {
 27 |     return pad.substring(0, pad.length - numberString.length) + numberString;
 28 |   }
 29 | 
 30 |   function playOrPause() {
 31 |     if (playing) {
 32 |       Tone.Transport.stop();
 33 |       count = 0;
 34 |       playing = false;
 35 |       pad = "0000000000";
 36 |       previousBinarySet = pad.split("");
 37 |       play.classList.toggle('pause');
 38 |       return;
 39 |     }
 40 | 
 41 |     if (!played) {
 42 |       var synth = new Tone.PolySynth(8, Tone.Synth, {
 43 |         oscillator: {
 44 |           partials: [0, 2, 3, 4]
 45 |         }
 46 |       }).toMaster();
 47 | 
 48 |       Tone.Transport.bpm.value = 50;
 49 | 
 50 |       Tone.Transport.scheduleRepeat(function(time) {
 51 |         var number = Math.floor(count);
 52 |         count = count + 1;
 53 |         var numberString = padNumber(toBinary(number));
 54 |         numberArea.innerHTML = numberString;
 55 | 
 56 |         var binaryArray = numberString.split("");
 57 | 
 58 |         for (var i = 0; i < binaryArray.length; i++) {
 59 |           if (
 60 |             binaryArray[i] === "1" &&
 61 |             previousBinarySet[i] !== binaryArray[i]
 62 |           ) {
 63 |             synth.triggerAttackRelease(notes[i], times[i], time);
 64 |           }
 65 |         }
 66 | 
 67 |         previousBinarySet = binaryArray;
 68 | 
 69 |         if (count > 1023) {
 70 |           count = 0;
 71 |         }
 72 |       }, "32i");
 73 | 
 74 |       played = true;
 75 |     }
 76 | 
 77 |     playing = true;
 78 |     play.classList.toggle('pause');
 79 |     Tone.Transport.start();
 80 |   }
 81 | 
 82 |   function cacheDOM() {
 83 |     customizeButton = document.querySelector(".info");
 84 |     customizeArea = document.querySelector(".editor-container");
 85 |     inputAreas = document.querySelectorAll(".notes input");
 86 |     keys = document.querySelectorAll(".piano-key");
 87 |     play = document.querySelector(".play");
 88 |   }
 89 | 
 90 |   function bindUI() {
 91 |     readNotesFromUrl();
 92 | 
 93 |     customizeButton.addEventListener("click", onCustomizeButtonClicked, false);
 94 |     for (var i = 0; i < keys.length; i++) {
 95 |       keys[i].addEventListener("click", e => onKeyClicked(e), false);
 96 |     }
 97 | 
 98 |     for (var i = 0; i < inputAreas.length; i++) {
 99 |       inputAreas[i].value = notes[i];
100 |       inputAreas[i].addEventListener("click", e => {
101 |         currentFocusedInput = parseInt(e.target.dataset.index);
102 |       });
103 |     }
104 | 
105 |     play.addEventListener("click", playOrPause, false);
106 |   }
107 | 
108 |   function onCustomizeButtonClicked() {
109 |     if (!customizeArea.classList.contains("open")) {
110 |       inputAreas[0].focus();
111 |       currentFocusedInput = 0;
112 |     }
113 |     customizeArea.classList.toggle("open");
114 |   }
115 | 
116 |   function setNotesInUrl() {
117 |     history.replaceState &&
118 |       history.replaceState(
119 |         {},
120 |         "",
121 |         `?keys=${notes.join(",")}`.replace(/\#/g, "^")
122 |       );
123 |   }
124 | 
125 |   function readNotesFromUrl() {
126 |     const url = document.location.href;
127 |     const urlData = new URL(url);
128 |     const keys = urlData.searchParams.get("keys");
129 | 
130 |     if (!keys) {
131 |       return;
132 |     }
133 | 
134 |     const keyData = keys.replace(/\^/g, "#").split(",");
135 | 
136 |     if (keyData.length === 10) {
137 |       for (var i = 0; i < keyData.length; i++) {
138 |         const el = document.querySelector(`[data-piano-key="${keyData[i]}"]`);
139 |         if (!el) {
140 |           return;
141 |         }
142 |       }
143 | 
144 |       notes = keyData;
145 |     }
146 |   }
147 | 
148 |   function onKeyClicked(e) {
149 |     const valueSelected = e.target.dataset.pianoKey;
150 |     inputAreas[currentFocusedInput].value = valueSelected;
151 |     notes[currentFocusedInput] = valueSelected;
152 | 
153 |     currentFocusedInput = currentFocusedInput + 1;
154 |     if (currentFocusedInput >= inputAreas.length) {
155 |       currentFocusedInput = 0;
156 |     }
157 |     inputAreas[currentFocusedInput].focus();
158 | 
159 |     setNotesInUrl();
160 |   }
161 | 
162 |   cacheDOM();
163 |   bindUI();
164 | })();
165 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <title> Binary Music Player </title>
  6 |     <link href='./css/styles.css' rel='stylesheet'>
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
  8 |     <meta name="description" content="A musical player, with a binary twist">
  9 | 
 10 |   </head>
 11 |   <body>
 12 | 
 13 |     <div class="containers">
 14 |       <div class="binary-container">
 15 |         <div class="binary">0000000000</div>
 16 |         <button class="play"></button>
 17 |       </div>
 18 | 
 19 |       <div class="editor-container">
 20 | 
 21 |         <div class="info">
 22 |             <h1>Customize Notes<span>||</span>Learn About This</h1>
 23 |         </div>
 24 | 
 25 |         <div class="editor-container-contents">
 26 |      
 27 |             <div class="notes">
 28 |                 <input readonly data-index="0"/>
 29 |                 <input readonly data-index="1"/>
 30 |                 <input readonly data-index="2"/>
 31 |                 <input readonly data-index="3"/>
 32 |                 <input readonly data-index="4"/>
 33 |                 <input readonly data-index="5"/>
 34 |                 <input readonly data-index="6"/>
 35 |                 <input readonly data-index="7"/>
 36 |                 <input readonly data-index="8"/>
 37 |                 <input readonly data-index="9"/>
 38 |             </div>
 39 | 
 40 |             <div class="piano">
 41 |               <ul id="piano-keyboard">
 42 |                 <li class="piano-key white" data-piano-key="A0"></li>
 43 |                 <li class="piano-key black" data-piano-key="A#0"></li>
 44 |                 <li class="piano-key white" data-piano-key="B0"></li>
 45 |                 <li class="piano-key white" data-piano-key="C1"></li>
 46 |                 <li class="piano-key black" data-piano-key="C#1"></li>
 47 |                 <li class="piano-key white" data-piano-key="D1"></li>
 48 |                 <li class="piano-key black" data-piano-key="D#1"></li>
 49 |                 <li class="piano-key white" data-piano-key="E1"></li>
 50 |                 <li class="piano-key white" data-piano-key="F1"></li>
 51 |                 <li class="piano-key black" data-piano-key="F#1"></li>
 52 |                 <li class="piano-key white" data-piano-key="G1"></li>
 53 |                 <li class="piano-key black" data-piano-key="G#1"></li>
 54 | 
 55 |                 <li class="piano-key white" data-piano-key="A1"></li>
 56 |                 <li class="piano-key black" data-piano-key="A#1"></li>
 57 |                 <li class="piano-key white" data-piano-key="B1"></li>
 58 |                 <li class="piano-key white" data-piano-key="C2"></li>
 59 |                 <li class="piano-key black" data-piano-key="C#2"></li>
 60 |                 <li class="piano-key white" data-piano-key="D2"></li>
 61 |                 <li class="piano-key black" data-piano-key="D#2"></li>
 62 |                 <li class="piano-key white" data-piano-key="E2"></li>
 63 |                 <li class="piano-key white" data-piano-key="F2"></li>
 64 |                 <li class="piano-key black" data-piano-key="F#2"></li>
 65 |                 <li class="piano-key white" data-piano-key="G2"></li>
 66 |                 <li class="piano-key black" data-piano-key="G#2"></li>
 67 | 
 68 |                 <li class="piano-key white" data-piano-key="A2"></li>
 69 |                 <li class="piano-key black" data-piano-key="A#2"></li>
 70 |                 <li class="piano-key white" data-piano-key="B2"></li>
 71 |                 <li class="piano-key white" data-piano-key="C3"></li>
 72 |                 <li class="piano-key black" data-piano-key="C#3"></li>
 73 |                 <li class="piano-key white" data-piano-key="D3"></li>
 74 |                 <li class="piano-key black" data-piano-key="D#3"></li>
 75 |                 <li class="piano-key white" data-piano-key="E3"></li>
 76 |                 <li class="piano-key white" data-piano-key="F3"></li>
 77 |                 <li class="piano-key black" data-piano-key="F#3"></li>
 78 |                 <li class="piano-key white" data-piano-key="G3"></li>
 79 |                 <li class="piano-key black" data-piano-key="G#3"></li>
 80 | 
 81 |                 <li class="piano-key white" data-piano-key="A3"></li>
 82 |                 <li class="piano-key black" data-piano-key="A#3"></li>
 83 |                 <li class="piano-key white" data-piano-key="B3"></li>
 84 |                 <li class="piano-key white" data-piano-key="C4"></li>
 85 |                 <li class="piano-key black" data-piano-key="C#4"></li>
 86 |                 <li class="piano-key white" data-piano-key="D4"></li>
 87 |                 <li class="piano-key black" data-piano-key="D#4"></li>
 88 |                 <li class="piano-key white" data-piano-key="E4"></li>
 89 |                 <li class="piano-key white" data-piano-key="F4"></li>
 90 |                 <li class="piano-key black" data-piano-key="F#4"></li>
 91 |                 <li class="piano-key white" data-piano-key="G4"></li>
 92 |                 <li class="piano-key black" data-piano-key="G#4"></li>
 93 | 
 94 |                 <li class="piano-key white" data-piano-key="A4"></li>
 95 |                 <li class="piano-key black" data-piano-key="A#4"></li>
 96 |                 <li class="piano-key white" data-piano-key="B4"></li>
 97 |                 <li class="piano-key white" data-piano-key="C5"></li>
 98 |                 <li class="piano-key black" data-piano-key="C#5"></li>
 99 |                 <li class="piano-key white" data-piano-key="D5"></li>
100 |                 <li class="piano-key black" data-piano-key="D#5"></li>
101 |                 <li class="piano-key white" data-piano-key="E5"></li>
102 |                 <li class="piano-key white" data-piano-key="F5"></li>
103 |                 <li class="piano-key black" data-piano-key="F#5"></li>
104 |                 <li class="piano-key white" data-piano-key="G5"></li>
105 |                 <li class="piano-key black" data-piano-key="G#5"></li>
106 | 
107 |                 <li class="piano-key white" data-piano-key="A5"></li>
108 |                 <li class="piano-key black" data-piano-key="A#5"></li>
109 |                 <li class="piano-key white" data-piano-key="B5"></li>
110 |                 <li class="piano-key white" data-piano-key="C6"></li>
111 |                 <li class="piano-key black" data-piano-key="C#6"></li>
112 |                 <li class="piano-key white" data-piano-key="D6"></li>
113 |                 <li class="piano-key black" data-piano-key="D#6"></li>
114 |                 <li class="piano-key white" data-piano-key="E6"></li>
115 |                 <li class="piano-key white" data-piano-key="F6"></li>
116 |                 <li class="piano-key black" data-piano-key="F#6"></li>
117 |                 <li class="piano-key white" data-piano-key="G6"></li>
118 |                 <li class="piano-key black" data-piano-key="G#6"></li>
119 | 
120 |                 <li class="piano-key white" data-piano-key="A6"></li>
121 |                 <li class="piano-key black" data-piano-key="A#6"></li>
122 |                 <li class="piano-key white" data-piano-key="B6"></li>
123 |                 <li class="piano-key white" data-piano-key="C7"></li>
124 |                 <li class="piano-key black" data-piano-key="C#7"></li>
125 |                 <li class="piano-key white" data-piano-key="D7"></li>
126 |                 <li class="piano-key black" data-piano-key="D#7"></li>
127 |                 <li class="piano-key white" data-piano-key="E7"></li>
128 |                 <li class="piano-key white" data-piano-key="F7"></li>
129 |                 <li class="piano-key black" data-piano-key="F#7"></li>
130 |                 <li class="piano-key white" data-piano-key="G7"></li>
131 |                 <li class="piano-key black" data-piano-key="G#7"></li>
132 | 
133 |                 <li class="piano-key white" data-piano-key="A7"></li>
134 |                 <li class="piano-key black" data-piano-key="A#7"></li>
135 |                 <li class="piano-key white" data-piano-key="B7"></li>
136 |                 <li class="piano-key white" data-piano-key="C8"></li>
137 | 
138 |               </ul>
139 |             </div>
140 | 
141 |             <div class="details">
142 |                 The binary music player is based around <a href="https://www.youtube.com/watch?v=CdaPhpGG6As" target="_blank">this</a> video (which is using real piano sounds, so is a lot more elegant) - and is built with <a href="https://tonejs.github.io/" target="_blank">Tone.JS</a><br><br>
143 |                 Built by <a href="http://tholman.com" target="_blank">Tim Holman</a> - <a href="https://twitter.com/twholman" target="_blank">@twholman</a> - <a href="https://github.com/tholman/binary-music-player" target="_blank">source</a> - <a href="https://www.buymeacoffee.com/tholman" target="_blank">☕</a>
144 |             </div>
145 |         </div>
146 |       </div>
147 |     </div>
148 | 
149 |     <script src='https://unpkg.com/tone@13.8.25/build/Tone.js'></script>
150 |     <script src='js/binary-music-player.js'></script>
151 | 
152 |   </body>
153 | </html>
154 | 


--------------------------------------------------------------------------------