Changed read-me

.gitpod.yml

@@ -0,0 +1,4 @@
+tasks:
+  - init: npm install && npm run build
+    command: npm run start
+image: gitpod/workspace-full

README.md

@@ -1,18 +1,25 @@
-## THE INFINITE DRUM MACHINE
+[![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/googlecreativelab/aiexperiments-drum-machine) 
+
+## The Infinite Drum Machine
+Thousands of everyday sounds, organized using machine learning.
+
+## About
 
 Sounds are complex and vary widely. This experiment uses machine learning to organize thousands of everyday sounds. The computer wasn’t given any descriptions or tags – only the audio. Using a technique called t-SNE, the computer placed similar sounds closer together. You can use the map to explore neighborhoods of similar sounds and even make beats using the drum sequencer.
 
+[https://aiexperiments.withgoogle.com/drum-machine](https://aiexperiments.withgoogle.com/drum-machine)
+
 This is not an official Google product.
 
-## CREDITS
+## Credits
 
-Built by Kyle McDonald, Manny Tan, Yotam Mann, and friends at Google Creative Lab. Thanks to [The Philharmonia Orchestra, London](http://www.philharmonia.co.uk/) for contributing some sounds to this project.
+Built by [Kyle McDonald](https://github.com/kylemcdonald), [Manny Tan](https://github.com/mannytan), [Yotam Mann](https://github.com/tambien), and friends at [Google Creative Lab](https://github.com/googlecreativelab/). Thanks to [The Philharmonia Orchestra, London](http://www.philharmonia.co.uk/) for contributing some sounds to this project. Check out more at [A.I. Experiments] (https://aiexperiments.withgoogle.com).
 
-## OVERVIEW
+## Overview
 
 This application is the visualizer and drum machine from [this site](https://aiexperiments.withgoogle.com/drum-machine). In this repo you will find all of the front-end code which visualizes, plays back and makes beats with the audio samples, though it does not contain any audio files or the t-SNE generated from those audio files. You can do that with your own samples by following some of the resources below. 
 
-## INSTALLATION
+## Installation
 
 To build the client-side javascript, first install [node](https://nodejs.org) and [webpack](https://webpack.github.io/). Then you can install of the dependencies and build the files by typing the following in the terminal: 
 
@@ -21,7 +28,7 @@ npm install
 webpack -p
 ```
 
-## CREATING T-SNE MAP
+## Creating t-SNE Map
 
 If you have a large audio dataset, you can convert your sounds to t-SNE map using some of the python scripts found in Kyle McDonald's [AudioNotebooks](https://github.com/kylemcdonald/AudioNotebooks) repo. Our t-SNE was made by running the following scripts: 
 

app/Data.js

@@ -23,7 +23,7 @@ var RTree = require("rtree");
 var drumLike = require("../meta/drum_like.json");
 
 var Data = module.exports = {
-	videoId: 'YTR21os8gTA',
+	videoId: '9x-_My5yjQY',
 	totalChunks: Config.maxChunks,
 	player: new Player().toMaster(),
 	chunkIndexes: [],

index.html

@@ -96,7 +96,7 @@ <h1>THE INFINITE DRUM MACHINE</h1>
 			<div class="videoContainer">
 				<div class="drumsVideo" id="drumsVideo"></div>
 				<img class="playButton" width="90" height="90" src="./img/play_icon_master.svg">
-				<img class="thumbnail" id="thumbnail" src="https://img.youtube.com/vi/YTR21os8gTA/0.jpg" width="600"/>
+				<img class="thumbnail" id="thumbnail" src="https://img.youtube.com/vi/9x-_My5yjQY/0.jpg" width="600"/>
 			</div>
 			<p class="description">
 				Built by Kyle McDonald, Manny Tan, Yotam Mann, and friends at Google Creative Lab. Thanks to <a href="http://wiki.laptop.org/go/Free_sound_samples/" target="_blank">Berklee College of Music</a> and the <a href="http://www.philharmonia.co.uk/explore/make_music/" target="_blank">The Philharmonia Orchestra, London</a> for contributing some sounds to this project. The open-source code is available <a href="https://github.com/googlecreativelab/" target="_blank">here</a>.

package.json

@@ -15,14 +15,16 @@
   "dependencies": {
     "autoprefixer-loader": "^3.2.0",
     "domready": "^1.0.8",
+    "file-loader": "^0.9.0",
     "jshint": "^2.9.1",
     "jshint-loader": "^0.8.3",
     "json-loader": "^0.5.4",
     "node-sass": "^3.4.2",
     "sass-loader": "^3.2.0",
     "style-loader": "^0.13.0",
     "tone": "^0.8.0",
-    "webpack": "^1.12.14"
+    "webpack": "^1.12.14",
+    "youtube-iframe": "^1.0.3"
   },
   "devDependencies": {
     "css-loader": "^0.23.1",