diff --git a/.gitpod.yml b/.gitpod.yml new file mode 100644 index 0000000..42cb0ce --- /dev/null +++ b/.gitpod.yml @@ -0,0 +1,4 @@ +tasks: + - init: npm install && npm run build + command: npm run start +image: gitpod/workspace-full diff --git a/README.md b/README.md index 905258f..c463b3b 100644 --- a/README.md +++ b/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: diff --git a/app/Data.js b/app/Data.js index c85038f..f0b0ad1 100644 --- a/app/Data.js +++ b/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: [], diff --git a/index.html b/index.html index 271a8b4..c52bbee 100644 --- a/index.html +++ b/index.html @@ -96,7 +96,7 @@

THE INFINITE DRUM MACHINE

- +

Built by Kyle McDonald, Manny Tan, Yotam Mann, and friends at Google Creative Lab. Thanks to Berklee College of Music and the The Philharmonia Orchestra, London for contributing some sounds to this project. The open-source code is available here. diff --git a/package.json b/package.json index 5bd0dff..a975c03 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "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", @@ -22,7 +23,8 @@ "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",