├── LICENSE ├── README.md └── examples ├── .gitignore ├── midi-sounds-example1 ├── .gitignore ├── README.md ├── build │ ├── asset-manifest.json │ ├── favicon.ico │ ├── index.html │ ├── manifest.json │ ├── service-worker.js │ └── static │ │ ├── css │ │ ├── main.a2e9df35.css │ │ └── main.a2e9df35.css.map │ │ ├── js │ │ ├── main.99ff84b7.js │ │ └── main.99ff84b7.js.map │ │ └── media │ │ └── logo.ee7cd8ed.svg ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ └── logo.svg ├── midi-sounds-example10 ├── .gitignore ├── README.md ├── build │ ├── asset-manifest.json │ ├── favicon.ico │ ├── index.html │ ├── manifest.json │ ├── service-worker.js │ └── static │ │ ├── css │ │ ├── main.a2e9df35.css │ │ └── main.a2e9df35.css.map │ │ ├── js │ │ ├── main.a7329891.js │ │ └── main.a7329891.js.map │ │ └── media │ │ └── logo.ee7cd8ed.svg ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ └── logo.svg ├── midi-sounds-example11 ├── .gitignore ├── README.md ├── build │ ├── asset-manifest.json │ ├── favicon.ico │ ├── index.html │ ├── manifest.json │ ├── service-worker.js │ └── static │ │ ├── css │ │ ├── main.a2e9df35.css │ │ └── main.a2e9df35.css.map │ │ ├── js │ │ ├── main.5addab69.js │ │ └── main.5addab69.js.map │ │ └── media │ │ └── logo.ee7cd8ed.svg ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ └── logo.svg ├── midi-sounds-example2 ├── .gitignore ├── README.md ├── build │ ├── asset-manifest.json │ ├── favicon.ico │ ├── index.html │ ├── manifest.json │ ├── service-worker.js │ └── static │ │ ├── css │ │ ├── main.a2e9df35.css │ │ └── main.a2e9df35.css.map │ │ ├── js │ │ ├── main.8804dd41.js │ │ └── main.8804dd41.js.map │ │ └── media │ │ └── logo.ee7cd8ed.svg ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ └── logo.svg ├── midi-sounds-example3 ├── .gitignore ├── README.md ├── build │ ├── asset-manifest.json │ ├── favicon.ico │ ├── index.html │ ├── manifest.json │ ├── service-worker.js │ └── static │ │ ├── css │ │ ├── main.a2e9df35.css │ │ └── main.a2e9df35.css.map │ │ ├── js │ │ ├── main.9d123a5f.js │ │ └── main.9d123a5f.js.map │ │ └── media │ │ └── logo.ee7cd8ed.svg ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ └── logo.svg ├── midi-sounds-example4 ├── .gitignore ├── README.md ├── build │ ├── asset-manifest.json │ ├── favicon.ico │ ├── index.html │ ├── manifest.json │ ├── service-worker.js │ └── static │ │ ├── css │ │ ├── main.a2e9df35.css │ │ └── main.a2e9df35.css.map │ │ ├── js │ │ ├── main.93164f45.js │ │ └── main.93164f45.js.map │ │ └── media │ │ └── logo.ee7cd8ed.svg ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ └── logo.svg ├── midi-sounds-example5 ├── .gitignore ├── README.md ├── build │ ├── asset-manifest.json │ ├── favicon.ico │ ├── index.html │ ├── manifest.json │ ├── service-worker.js │ └── static │ │ ├── css │ │ ├── main.a2e9df35.css │ │ └── main.a2e9df35.css.map │ │ ├── js │ │ ├── main.f542ac0d.js │ │ └── main.f542ac0d.js.map │ │ └── media │ │ └── logo.ee7cd8ed.svg ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ └── logo.svg ├── midi-sounds-example6 ├── .gitignore ├── README.md ├── build │ ├── asset-manifest.json │ ├── favicon.ico │ ├── index.html │ ├── manifest.json │ ├── service-worker.js │ └── static │ │ ├── css │ │ ├── main.a2e9df35.css │ │ └── main.a2e9df35.css.map │ │ ├── js │ │ ├── main.a108b856.js │ │ └── main.a108b856.js.map │ │ └── media │ │ └── logo.ee7cd8ed.svg ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ └── logo.svg ├── midi-sounds-example7 ├── .gitignore ├── README.md ├── build │ ├── asset-manifest.json │ ├── favicon.ico │ ├── index.html │ ├── manifest.json │ ├── service-worker.js │ └── static │ │ ├── css │ │ ├── main.a2e9df35.css │ │ └── main.a2e9df35.css.map │ │ ├── js │ │ ├── main.7f33f278.js │ │ └── main.7f33f278.js.map │ │ └── media │ │ └── logo.ee7cd8ed.svg ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ └── logo.svg ├── midi-sounds-example8 ├── .gitignore ├── README.md ├── build │ ├── asset-manifest.json │ ├── favicon.ico │ ├── index.html │ ├── manifest.json │ ├── service-worker.js │ └── static │ │ ├── css │ │ ├── main.a2e9df35.css │ │ └── main.a2e9df35.css.map │ │ ├── js │ │ ├── main.3aef8ee4.js │ │ └── main.3aef8ee4.js.map │ │ └── media │ │ └── logo.ee7cd8ed.svg ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ └── logo.svg └── midi-sounds-example9 ├── .gitignore ├── README.md ├── build ├── asset-manifest.json ├── favicon.ico ├── index.html ├── manifest.json ├── service-worker.js └── static │ ├── css │ ├── main.a2e9df35.css │ └── main.a2e9df35.css.map │ ├── js │ ├── main.8ab4c3e2.js │ └── main.8ab4c3e2.js.map │ └── media │ └── logo.ee7cd8ed.svg ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html └── manifest.json └── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js └── logo.svg /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Srgy Surkv 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # midi-sounds-react-examples -------------------------------------------------------------------------------- /examples/.gitignore: -------------------------------------------------------------------------------- 1 | /midi-sounds-exampleX 2 | -------------------------------------------------------------------------------- /examples/midi-sounds-example1/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # misc 10 | .DS_Store 11 | .env.local 12 | .env.development.local 13 | .env.test.local 14 | .env.production.local 15 | 16 | npm-debug.log* 17 | yarn-debug.log* 18 | yarn-error.log* 19 | -------------------------------------------------------------------------------- /examples/midi-sounds-example1/README.md: -------------------------------------------------------------------------------- 1 | midi-sounds-example6 -------------------------------------------------------------------------------- /examples/midi-sounds-example1/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "main.css": "static/css/main.a2e9df35.css", 3 | "main.css.map": "static/css/main.a2e9df35.css.map", 4 | "main.js": "static/js/main.99ff84b7.js", 5 | "main.js.map": "static/js/main.99ff84b7.js.map", 6 | "static\\media\\logo.svg": "static/media/logo.ee7cd8ed.svg" 7 | } -------------------------------------------------------------------------------- /examples/midi-sounds-example1/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surikov/midi-sounds-react-examples/61c88f10e0bbc861b3fee1fc97b22a23e07725ed/examples/midi-sounds-example1/build/favicon.ico -------------------------------------------------------------------------------- /examples/midi-sounds-example1/build/index.html: -------------------------------------------------------------------------------- 1 | React App
-------------------------------------------------------------------------------- /examples/midi-sounds-example1/build/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/midi-sounds-example1/build/service-worker.js: -------------------------------------------------------------------------------- 1 | "use strict";var precacheConfig=[["/midi-sounds-react-examples/examples/midi-sounds-example1/build/index.html","3489e49809da597ec19ded8606823b27"],["/midi-sounds-react-examples/examples/midi-sounds-example1/build/static/css/main.a2e9df35.css","b3dfa7a31a3365f957520b8522501d1a"],["/midi-sounds-react-examples/examples/midi-sounds-example1/build/static/js/main.99ff84b7.js","46396230f1dd9b3b9e26550bb568763a"],["/midi-sounds-react-examples/examples/midi-sounds-example1/build/static/media/logo.ee7cd8ed.svg","ee7cd8ed2dcec943251eb2763684fc6f"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(e){return e.redirected?("body"in e?Promise.resolve(e.body):e.blob()).then(function(t){return new Response(t,{headers:e.headers,status:e.status,statusText:e.statusText})}):Promise.resolve(e)},createCacheKey=function(e,t,n,r){var s=new URL(e);return r&&s.pathname.match(r)||(s.search+=(s.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),s.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,t){var n=new URL(e);return n.hash="",n.search=n.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(e){return t.every(function(t){return!t.test(e[0])})}).map(function(e){return e.join("=")}).join("&"),n.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],r=new URL(t,self.location),s=createCacheKey(r,hashParamName,n,/\.\w{8}\./);return[r.toString(),s]}));function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(e){return setOfCachedUrls(e).then(function(t){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(n){if(!t.has(n)){var r=new Request(n,{credentials:"same-origin"});return fetch(r).then(function(t){if(!t.ok)throw new Error("Request for "+n+" returned a response with status "+t.status);return cleanResponse(t).then(function(t){return e.put(n,t)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var t=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(e){return e.keys().then(function(n){return Promise.all(n.map(function(n){if(!t.has(n.url))return e.delete(n)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(e){if("GET"===e.request.method){var t,n=stripIgnoredUrlParameters(e.request.url,ignoreUrlParametersMatching),r="index.html";(t=urlsToCacheKeys.has(n))||(n=addDirectoryIndex(n,r),t=urlsToCacheKeys.has(n));var s="/midi-sounds-react-examples/examples/midi-sounds-example1/build/index.html";!t&&"navigate"===e.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],e.request.url)&&(n=new URL(s,self.location).toString(),t=urlsToCacheKeys.has(n)),t&&e.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(t){return console.warn('Couldn\'t serve response for "%s" from cache: %O',e.request.url,t),fetch(e.request)}))}}); -------------------------------------------------------------------------------- /examples/midi-sounds-example1/build/static/css/main.a2e9df35.css: -------------------------------------------------------------------------------- 1 | body{margin:0;padding:0;font-family:sans-serif}.App{text-align:center}.App-logo{height:80px}.App-header{background-color:#222;height:150px;padding:20px;color:#fff}.App-title{font-size:1.5em}.App-intro{font-size:large}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}} 2 | /*# sourceMappingURL=main.a2e9df35.css.map*/ -------------------------------------------------------------------------------- /examples/midi-sounds-example1/build/static/css/main.a2e9df35.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["index.css","App.css"],"names":[],"mappings":"AAAA,KACE,SACA,UACA,sBAAwB,CCH1B,KACE,iBAAmB,CAGrB,UACE,WAAa,CAGf,YACE,sBACA,aACA,aACA,UAAa,CAGf,WACE,eAAiB,CAGnB,WACE,eAAiB,CAGnB,iCACE,GAAO,+BAAiC,sBAAwB,CAChE,GAAK,gCAAmC,uBAA0B,CAAE,CAGtE,yBACE,GAAO,+BAAiC,sBAAwB,CAChE,GAAK,gCAAmC,uBAA0B,CAAE","file":"static/css/main.a2e9df35.css","sourcesContent":["body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: sans-serif;\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/index.css",".App {\r\n text-align: center;\r\n}\r\n\r\n.App-logo {\r\n height: 80px;\r\n}\r\n\r\n.App-header {\r\n background-color: #222;\r\n height: 150px;\r\n padding: 20px;\r\n color: white;\r\n}\r\n\r\n.App-title {\r\n font-size: 1.5em;\r\n}\r\n\r\n.App-intro {\r\n font-size: large;\r\n}\r\n\r\n@-webkit-keyframes App-logo-spin {\r\n from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }\r\n to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }\r\n}\r\n\r\n@keyframes App-logo-spin {\r\n from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }\r\n to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/App.css"],"sourceRoot":""} -------------------------------------------------------------------------------- /examples/midi-sounds-example1/build/static/media/logo.ee7cd8ed.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/midi-sounds-example1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "midi-sounds-examples", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://surikov.github.io/midi-sounds-react-examples/examples/midi-sounds-example1/build", 6 | "dependencies": { 7 | "react": "^16.2.0", 8 | "react-dom": "^16.2.0", 9 | "react-scripts": "1.1.0", 10 | "midi-sounds-react": "^1.2.45" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test --env=jsdom", 16 | "eject": "react-scripts eject" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/midi-sounds-example1/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surikov/midi-sounds-react-examples/61c88f10e0bbc861b3fee1fc97b22a23e07725ed/examples/midi-sounds-example1/public/favicon.ico -------------------------------------------------------------------------------- /examples/midi-sounds-example1/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /examples/midi-sounds-example1/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/midi-sounds-example1/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 80px; 7 | } 8 | 9 | .App-header { 10 | background-color: #222; 11 | height: 150px; 12 | padding: 20px; 13 | color: white; 14 | } 15 | 16 | .App-title { 17 | font-size: 1.5em; 18 | } 19 | 20 | .App-intro { 21 | font-size: large; 22 | } 23 | 24 | @keyframes App-logo-spin { 25 | from { transform: rotate(0deg); } 26 | to { transform: rotate(360deg); } 27 | } 28 | -------------------------------------------------------------------------------- /examples/midi-sounds-example1/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import logo from './logo.svg'; 3 | import './App.css'; 4 | import MIDISounds from 'midi-sounds-react'; 5 | 6 | class App extends Component { 7 | playTestInstrument() { 8 | this.midiSounds.playChordNow(3, [60], 2.5); 9 | } 10 | render() { 11 | return ( 12 |
13 |
14 | logo 15 |

Welcome to midi-sounds-react example 1

16 |
17 |

Press Play to play instrument sound.

18 |

19 |

Component

20 | (this.midiSounds = ref)} appElementName="root" instruments={[3]} /> 21 |
22 |

Sources: https://www.npmjs.com/package/midi-sounds-react

23 |
24 | ); 25 | } 26 | } 27 | 28 | export default App; 29 | -------------------------------------------------------------------------------- /examples/midi-sounds-example1/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /examples/midi-sounds-example1/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /examples/midi-sounds-example1/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | 8 | -------------------------------------------------------------------------------- /examples/midi-sounds-example1/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/midi-sounds-example10/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # misc 10 | .DS_Store 11 | .env.local 12 | .env.development.local 13 | .env.test.local 14 | .env.production.local 15 | 16 | npm-debug.log* 17 | yarn-debug.log* 18 | yarn-error.log* 19 | -------------------------------------------------------------------------------- /examples/midi-sounds-example10/README.md: -------------------------------------------------------------------------------- 1 | midi-sounds-example6 -------------------------------------------------------------------------------- /examples/midi-sounds-example10/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "main.css": "static/css/main.a2e9df35.css", 3 | "main.css.map": "static/css/main.a2e9df35.css.map", 4 | "main.js": "static/js/main.a7329891.js", 5 | "main.js.map": "static/js/main.a7329891.js.map", 6 | "static\\media\\logo.svg": "static/media/logo.ee7cd8ed.svg" 7 | } -------------------------------------------------------------------------------- /examples/midi-sounds-example10/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surikov/midi-sounds-react-examples/61c88f10e0bbc861b3fee1fc97b22a23e07725ed/examples/midi-sounds-example10/build/favicon.ico -------------------------------------------------------------------------------- /examples/midi-sounds-example10/build/index.html: -------------------------------------------------------------------------------- 1 | React App
-------------------------------------------------------------------------------- /examples/midi-sounds-example10/build/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/midi-sounds-example10/build/service-worker.js: -------------------------------------------------------------------------------- 1 | "use strict";var precacheConfig=[["/midi-sounds-react-examples/examples/midi-sounds-example10/build/index.html","cef2a484bb6b96b128504a86636b540d"],["/midi-sounds-react-examples/examples/midi-sounds-example10/build/static/css/main.a2e9df35.css","b3dfa7a31a3365f957520b8522501d1a"],["/midi-sounds-react-examples/examples/midi-sounds-example10/build/static/js/main.a7329891.js","6e01c587f9e9eaee6903aec1471e071f"],["/midi-sounds-react-examples/examples/midi-sounds-example10/build/static/media/logo.ee7cd8ed.svg","ee7cd8ed2dcec943251eb2763684fc6f"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(e){return e.redirected?("body"in e?Promise.resolve(e.body):e.blob()).then(function(t){return new Response(t,{headers:e.headers,status:e.status,statusText:e.statusText})}):Promise.resolve(e)},createCacheKey=function(e,t,n,r){var a=new URL(e);return r&&a.pathname.match(r)||(a.search+=(a.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),a.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,t){var n=new URL(e);return n.hash="",n.search=n.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(e){return t.every(function(t){return!t.test(e[0])})}).map(function(e){return e.join("=")}).join("&"),n.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],r=new URL(t,self.location),a=createCacheKey(r,hashParamName,n,/\.\w{8}\./);return[r.toString(),a]}));function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(e){return setOfCachedUrls(e).then(function(t){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(n){if(!t.has(n)){var r=new Request(n,{credentials:"same-origin"});return fetch(r).then(function(t){if(!t.ok)throw new Error("Request for "+n+" returned a response with status "+t.status);return cleanResponse(t).then(function(t){return e.put(n,t)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var t=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(e){return e.keys().then(function(n){return Promise.all(n.map(function(n){if(!t.has(n.url))return e.delete(n)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(e){if("GET"===e.request.method){var t,n=stripIgnoredUrlParameters(e.request.url,ignoreUrlParametersMatching),r="index.html";(t=urlsToCacheKeys.has(n))||(n=addDirectoryIndex(n,r),t=urlsToCacheKeys.has(n));var a="/midi-sounds-react-examples/examples/midi-sounds-example10/build/index.html";!t&&"navigate"===e.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],e.request.url)&&(n=new URL(a,self.location).toString(),t=urlsToCacheKeys.has(n)),t&&e.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(t){return console.warn('Couldn\'t serve response for "%s" from cache: %O',e.request.url,t),fetch(e.request)}))}}); -------------------------------------------------------------------------------- /examples/midi-sounds-example10/build/static/css/main.a2e9df35.css: -------------------------------------------------------------------------------- 1 | body{margin:0;padding:0;font-family:sans-serif}.App{text-align:center}.App-logo{height:80px}.App-header{background-color:#222;height:150px;padding:20px;color:#fff}.App-title{font-size:1.5em}.App-intro{font-size:large}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}} 2 | /*# sourceMappingURL=main.a2e9df35.css.map*/ -------------------------------------------------------------------------------- /examples/midi-sounds-example10/build/static/css/main.a2e9df35.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["index.css","App.css"],"names":[],"mappings":"AAAA,KACE,SACA,UACA,sBAAwB,CCH1B,KACE,iBAAmB,CAGrB,UACE,WAAa,CAGf,YACE,sBACA,aACA,aACA,UAAa,CAGf,WACE,eAAiB,CAGnB,WACE,eAAiB,CAGnB,iCACE,GAAO,+BAAiC,sBAAwB,CAChE,GAAK,gCAAmC,uBAA0B,CAAE,CAGtE,yBACE,GAAO,+BAAiC,sBAAwB,CAChE,GAAK,gCAAmC,uBAA0B,CAAE","file":"static/css/main.a2e9df35.css","sourcesContent":["body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: sans-serif;\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/index.css",".App {\r\n text-align: center;\r\n}\r\n\r\n.App-logo {\r\n height: 80px;\r\n}\r\n\r\n.App-header {\r\n background-color: #222;\r\n height: 150px;\r\n padding: 20px;\r\n color: white;\r\n}\r\n\r\n.App-title {\r\n font-size: 1.5em;\r\n}\r\n\r\n.App-intro {\r\n font-size: large;\r\n}\r\n\r\n@-webkit-keyframes App-logo-spin {\r\n from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }\r\n to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }\r\n}\r\n\r\n@keyframes App-logo-spin {\r\n from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }\r\n to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/App.css"],"sourceRoot":""} -------------------------------------------------------------------------------- /examples/midi-sounds-example10/build/static/media/logo.ee7cd8ed.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/midi-sounds-example10/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "midi-sounds-examples", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://surikov.github.io/midi-sounds-react-examples/examples/midi-sounds-example10/build", 6 | "dependencies": { 7 | "react": "^16.2.0", 8 | "react-dom": "^16.2.0", 9 | "react-scripts": "1.1.0", 10 | "midi-sounds-react": "^1.2.54" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test --env=jsdom", 16 | "eject": "react-scripts eject" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/midi-sounds-example10/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surikov/midi-sounds-react-examples/61c88f10e0bbc861b3fee1fc97b22a23e07725ed/examples/midi-sounds-example10/public/favicon.ico -------------------------------------------------------------------------------- /examples/midi-sounds-example10/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /examples/midi-sounds-example10/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/midi-sounds-example10/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 80px; 7 | } 8 | 9 | .App-header { 10 | background-color: #222; 11 | height: 150px; 12 | padding: 20px; 13 | color: white; 14 | } 15 | 16 | .App-title { 17 | font-size: 1.5em; 18 | } 19 | 20 | .App-intro { 21 | font-size: large; 22 | } 23 | 24 | @keyframes App-logo-spin { 25 | from { transform: rotate(0deg); } 26 | to { transform: rotate(360deg); } 27 | } 28 | -------------------------------------------------------------------------------- /examples/midi-sounds-example10/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /examples/midi-sounds-example10/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /examples/midi-sounds-example10/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | 8 | -------------------------------------------------------------------------------- /examples/midi-sounds-example10/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/midi-sounds-example11/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # misc 10 | .DS_Store 11 | .env.local 12 | .env.development.local 13 | .env.test.local 14 | .env.production.local 15 | 16 | npm-debug.log* 17 | yarn-debug.log* 18 | yarn-error.log* 19 | -------------------------------------------------------------------------------- /examples/midi-sounds-example11/README.md: -------------------------------------------------------------------------------- 1 | midi-sounds-example6 -------------------------------------------------------------------------------- /examples/midi-sounds-example11/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "main.css": "static/css/main.a2e9df35.css", 3 | "main.css.map": "static/css/main.a2e9df35.css.map", 4 | "main.js": "static/js/main.5addab69.js", 5 | "main.js.map": "static/js/main.5addab69.js.map", 6 | "static\\media\\logo.svg": "static/media/logo.ee7cd8ed.svg" 7 | } -------------------------------------------------------------------------------- /examples/midi-sounds-example11/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surikov/midi-sounds-react-examples/61c88f10e0bbc861b3fee1fc97b22a23e07725ed/examples/midi-sounds-example11/build/favicon.ico -------------------------------------------------------------------------------- /examples/midi-sounds-example11/build/index.html: -------------------------------------------------------------------------------- 1 | React App
-------------------------------------------------------------------------------- /examples/midi-sounds-example11/build/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/midi-sounds-example11/build/service-worker.js: -------------------------------------------------------------------------------- 1 | "use strict";var precacheConfig=[["/midi-sounds-react-examples/examples/midi-sounds-example11/build/index.html","548c74604859e3ff350dcd8ad542b980"],["/midi-sounds-react-examples/examples/midi-sounds-example11/build/static/css/main.a2e9df35.css","b3dfa7a31a3365f957520b8522501d1a"],["/midi-sounds-react-examples/examples/midi-sounds-example11/build/static/js/main.5addab69.js","9568e61dc2284e1e919c8cd2ad8c515a"],["/midi-sounds-react-examples/examples/midi-sounds-example11/build/static/media/logo.ee7cd8ed.svg","ee7cd8ed2dcec943251eb2763684fc6f"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(e){return e.redirected?("body"in e?Promise.resolve(e.body):e.blob()).then(function(t){return new Response(t,{headers:e.headers,status:e.status,statusText:e.statusText})}):Promise.resolve(e)},createCacheKey=function(e,t,n,r){var a=new URL(e);return r&&a.pathname.match(r)||(a.search+=(a.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),a.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,t){var n=new URL(e);return n.hash="",n.search=n.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(e){return t.every(function(t){return!t.test(e[0])})}).map(function(e){return e.join("=")}).join("&"),n.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],r=new URL(t,self.location),a=createCacheKey(r,hashParamName,n,/\.\w{8}\./);return[r.toString(),a]}));function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(e){return setOfCachedUrls(e).then(function(t){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(n){if(!t.has(n)){var r=new Request(n,{credentials:"same-origin"});return fetch(r).then(function(t){if(!t.ok)throw new Error("Request for "+n+" returned a response with status "+t.status);return cleanResponse(t).then(function(t){return e.put(n,t)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var t=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(e){return e.keys().then(function(n){return Promise.all(n.map(function(n){if(!t.has(n.url))return e.delete(n)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(e){if("GET"===e.request.method){var t,n=stripIgnoredUrlParameters(e.request.url,ignoreUrlParametersMatching),r="index.html";(t=urlsToCacheKeys.has(n))||(n=addDirectoryIndex(n,r),t=urlsToCacheKeys.has(n));var a="/midi-sounds-react-examples/examples/midi-sounds-example11/build/index.html";!t&&"navigate"===e.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],e.request.url)&&(n=new URL(a,self.location).toString(),t=urlsToCacheKeys.has(n)),t&&e.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(t){return console.warn('Couldn\'t serve response for "%s" from cache: %O',e.request.url,t),fetch(e.request)}))}}); -------------------------------------------------------------------------------- /examples/midi-sounds-example11/build/static/css/main.a2e9df35.css: -------------------------------------------------------------------------------- 1 | body{margin:0;padding:0;font-family:sans-serif}.App{text-align:center}.App-logo{height:80px}.App-header{background-color:#222;height:150px;padding:20px;color:#fff}.App-title{font-size:1.5em}.App-intro{font-size:large}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}} 2 | /*# sourceMappingURL=main.a2e9df35.css.map*/ -------------------------------------------------------------------------------- /examples/midi-sounds-example11/build/static/css/main.a2e9df35.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["index.css","App.css"],"names":[],"mappings":"AAAA,KACE,SACA,UACA,sBAAwB,CCH1B,KACE,iBAAmB,CAGrB,UACE,WAAa,CAGf,YACE,sBACA,aACA,aACA,UAAa,CAGf,WACE,eAAiB,CAGnB,WACE,eAAiB,CAGnB,iCACE,GAAO,+BAAiC,sBAAwB,CAChE,GAAK,gCAAmC,uBAA0B,CAAE,CAGtE,yBACE,GAAO,+BAAiC,sBAAwB,CAChE,GAAK,gCAAmC,uBAA0B,CAAE","file":"static/css/main.a2e9df35.css","sourcesContent":["body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: sans-serif;\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/index.css",".App {\r\n text-align: center;\r\n}\r\n\r\n.App-logo {\r\n height: 80px;\r\n}\r\n\r\n.App-header {\r\n background-color: #222;\r\n height: 150px;\r\n padding: 20px;\r\n color: white;\r\n}\r\n\r\n.App-title {\r\n font-size: 1.5em;\r\n}\r\n\r\n.App-intro {\r\n font-size: large;\r\n}\r\n\r\n@-webkit-keyframes App-logo-spin {\r\n from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }\r\n to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }\r\n}\r\n\r\n@keyframes App-logo-spin {\r\n from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }\r\n to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/App.css"],"sourceRoot":""} -------------------------------------------------------------------------------- /examples/midi-sounds-example11/build/static/media/logo.ee7cd8ed.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/midi-sounds-example11/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "midi-sounds-examples", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://surikov.github.io/midi-sounds-react-examples/examples/midi-sounds-example11/build", 6 | "dependencies": { 7 | "react": "^16.2.0", 8 | "react-dom": "^16.2.0", 9 | "react-scripts": "1.1.0", 10 | "midi-sounds-react": "^1.2.45" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test --env=jsdom", 16 | "eject": "react-scripts eject" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/midi-sounds-example11/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surikov/midi-sounds-react-examples/61c88f10e0bbc861b3fee1fc97b22a23e07725ed/examples/midi-sounds-example11/public/favicon.ico -------------------------------------------------------------------------------- /examples/midi-sounds-example11/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /examples/midi-sounds-example11/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/midi-sounds-example11/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 80px; 7 | } 8 | 9 | .App-header { 10 | background-color: #222; 11 | height: 150px; 12 | padding: 20px; 13 | color: white; 14 | } 15 | 16 | .App-title { 17 | font-size: 1.5em; 18 | } 19 | 20 | .App-intro { 21 | font-size: large; 22 | } 23 | 24 | @keyframes App-logo-spin { 25 | from { transform: rotate(0deg); } 26 | to { transform: rotate(360deg); } 27 | } 28 | -------------------------------------------------------------------------------- /examples/midi-sounds-example11/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /examples/midi-sounds-example11/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /examples/midi-sounds-example11/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | 8 | -------------------------------------------------------------------------------- /examples/midi-sounds-example11/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/midi-sounds-example2/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # misc 10 | .DS_Store 11 | .env.local 12 | .env.development.local 13 | .env.test.local 14 | .env.production.local 15 | 16 | npm-debug.log* 17 | yarn-debug.log* 18 | yarn-error.log* 19 | -------------------------------------------------------------------------------- /examples/midi-sounds-example2/README.md: -------------------------------------------------------------------------------- 1 | midi-sounds-example6 -------------------------------------------------------------------------------- /examples/midi-sounds-example2/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "main.css": "static/css/main.a2e9df35.css", 3 | "main.css.map": "static/css/main.a2e9df35.css.map", 4 | "main.js": "static/js/main.8804dd41.js", 5 | "main.js.map": "static/js/main.8804dd41.js.map", 6 | "static\\media\\logo.svg": "static/media/logo.ee7cd8ed.svg" 7 | } -------------------------------------------------------------------------------- /examples/midi-sounds-example2/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surikov/midi-sounds-react-examples/61c88f10e0bbc861b3fee1fc97b22a23e07725ed/examples/midi-sounds-example2/build/favicon.ico -------------------------------------------------------------------------------- /examples/midi-sounds-example2/build/index.html: -------------------------------------------------------------------------------- 1 | React App
-------------------------------------------------------------------------------- /examples/midi-sounds-example2/build/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/midi-sounds-example2/build/service-worker.js: -------------------------------------------------------------------------------- 1 | "use strict";var precacheConfig=[["/midi-sounds-react-examples/examples/midi-sounds-example2/build/index.html","a1cdd1cc19caf8740fd92865d1610160"],["/midi-sounds-react-examples/examples/midi-sounds-example2/build/static/css/main.a2e9df35.css","b3dfa7a31a3365f957520b8522501d1a"],["/midi-sounds-react-examples/examples/midi-sounds-example2/build/static/js/main.8804dd41.js","47803a2b672b515800bf660ba6490878"],["/midi-sounds-react-examples/examples/midi-sounds-example2/build/static/media/logo.ee7cd8ed.svg","ee7cd8ed2dcec943251eb2763684fc6f"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(e){return e.redirected?("body"in e?Promise.resolve(e.body):e.blob()).then(function(t){return new Response(t,{headers:e.headers,status:e.status,statusText:e.statusText})}):Promise.resolve(e)},createCacheKey=function(e,t,n,r){var s=new URL(e);return r&&s.pathname.match(r)||(s.search+=(s.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),s.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,t){var n=new URL(e);return n.hash="",n.search=n.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(e){return t.every(function(t){return!t.test(e[0])})}).map(function(e){return e.join("=")}).join("&"),n.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],r=new URL(t,self.location),s=createCacheKey(r,hashParamName,n,/\.\w{8}\./);return[r.toString(),s]}));function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(e){return setOfCachedUrls(e).then(function(t){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(n){if(!t.has(n)){var r=new Request(n,{credentials:"same-origin"});return fetch(r).then(function(t){if(!t.ok)throw new Error("Request for "+n+" returned a response with status "+t.status);return cleanResponse(t).then(function(t){return e.put(n,t)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var t=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(e){return e.keys().then(function(n){return Promise.all(n.map(function(n){if(!t.has(n.url))return e.delete(n)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(e){if("GET"===e.request.method){var t,n=stripIgnoredUrlParameters(e.request.url,ignoreUrlParametersMatching),r="index.html";(t=urlsToCacheKeys.has(n))||(n=addDirectoryIndex(n,r),t=urlsToCacheKeys.has(n));var s="/midi-sounds-react-examples/examples/midi-sounds-example2/build/index.html";!t&&"navigate"===e.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],e.request.url)&&(n=new URL(s,self.location).toString(),t=urlsToCacheKeys.has(n)),t&&e.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(t){return console.warn('Couldn\'t serve response for "%s" from cache: %O',e.request.url,t),fetch(e.request)}))}}); -------------------------------------------------------------------------------- /examples/midi-sounds-example2/build/static/css/main.a2e9df35.css: -------------------------------------------------------------------------------- 1 | body{margin:0;padding:0;font-family:sans-serif}.App{text-align:center}.App-logo{height:80px}.App-header{background-color:#222;height:150px;padding:20px;color:#fff}.App-title{font-size:1.5em}.App-intro{font-size:large}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}} 2 | /*# sourceMappingURL=main.a2e9df35.css.map*/ -------------------------------------------------------------------------------- /examples/midi-sounds-example2/build/static/css/main.a2e9df35.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["index.css","App.css"],"names":[],"mappings":"AAAA,KACE,SACA,UACA,sBAAwB,CCH1B,KACE,iBAAmB,CAGrB,UACE,WAAa,CAGf,YACE,sBACA,aACA,aACA,UAAa,CAGf,WACE,eAAiB,CAGnB,WACE,eAAiB,CAGnB,iCACE,GAAO,+BAAiC,sBAAwB,CAChE,GAAK,gCAAmC,uBAA0B,CAAE,CAGtE,yBACE,GAAO,+BAAiC,sBAAwB,CAChE,GAAK,gCAAmC,uBAA0B,CAAE","file":"static/css/main.a2e9df35.css","sourcesContent":["body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: sans-serif;\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/index.css",".App {\r\n text-align: center;\r\n}\r\n\r\n.App-logo {\r\n height: 80px;\r\n}\r\n\r\n.App-header {\r\n background-color: #222;\r\n height: 150px;\r\n padding: 20px;\r\n color: white;\r\n}\r\n\r\n.App-title {\r\n font-size: 1.5em;\r\n}\r\n\r\n.App-intro {\r\n font-size: large;\r\n}\r\n\r\n@-webkit-keyframes App-logo-spin {\r\n from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }\r\n to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }\r\n}\r\n\r\n@keyframes App-logo-spin {\r\n from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }\r\n to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/App.css"],"sourceRoot":""} -------------------------------------------------------------------------------- /examples/midi-sounds-example2/build/static/media/logo.ee7cd8ed.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/midi-sounds-example2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "midi-sounds-examples", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://surikov.github.io/midi-sounds-react-examples/examples/midi-sounds-example2/build", 6 | "dependencies": { 7 | "react": "^16.2.0", 8 | "react-dom": "^16.2.0", 9 | "react-scripts": "1.1.0", 10 | "midi-sounds-react": "^1.2.45" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test --env=jsdom", 16 | "eject": "react-scripts eject" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/midi-sounds-example2/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surikov/midi-sounds-react-examples/61c88f10e0bbc861b3fee1fc97b22a23e07725ed/examples/midi-sounds-example2/public/favicon.ico -------------------------------------------------------------------------------- /examples/midi-sounds-example2/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /examples/midi-sounds-example2/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/midi-sounds-example2/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 80px; 7 | } 8 | 9 | .App-header { 10 | background-color: #222; 11 | height: 150px; 12 | padding: 20px; 13 | color: white; 14 | } 15 | 16 | .App-title { 17 | font-size: 1.5em; 18 | } 19 | 20 | .App-intro { 21 | font-size: large; 22 | } 23 | 24 | @keyframes App-logo-spin { 25 | from { transform: rotate(0deg); } 26 | to { transform: rotate(360deg); } 27 | } 28 | -------------------------------------------------------------------------------- /examples/midi-sounds-example2/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import logo from './logo.svg'; 3 | import './App.css'; 4 | import MIDISounds from 'midi-sounds-react'; 5 | 6 | class App extends Component { 7 | playTestDrum() { 8 | this.midiSounds.playDrumsNow([16]); 9 | } 10 | render() { 11 | return ( 12 |
13 |
14 | logo 15 |

Welcome to midi-sounds-react example 2

16 |
17 |

Press Play to play drum sound.

18 |

19 |

Component

20 | (this.midiSounds = ref)} appElementName="root" drums={[16]} /> 21 |
22 |

Sources: https://www.npmjs.com/package/midi-sounds-react

23 |
24 | ); 25 | } 26 | } 27 | 28 | export default App; 29 | -------------------------------------------------------------------------------- /examples/midi-sounds-example2/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /examples/midi-sounds-example2/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /examples/midi-sounds-example2/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | 8 | -------------------------------------------------------------------------------- /examples/midi-sounds-example2/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/midi-sounds-example3/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # misc 10 | .DS_Store 11 | .env.local 12 | .env.development.local 13 | .env.test.local 14 | .env.production.local 15 | 16 | npm-debug.log* 17 | yarn-debug.log* 18 | yarn-error.log* 19 | -------------------------------------------------------------------------------- /examples/midi-sounds-example3/README.md: -------------------------------------------------------------------------------- 1 | midi-sounds-example6 -------------------------------------------------------------------------------- /examples/midi-sounds-example3/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "main.css": "static/css/main.a2e9df35.css", 3 | "main.css.map": "static/css/main.a2e9df35.css.map", 4 | "main.js": "static/js/main.9d123a5f.js", 5 | "main.js.map": "static/js/main.9d123a5f.js.map", 6 | "static\\media\\logo.svg": "static/media/logo.ee7cd8ed.svg" 7 | } -------------------------------------------------------------------------------- /examples/midi-sounds-example3/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surikov/midi-sounds-react-examples/61c88f10e0bbc861b3fee1fc97b22a23e07725ed/examples/midi-sounds-example3/build/favicon.ico -------------------------------------------------------------------------------- /examples/midi-sounds-example3/build/index.html: -------------------------------------------------------------------------------- 1 | React App
-------------------------------------------------------------------------------- /examples/midi-sounds-example3/build/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/midi-sounds-example3/build/service-worker.js: -------------------------------------------------------------------------------- 1 | "use strict";var precacheConfig=[["/midi-sounds-react-examples/examples/midi-sounds-example3/build/index.html","80cd4759bed436510c1619478801d67d"],["/midi-sounds-react-examples/examples/midi-sounds-example3/build/static/css/main.a2e9df35.css","b3dfa7a31a3365f957520b8522501d1a"],["/midi-sounds-react-examples/examples/midi-sounds-example3/build/static/js/main.9d123a5f.js","8f48ec5644f3789c46547d47803eb1c0"],["/midi-sounds-react-examples/examples/midi-sounds-example3/build/static/media/logo.ee7cd8ed.svg","ee7cd8ed2dcec943251eb2763684fc6f"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(e){return e.redirected?("body"in e?Promise.resolve(e.body):e.blob()).then(function(t){return new Response(t,{headers:e.headers,status:e.status,statusText:e.statusText})}):Promise.resolve(e)},createCacheKey=function(e,t,n,r){var s=new URL(e);return r&&s.pathname.match(r)||(s.search+=(s.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),s.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,t){var n=new URL(e);return n.hash="",n.search=n.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(e){return t.every(function(t){return!t.test(e[0])})}).map(function(e){return e.join("=")}).join("&"),n.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],r=new URL(t,self.location),s=createCacheKey(r,hashParamName,n,/\.\w{8}\./);return[r.toString(),s]}));function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(e){return setOfCachedUrls(e).then(function(t){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(n){if(!t.has(n)){var r=new Request(n,{credentials:"same-origin"});return fetch(r).then(function(t){if(!t.ok)throw new Error("Request for "+n+" returned a response with status "+t.status);return cleanResponse(t).then(function(t){return e.put(n,t)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var t=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(e){return e.keys().then(function(n){return Promise.all(n.map(function(n){if(!t.has(n.url))return e.delete(n)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(e){if("GET"===e.request.method){var t,n=stripIgnoredUrlParameters(e.request.url,ignoreUrlParametersMatching),r="index.html";(t=urlsToCacheKeys.has(n))||(n=addDirectoryIndex(n,r),t=urlsToCacheKeys.has(n));var s="/midi-sounds-react-examples/examples/midi-sounds-example3/build/index.html";!t&&"navigate"===e.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],e.request.url)&&(n=new URL(s,self.location).toString(),t=urlsToCacheKeys.has(n)),t&&e.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(t){return console.warn('Couldn\'t serve response for "%s" from cache: %O',e.request.url,t),fetch(e.request)}))}}); -------------------------------------------------------------------------------- /examples/midi-sounds-example3/build/static/css/main.a2e9df35.css: -------------------------------------------------------------------------------- 1 | body{margin:0;padding:0;font-family:sans-serif}.App{text-align:center}.App-logo{height:80px}.App-header{background-color:#222;height:150px;padding:20px;color:#fff}.App-title{font-size:1.5em}.App-intro{font-size:large}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}} 2 | /*# sourceMappingURL=main.a2e9df35.css.map*/ -------------------------------------------------------------------------------- /examples/midi-sounds-example3/build/static/css/main.a2e9df35.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["index.css","App.css"],"names":[],"mappings":"AAAA,KACE,SACA,UACA,sBAAwB,CCH1B,KACE,iBAAmB,CAGrB,UACE,WAAa,CAGf,YACE,sBACA,aACA,aACA,UAAa,CAGf,WACE,eAAiB,CAGnB,WACE,eAAiB,CAGnB,iCACE,GAAO,+BAAiC,sBAAwB,CAChE,GAAK,gCAAmC,uBAA0B,CAAE,CAGtE,yBACE,GAAO,+BAAiC,sBAAwB,CAChE,GAAK,gCAAmC,uBAA0B,CAAE","file":"static/css/main.a2e9df35.css","sourcesContent":["body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: sans-serif;\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/index.css",".App {\r\n text-align: center;\r\n}\r\n\r\n.App-logo {\r\n height: 80px;\r\n}\r\n\r\n.App-header {\r\n background-color: #222;\r\n height: 150px;\r\n padding: 20px;\r\n color: white;\r\n}\r\n\r\n.App-title {\r\n font-size: 1.5em;\r\n}\r\n\r\n.App-intro {\r\n font-size: large;\r\n}\r\n\r\n@-webkit-keyframes App-logo-spin {\r\n from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }\r\n to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }\r\n}\r\n\r\n@keyframes App-logo-spin {\r\n from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }\r\n to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/App.css"],"sourceRoot":""} -------------------------------------------------------------------------------- /examples/midi-sounds-example3/build/static/media/logo.ee7cd8ed.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/midi-sounds-example3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "midi-sounds-examples", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://surikov.github.io/midi-sounds-react-examples/examples/midi-sounds-example3/build", 6 | "dependencies": { 7 | "react": "^16.2.0", 8 | "react-dom": "^16.2.0", 9 | "react-scripts": "1.1.0", 10 | "midi-sounds-react": "^1.2.45" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test --env=jsdom", 16 | "eject": "react-scripts eject" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/midi-sounds-example3/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surikov/midi-sounds-react-examples/61c88f10e0bbc861b3fee1fc97b22a23e07725ed/examples/midi-sounds-example3/public/favicon.ico -------------------------------------------------------------------------------- /examples/midi-sounds-example3/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /examples/midi-sounds-example3/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/midi-sounds-example3/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 80px; 7 | } 8 | 9 | .App-header { 10 | background-color: #222; 11 | height: 150px; 12 | padding: 20px; 13 | color: white; 14 | } 15 | 16 | .App-title { 17 | font-size: 1.5em; 18 | } 19 | 20 | .App-intro { 21 | font-size: large; 22 | } 23 | 24 | @keyframes App-logo-spin { 25 | from { transform: rotate(0deg); } 26 | to { transform: rotate(360deg); } 27 | } 28 | -------------------------------------------------------------------------------- /examples/midi-sounds-example3/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import logo from './logo.svg'; 3 | import './App.css'; 4 | import MIDISounds from 'midi-sounds-react'; 5 | 6 | class App extends Component { 7 | constructor(props) { 8 | super(props); 9 | this.state = { 10 | selectedInstrument: 4 11 | ,cached:true 12 | }; 13 | } 14 | componentDidMount() { 15 | console.log('componentDidMount App'); 16 | this.setState(this.state); 17 | } 18 | onSelectInstrument(e){ 19 | var list=e.target; 20 | let n = list.options[list.selectedIndex].getAttribute("value"); 21 | this.setState({ 22 | selectedInstrument: n 23 | ,cached:false 24 | }); 25 | this.midiSounds.cacheInstrument(n); 26 | var me=this; 27 | this.midiSounds.player.loader.waitLoad(function () { 28 | me.setState({ 29 | selectedInstrument: n 30 | ,cached:true 31 | }); 32 | }); 33 | } 34 | createSelectItems() { 35 | if (this.midiSounds) { 36 | if (!(this.items)) { 37 | this.items = []; 38 | for (let i = 0; i < this.midiSounds.player.loader.instrumentKeys().length; i++) { 39 | this.items.push(); 40 | } 41 | } 42 | return this.items; 43 | } 44 | } 45 | playTestInstrument() { 46 | this.midiSounds.playChordNow(this.state.selectedInstrument, [60], 2.5); 47 | } 48 | render() { 49 | return ( 50 |
51 |
52 | logo 53 |

Welcome to midi-sounds-react example 3

54 |
55 |

Select instrument and press Play.

56 |

57 |

58 |

Component

59 | (this.midiSounds = ref)} appElementName="root" instruments={[4]} /> 60 |
61 |

Sources: https://www.npmjs.com/package/midi-sounds-react

62 |
63 | ); 64 | } 65 | } 66 | 67 | export default App; 68 | -------------------------------------------------------------------------------- /examples/midi-sounds-example3/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /examples/midi-sounds-example3/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /examples/midi-sounds-example3/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | 8 | -------------------------------------------------------------------------------- /examples/midi-sounds-example3/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/midi-sounds-example4/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # misc 10 | .DS_Store 11 | .env.local 12 | .env.development.local 13 | .env.test.local 14 | .env.production.local 15 | 16 | npm-debug.log* 17 | yarn-debug.log* 18 | yarn-error.log* 19 | -------------------------------------------------------------------------------- /examples/midi-sounds-example4/README.md: -------------------------------------------------------------------------------- 1 | midi-sounds-example6 -------------------------------------------------------------------------------- /examples/midi-sounds-example4/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "main.css": "static/css/main.a2e9df35.css", 3 | "main.css.map": "static/css/main.a2e9df35.css.map", 4 | "main.js": "static/js/main.93164f45.js", 5 | "main.js.map": "static/js/main.93164f45.js.map", 6 | "static\\media\\logo.svg": "static/media/logo.ee7cd8ed.svg" 7 | } -------------------------------------------------------------------------------- /examples/midi-sounds-example4/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surikov/midi-sounds-react-examples/61c88f10e0bbc861b3fee1fc97b22a23e07725ed/examples/midi-sounds-example4/build/favicon.ico -------------------------------------------------------------------------------- /examples/midi-sounds-example4/build/index.html: -------------------------------------------------------------------------------- 1 | React App
-------------------------------------------------------------------------------- /examples/midi-sounds-example4/build/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/midi-sounds-example4/build/service-worker.js: -------------------------------------------------------------------------------- 1 | "use strict";var precacheConfig=[["/midi-sounds-react-examples/examples/midi-sounds-example4/build/index.html","dd29d3961a4dd4a0f19ed9d95442f746"],["/midi-sounds-react-examples/examples/midi-sounds-example4/build/static/css/main.a2e9df35.css","b3dfa7a31a3365f957520b8522501d1a"],["/midi-sounds-react-examples/examples/midi-sounds-example4/build/static/js/main.93164f45.js","90f98f062582d81067c07af2af722b6c"],["/midi-sounds-react-examples/examples/midi-sounds-example4/build/static/media/logo.ee7cd8ed.svg","ee7cd8ed2dcec943251eb2763684fc6f"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(e){return e.redirected?("body"in e?Promise.resolve(e.body):e.blob()).then(function(t){return new Response(t,{headers:e.headers,status:e.status,statusText:e.statusText})}):Promise.resolve(e)},createCacheKey=function(e,t,n,r){var s=new URL(e);return r&&s.pathname.match(r)||(s.search+=(s.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),s.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,t){var n=new URL(e);return n.hash="",n.search=n.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(e){return t.every(function(t){return!t.test(e[0])})}).map(function(e){return e.join("=")}).join("&"),n.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],r=new URL(t,self.location),s=createCacheKey(r,hashParamName,n,/\.\w{8}\./);return[r.toString(),s]}));function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(e){return setOfCachedUrls(e).then(function(t){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(n){if(!t.has(n)){var r=new Request(n,{credentials:"same-origin"});return fetch(r).then(function(t){if(!t.ok)throw new Error("Request for "+n+" returned a response with status "+t.status);return cleanResponse(t).then(function(t){return e.put(n,t)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var t=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(e){return e.keys().then(function(n){return Promise.all(n.map(function(n){if(!t.has(n.url))return e.delete(n)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(e){if("GET"===e.request.method){var t,n=stripIgnoredUrlParameters(e.request.url,ignoreUrlParametersMatching),r="index.html";(t=urlsToCacheKeys.has(n))||(n=addDirectoryIndex(n,r),t=urlsToCacheKeys.has(n));var s="/midi-sounds-react-examples/examples/midi-sounds-example4/build/index.html";!t&&"navigate"===e.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],e.request.url)&&(n=new URL(s,self.location).toString(),t=urlsToCacheKeys.has(n)),t&&e.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(t){return console.warn('Couldn\'t serve response for "%s" from cache: %O',e.request.url,t),fetch(e.request)}))}}); -------------------------------------------------------------------------------- /examples/midi-sounds-example4/build/static/css/main.a2e9df35.css: -------------------------------------------------------------------------------- 1 | body{margin:0;padding:0;font-family:sans-serif}.App{text-align:center}.App-logo{height:80px}.App-header{background-color:#222;height:150px;padding:20px;color:#fff}.App-title{font-size:1.5em}.App-intro{font-size:large}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}} 2 | /*# sourceMappingURL=main.a2e9df35.css.map*/ -------------------------------------------------------------------------------- /examples/midi-sounds-example4/build/static/css/main.a2e9df35.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["index.css","App.css"],"names":[],"mappings":"AAAA,KACE,SACA,UACA,sBAAwB,CCH1B,KACE,iBAAmB,CAGrB,UACE,WAAa,CAGf,YACE,sBACA,aACA,aACA,UAAa,CAGf,WACE,eAAiB,CAGnB,WACE,eAAiB,CAGnB,iCACE,GAAO,+BAAiC,sBAAwB,CAChE,GAAK,gCAAmC,uBAA0B,CAAE,CAGtE,yBACE,GAAO,+BAAiC,sBAAwB,CAChE,GAAK,gCAAmC,uBAA0B,CAAE","file":"static/css/main.a2e9df35.css","sourcesContent":["body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: sans-serif;\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/index.css",".App {\r\n text-align: center;\r\n}\r\n\r\n.App-logo {\r\n height: 80px;\r\n}\r\n\r\n.App-header {\r\n background-color: #222;\r\n height: 150px;\r\n padding: 20px;\r\n color: white;\r\n}\r\n\r\n.App-title {\r\n font-size: 1.5em;\r\n}\r\n\r\n.App-intro {\r\n font-size: large;\r\n}\r\n\r\n@-webkit-keyframes App-logo-spin {\r\n from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }\r\n to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }\r\n}\r\n\r\n@keyframes App-logo-spin {\r\n from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }\r\n to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/App.css"],"sourceRoot":""} -------------------------------------------------------------------------------- /examples/midi-sounds-example4/build/static/media/logo.ee7cd8ed.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/midi-sounds-example4/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "midi-sounds-examples", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://surikov.github.io/midi-sounds-react-examples/examples/midi-sounds-example4/build", 6 | "dependencies": { 7 | "react": "^16.2.0", 8 | "react-dom": "^16.2.0", 9 | "react-scripts": "1.1.0", 10 | "midi-sounds-react": "^1.2.45" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test --env=jsdom", 16 | "eject": "react-scripts eject" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/midi-sounds-example4/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surikov/midi-sounds-react-examples/61c88f10e0bbc861b3fee1fc97b22a23e07725ed/examples/midi-sounds-example4/public/favicon.ico -------------------------------------------------------------------------------- /examples/midi-sounds-example4/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /examples/midi-sounds-example4/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/midi-sounds-example4/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 80px; 7 | } 8 | 9 | .App-header { 10 | background-color: #222; 11 | height: 150px; 12 | padding: 20px; 13 | color: white; 14 | } 15 | 16 | .App-title { 17 | font-size: 1.5em; 18 | } 19 | 20 | .App-intro { 21 | font-size: large; 22 | } 23 | 24 | @keyframes App-logo-spin { 25 | from { transform: rotate(0deg); } 26 | to { transform: rotate(360deg); } 27 | } 28 | -------------------------------------------------------------------------------- /examples/midi-sounds-example4/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import logo from './logo.svg'; 3 | import './App.css'; 4 | import MIDISounds from 'midi-sounds-react'; 5 | 6 | class App extends Component { 7 | constructor(props) { 8 | super(props); 9 | this.state = { 10 | selectedDrum: 21 11 | }; 12 | } 13 | componentDidMount() { 14 | console.log('componentDidMount App'); 15 | this.setState({ initialized: true }); 16 | } 17 | onSelectDrum(e){ 18 | var list=e.target; 19 | let n = list.options[list.selectedIndex].getAttribute("value"); 20 | this.setState({ 21 | selectedDrum: n 22 | }); 23 | this.midiSounds.cacheDrum(n); 24 | } 25 | createSelectItems() { 26 | if (this.midiSounds) { 27 | if (!(this.items)) { 28 | this.items = []; 29 | for (let i = 0; i < this.midiSounds.player.loader.drumKeys().length; i++) { 30 | this.items.push(); 31 | } 32 | } 33 | return this.items; 34 | } 35 | } 36 | playTestDrum() { 37 | this.midiSounds.playDrumsNow([this.state.selectedDrum]); 38 | } 39 | render() { 40 | return ( 41 |
42 |
43 | logo 44 |

Welcome to midi-sounds-react example 4

45 |
46 |

Select drum and press Play.

47 |

48 |

49 |

Component

50 | (this.midiSounds = ref)} appElementName="root" drums={[21]} /> 51 |
52 |

Sources: https://www.npmjs.com/package/midi-sounds-react

53 |
54 | ); 55 | } 56 | } 57 | 58 | export default App; 59 | -------------------------------------------------------------------------------- /examples/midi-sounds-example4/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /examples/midi-sounds-example4/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /examples/midi-sounds-example4/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | 8 | -------------------------------------------------------------------------------- /examples/midi-sounds-example4/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/midi-sounds-example5/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # misc 10 | .DS_Store 11 | .env.local 12 | .env.development.local 13 | .env.test.local 14 | .env.production.local 15 | 16 | npm-debug.log* 17 | yarn-debug.log* 18 | yarn-error.log* 19 | -------------------------------------------------------------------------------- /examples/midi-sounds-example5/README.md: -------------------------------------------------------------------------------- 1 | midi-sounds-example6 -------------------------------------------------------------------------------- /examples/midi-sounds-example5/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "main.css": "static/css/main.a2e9df35.css", 3 | "main.css.map": "static/css/main.a2e9df35.css.map", 4 | "main.js": "static/js/main.f542ac0d.js", 5 | "main.js.map": "static/js/main.f542ac0d.js.map", 6 | "static\\media\\logo.svg": "static/media/logo.ee7cd8ed.svg" 7 | } -------------------------------------------------------------------------------- /examples/midi-sounds-example5/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surikov/midi-sounds-react-examples/61c88f10e0bbc861b3fee1fc97b22a23e07725ed/examples/midi-sounds-example5/build/favicon.ico -------------------------------------------------------------------------------- /examples/midi-sounds-example5/build/index.html: -------------------------------------------------------------------------------- 1 | React App
-------------------------------------------------------------------------------- /examples/midi-sounds-example5/build/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/midi-sounds-example5/build/service-worker.js: -------------------------------------------------------------------------------- 1 | "use strict";var precacheConfig=[["/midi-sounds-react-examples/examples/midi-sounds-example5/build/index.html","d7c1c828e98480779d74afb683b69f43"],["/midi-sounds-react-examples/examples/midi-sounds-example5/build/static/css/main.a2e9df35.css","b3dfa7a31a3365f957520b8522501d1a"],["/midi-sounds-react-examples/examples/midi-sounds-example5/build/static/js/main.f542ac0d.js","54daa7434c0c3410669b211934b63345"],["/midi-sounds-react-examples/examples/midi-sounds-example5/build/static/media/logo.ee7cd8ed.svg","ee7cd8ed2dcec943251eb2763684fc6f"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(e){return e.redirected?("body"in e?Promise.resolve(e.body):e.blob()).then(function(t){return new Response(t,{headers:e.headers,status:e.status,statusText:e.statusText})}):Promise.resolve(e)},createCacheKey=function(e,t,n,r){var s=new URL(e);return r&&s.pathname.match(r)||(s.search+=(s.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),s.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,t){var n=new URL(e);return n.hash="",n.search=n.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(e){return t.every(function(t){return!t.test(e[0])})}).map(function(e){return e.join("=")}).join("&"),n.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],r=new URL(t,self.location),s=createCacheKey(r,hashParamName,n,/\.\w{8}\./);return[r.toString(),s]}));function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(e){return setOfCachedUrls(e).then(function(t){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(n){if(!t.has(n)){var r=new Request(n,{credentials:"same-origin"});return fetch(r).then(function(t){if(!t.ok)throw new Error("Request for "+n+" returned a response with status "+t.status);return cleanResponse(t).then(function(t){return e.put(n,t)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var t=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(e){return e.keys().then(function(n){return Promise.all(n.map(function(n){if(!t.has(n.url))return e.delete(n)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(e){if("GET"===e.request.method){var t,n=stripIgnoredUrlParameters(e.request.url,ignoreUrlParametersMatching),r="index.html";(t=urlsToCacheKeys.has(n))||(n=addDirectoryIndex(n,r),t=urlsToCacheKeys.has(n));var s="/midi-sounds-react-examples/examples/midi-sounds-example5/build/index.html";!t&&"navigate"===e.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],e.request.url)&&(n=new URL(s,self.location).toString(),t=urlsToCacheKeys.has(n)),t&&e.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(t){return console.warn('Couldn\'t serve response for "%s" from cache: %O',e.request.url,t),fetch(e.request)}))}}); -------------------------------------------------------------------------------- /examples/midi-sounds-example5/build/static/css/main.a2e9df35.css: -------------------------------------------------------------------------------- 1 | body{margin:0;padding:0;font-family:sans-serif}.App{text-align:center}.App-logo{height:80px}.App-header{background-color:#222;height:150px;padding:20px;color:#fff}.App-title{font-size:1.5em}.App-intro{font-size:large}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}} 2 | /*# sourceMappingURL=main.a2e9df35.css.map*/ -------------------------------------------------------------------------------- /examples/midi-sounds-example5/build/static/css/main.a2e9df35.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["index.css","App.css"],"names":[],"mappings":"AAAA,KACE,SACA,UACA,sBAAwB,CCH1B,KACE,iBAAmB,CAGrB,UACE,WAAa,CAGf,YACE,sBACA,aACA,aACA,UAAa,CAGf,WACE,eAAiB,CAGnB,WACE,eAAiB,CAGnB,iCACE,GAAO,+BAAiC,sBAAwB,CAChE,GAAK,gCAAmC,uBAA0B,CAAE,CAGtE,yBACE,GAAO,+BAAiC,sBAAwB,CAChE,GAAK,gCAAmC,uBAA0B,CAAE","file":"static/css/main.a2e9df35.css","sourcesContent":["body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: sans-serif;\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/index.css",".App {\r\n text-align: center;\r\n}\r\n\r\n.App-logo {\r\n height: 80px;\r\n}\r\n\r\n.App-header {\r\n background-color: #222;\r\n height: 150px;\r\n padding: 20px;\r\n color: white;\r\n}\r\n\r\n.App-title {\r\n font-size: 1.5em;\r\n}\r\n\r\n.App-intro {\r\n font-size: large;\r\n}\r\n\r\n@-webkit-keyframes App-logo-spin {\r\n from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }\r\n to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }\r\n}\r\n\r\n@keyframes App-logo-spin {\r\n from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }\r\n to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/App.css"],"sourceRoot":""} -------------------------------------------------------------------------------- /examples/midi-sounds-example5/build/static/media/logo.ee7cd8ed.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/midi-sounds-example5/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "midi-sounds-examples", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://surikov.github.io/midi-sounds-react-examples/examples/midi-sounds-example5/build", 6 | "dependencies": { 7 | "react": "^16.2.0", 8 | "react-dom": "^16.2.0", 9 | "react-scripts": "1.1.0", 10 | "midi-sounds-react": "^1.2.45" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test --env=jsdom", 16 | "eject": "react-scripts eject" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/midi-sounds-example5/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surikov/midi-sounds-react-examples/61c88f10e0bbc861b3fee1fc97b22a23e07725ed/examples/midi-sounds-example5/public/favicon.ico -------------------------------------------------------------------------------- /examples/midi-sounds-example5/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /examples/midi-sounds-example5/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/midi-sounds-example5/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 80px; 7 | } 8 | 9 | .App-header { 10 | background-color: #222; 11 | height: 150px; 12 | padding: 20px; 13 | color: white; 14 | } 15 | 16 | .App-title { 17 | font-size: 1.5em; 18 | } 19 | 20 | .App-intro { 21 | font-size: large; 22 | } 23 | 24 | @keyframes App-logo-spin { 25 | from { transform: rotate(0deg); } 26 | to { transform: rotate(360deg); } 27 | } 28 | -------------------------------------------------------------------------------- /examples/midi-sounds-example5/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import logo from './logo.svg'; 3 | import './App.css'; 4 | import MIDISounds from 'midi-sounds-react'; 5 | 6 | class App extends Component { 7 | constructor(props) { 8 | super(props); 9 | this.state = { 10 | selectedDrum: 21 11 | ,drumLowTom:30 12 | ,drumHighTom:50 13 | ,drumSnare:15 14 | ,drumBass:5 15 | ,drumCrash:70 16 | }; 17 | } 18 | componentDidMount() { 19 | console.log('componentDidMount App'); 20 | this.setState({ initialized: true }); 21 | } 22 | onSelectDrum(e){ 23 | var list=e.target; 24 | let n = list.options[list.selectedIndex].getAttribute("value"); 25 | this.setState({ 26 | selectedDrum: n 27 | }); 28 | this.midiSounds.cacheDrum(n); 29 | } 30 | createSelectItems() { 31 | if (this.midiSounds) { 32 | if (!(this.items)) { 33 | this.items = []; 34 | for (let i = 0; i < this.midiSounds.player.loader.drumKeys().length; i++) { 35 | this.items.push(); 36 | } 37 | } 38 | return this.items; 39 | } 40 | } 41 | playTestDrum() { 42 | var when=this.midiSounds.contextTime(); 43 | var b=0.15; 44 | this.midiSounds.playDrumsAt(when+b*0,[this.state.selectedDrum]); 45 | this.midiSounds.playDrumsAt(when+b*2,[this.state.selectedDrum]); 46 | this.midiSounds.playDrumsAt(when+b*3,[this.state.selectedDrum]); 47 | this.midiSounds.playDrumsAt(when+b*4,[this.state.selectedDrum]); 48 | } 49 | badumtss(){ 50 | var when=this.midiSounds.contextTime(); 51 | var b=0.11; 52 | this.midiSounds.playDrumsAt(when+b*0,[this.state.drumSnare,this.state.drumLowTom]); 53 | this.midiSounds.playDrumsAt(when+b*1,[this.state.drumSnare,this.state.drumHighTom]); 54 | this.midiSounds.playDrumsAt(when+b*3,[this.state.drumSnare,this.state.drumBass,this.state.drumCrash]); 55 | } 56 | uhoh(){ 57 | var when=this.midiSounds.contextTime(); 58 | var b=0.1; 59 | this.midiSounds.playChordAt(when+b*0,594,[60],b*1); 60 | this.midiSounds.playChordAt(when+b*3,594,[56],b*4); 61 | } 62 | render() { 63 | return ( 64 |
65 |
66 | logo 67 |

Welcome to midi-sounds-react example 5

68 |
69 |

Play short fragment.

70 |

71 |

Select drum and press Play.

72 |

73 |

74 |

Component

75 | (this.midiSounds = ref)} appElementName="root" instruments={[594]} drums={[this.state.selectedDrum,this.state.drumLowTom,this.state.drumHighTom,this.state.drumSnare,this.state.drumBass,this.state.drumCrash]} /> 76 |
77 |

Sources: https://www.npmjs.com/package/midi-sounds-react

78 |
79 | ); 80 | } 81 | } 82 | 83 | export default App; 84 | -------------------------------------------------------------------------------- /examples/midi-sounds-example5/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /examples/midi-sounds-example5/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /examples/midi-sounds-example5/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | 8 | -------------------------------------------------------------------------------- /examples/midi-sounds-example5/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/midi-sounds-example6/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # misc 10 | .DS_Store 11 | .env.local 12 | .env.development.local 13 | .env.test.local 14 | .env.production.local 15 | 16 | npm-debug.log* 17 | yarn-debug.log* 18 | yarn-error.log* 19 | -------------------------------------------------------------------------------- /examples/midi-sounds-example6/README.md: -------------------------------------------------------------------------------- 1 | midi-sounds-example6 -------------------------------------------------------------------------------- /examples/midi-sounds-example6/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "main.css": "static/css/main.a2e9df35.css", 3 | "main.css.map": "static/css/main.a2e9df35.css.map", 4 | "main.js": "static/js/main.a108b856.js", 5 | "main.js.map": "static/js/main.a108b856.js.map", 6 | "static\\media\\logo.svg": "static/media/logo.ee7cd8ed.svg" 7 | } -------------------------------------------------------------------------------- /examples/midi-sounds-example6/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surikov/midi-sounds-react-examples/61c88f10e0bbc861b3fee1fc97b22a23e07725ed/examples/midi-sounds-example6/build/favicon.ico -------------------------------------------------------------------------------- /examples/midi-sounds-example6/build/index.html: -------------------------------------------------------------------------------- 1 | React App
-------------------------------------------------------------------------------- /examples/midi-sounds-example6/build/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/midi-sounds-example6/build/service-worker.js: -------------------------------------------------------------------------------- 1 | "use strict";var precacheConfig=[["/midi-sounds-react-examples/examples/midi-sounds-example6/build/index.html","06676ed45259c62523a49c40eba178d2"],["/midi-sounds-react-examples/examples/midi-sounds-example6/build/static/css/main.a2e9df35.css","b3dfa7a31a3365f957520b8522501d1a"],["/midi-sounds-react-examples/examples/midi-sounds-example6/build/static/js/main.a108b856.js","f56fb2d7d2da21f4898c5cf3d431446d"],["/midi-sounds-react-examples/examples/midi-sounds-example6/build/static/media/logo.ee7cd8ed.svg","ee7cd8ed2dcec943251eb2763684fc6f"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(e){return e.redirected?("body"in e?Promise.resolve(e.body):e.blob()).then(function(t){return new Response(t,{headers:e.headers,status:e.status,statusText:e.statusText})}):Promise.resolve(e)},createCacheKey=function(e,t,n,r){var s=new URL(e);return r&&s.pathname.match(r)||(s.search+=(s.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),s.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,t){var n=new URL(e);return n.hash="",n.search=n.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(e){return t.every(function(t){return!t.test(e[0])})}).map(function(e){return e.join("=")}).join("&"),n.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],r=new URL(t,self.location),s=createCacheKey(r,hashParamName,n,/\.\w{8}\./);return[r.toString(),s]}));function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(e){return setOfCachedUrls(e).then(function(t){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(n){if(!t.has(n)){var r=new Request(n,{credentials:"same-origin"});return fetch(r).then(function(t){if(!t.ok)throw new Error("Request for "+n+" returned a response with status "+t.status);return cleanResponse(t).then(function(t){return e.put(n,t)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var t=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(e){return e.keys().then(function(n){return Promise.all(n.map(function(n){if(!t.has(n.url))return e.delete(n)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(e){if("GET"===e.request.method){var t,n=stripIgnoredUrlParameters(e.request.url,ignoreUrlParametersMatching),r="index.html";(t=urlsToCacheKeys.has(n))||(n=addDirectoryIndex(n,r),t=urlsToCacheKeys.has(n));var s="/midi-sounds-react-examples/examples/midi-sounds-example6/build/index.html";!t&&"navigate"===e.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],e.request.url)&&(n=new URL(s,self.location).toString(),t=urlsToCacheKeys.has(n)),t&&e.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(t){return console.warn('Couldn\'t serve response for "%s" from cache: %O',e.request.url,t),fetch(e.request)}))}}); -------------------------------------------------------------------------------- /examples/midi-sounds-example6/build/static/css/main.a2e9df35.css: -------------------------------------------------------------------------------- 1 | body{margin:0;padding:0;font-family:sans-serif}.App{text-align:center}.App-logo{height:80px}.App-header{background-color:#222;height:150px;padding:20px;color:#fff}.App-title{font-size:1.5em}.App-intro{font-size:large}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}} 2 | /*# sourceMappingURL=main.a2e9df35.css.map*/ -------------------------------------------------------------------------------- /examples/midi-sounds-example6/build/static/css/main.a2e9df35.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["index.css","App.css"],"names":[],"mappings":"AAAA,KACE,SACA,UACA,sBAAwB,CCH1B,KACE,iBAAmB,CAGrB,UACE,WAAa,CAGf,YACE,sBACA,aACA,aACA,UAAa,CAGf,WACE,eAAiB,CAGnB,WACE,eAAiB,CAGnB,iCACE,GAAO,+BAAiC,sBAAwB,CAChE,GAAK,gCAAmC,uBAA0B,CAAE,CAGtE,yBACE,GAAO,+BAAiC,sBAAwB,CAChE,GAAK,gCAAmC,uBAA0B,CAAE","file":"static/css/main.a2e9df35.css","sourcesContent":["body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: sans-serif;\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/index.css",".App {\r\n text-align: center;\r\n}\r\n\r\n.App-logo {\r\n height: 80px;\r\n}\r\n\r\n.App-header {\r\n background-color: #222;\r\n height: 150px;\r\n padding: 20px;\r\n color: white;\r\n}\r\n\r\n.App-title {\r\n font-size: 1.5em;\r\n}\r\n\r\n.App-intro {\r\n font-size: large;\r\n}\r\n\r\n@-webkit-keyframes App-logo-spin {\r\n from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }\r\n to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }\r\n}\r\n\r\n@keyframes App-logo-spin {\r\n from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }\r\n to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/App.css"],"sourceRoot":""} -------------------------------------------------------------------------------- /examples/midi-sounds-example6/build/static/media/logo.ee7cd8ed.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/midi-sounds-example6/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "midi-sounds-examples", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://surikov.github.io/midi-sounds-react-examples/examples/midi-sounds-example6/build", 6 | "dependencies": { 7 | "react": "^16.2.0", 8 | "react-dom": "^16.2.0", 9 | "react-scripts": "1.1.0", 10 | "midi-sounds-react": "^1.2.45" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test --env=jsdom", 16 | "eject": "react-scripts eject" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/midi-sounds-example6/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surikov/midi-sounds-react-examples/61c88f10e0bbc861b3fee1fc97b22a23e07725ed/examples/midi-sounds-example6/public/favicon.ico -------------------------------------------------------------------------------- /examples/midi-sounds-example6/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /examples/midi-sounds-example6/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/midi-sounds-example6/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 80px; 7 | } 8 | 9 | .App-header { 10 | background-color: #222; 11 | height: 150px; 12 | padding: 20px; 13 | color: white; 14 | } 15 | 16 | .App-title { 17 | font-size: 1.5em; 18 | } 19 | 20 | .App-intro { 21 | font-size: large; 22 | } 23 | 24 | @keyframes App-logo-spin { 25 | from { transform: rotate(0deg); } 26 | to { transform: rotate(360deg); } 27 | } 28 | -------------------------------------------------------------------------------- /examples/midi-sounds-example6/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /examples/midi-sounds-example6/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /examples/midi-sounds-example6/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | 8 | -------------------------------------------------------------------------------- /examples/midi-sounds-example6/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/midi-sounds-example7/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # misc 10 | .DS_Store 11 | .env.local 12 | .env.development.local 13 | .env.test.local 14 | .env.production.local 15 | 16 | npm-debug.log* 17 | yarn-debug.log* 18 | yarn-error.log* 19 | -------------------------------------------------------------------------------- /examples/midi-sounds-example7/README.md: -------------------------------------------------------------------------------- 1 | midi-sounds-example6 -------------------------------------------------------------------------------- /examples/midi-sounds-example7/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "main.css": "static/css/main.a2e9df35.css", 3 | "main.css.map": "static/css/main.a2e9df35.css.map", 4 | "main.js": "static/js/main.7f33f278.js", 5 | "main.js.map": "static/js/main.7f33f278.js.map", 6 | "static\\media\\logo.svg": "static/media/logo.ee7cd8ed.svg" 7 | } -------------------------------------------------------------------------------- /examples/midi-sounds-example7/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surikov/midi-sounds-react-examples/61c88f10e0bbc861b3fee1fc97b22a23e07725ed/examples/midi-sounds-example7/build/favicon.ico -------------------------------------------------------------------------------- /examples/midi-sounds-example7/build/index.html: -------------------------------------------------------------------------------- 1 | React App
-------------------------------------------------------------------------------- /examples/midi-sounds-example7/build/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/midi-sounds-example7/build/service-worker.js: -------------------------------------------------------------------------------- 1 | "use strict";var precacheConfig=[["/midi-sounds-react-examples/examples/midi-sounds-example7/build/index.html","ece64faf0485bf0636f289903ee48a1a"],["/midi-sounds-react-examples/examples/midi-sounds-example7/build/static/css/main.a2e9df35.css","b3dfa7a31a3365f957520b8522501d1a"],["/midi-sounds-react-examples/examples/midi-sounds-example7/build/static/js/main.7f33f278.js","450941e528dcf3cf129851d8de07c13c"],["/midi-sounds-react-examples/examples/midi-sounds-example7/build/static/media/logo.ee7cd8ed.svg","ee7cd8ed2dcec943251eb2763684fc6f"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(e){return e.redirected?("body"in e?Promise.resolve(e.body):e.blob()).then(function(t){return new Response(t,{headers:e.headers,status:e.status,statusText:e.statusText})}):Promise.resolve(e)},createCacheKey=function(e,t,n,r){var s=new URL(e);return r&&s.pathname.match(r)||(s.search+=(s.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),s.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,t){var n=new URL(e);return n.hash="",n.search=n.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(e){return t.every(function(t){return!t.test(e[0])})}).map(function(e){return e.join("=")}).join("&"),n.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],r=new URL(t,self.location),s=createCacheKey(r,hashParamName,n,/\.\w{8}\./);return[r.toString(),s]}));function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(e){return setOfCachedUrls(e).then(function(t){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(n){if(!t.has(n)){var r=new Request(n,{credentials:"same-origin"});return fetch(r).then(function(t){if(!t.ok)throw new Error("Request for "+n+" returned a response with status "+t.status);return cleanResponse(t).then(function(t){return e.put(n,t)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var t=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(e){return e.keys().then(function(n){return Promise.all(n.map(function(n){if(!t.has(n.url))return e.delete(n)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(e){if("GET"===e.request.method){var t,n=stripIgnoredUrlParameters(e.request.url,ignoreUrlParametersMatching),r="index.html";(t=urlsToCacheKeys.has(n))||(n=addDirectoryIndex(n,r),t=urlsToCacheKeys.has(n));var s="/midi-sounds-react-examples/examples/midi-sounds-example7/build/index.html";!t&&"navigate"===e.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],e.request.url)&&(n=new URL(s,self.location).toString(),t=urlsToCacheKeys.has(n)),t&&e.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(t){return console.warn('Couldn\'t serve response for "%s" from cache: %O',e.request.url,t),fetch(e.request)}))}}); -------------------------------------------------------------------------------- /examples/midi-sounds-example7/build/static/css/main.a2e9df35.css: -------------------------------------------------------------------------------- 1 | body{margin:0;padding:0;font-family:sans-serif}.App{text-align:center}.App-logo{height:80px}.App-header{background-color:#222;height:150px;padding:20px;color:#fff}.App-title{font-size:1.5em}.App-intro{font-size:large}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}} 2 | /*# sourceMappingURL=main.a2e9df35.css.map*/ -------------------------------------------------------------------------------- /examples/midi-sounds-example7/build/static/css/main.a2e9df35.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["index.css","App.css"],"names":[],"mappings":"AAAA,KACE,SACA,UACA,sBAAwB,CCH1B,KACE,iBAAmB,CAGrB,UACE,WAAa,CAGf,YACE,sBACA,aACA,aACA,UAAa,CAGf,WACE,eAAiB,CAGnB,WACE,eAAiB,CAGnB,iCACE,GAAO,+BAAiC,sBAAwB,CAChE,GAAK,gCAAmC,uBAA0B,CAAE,CAGtE,yBACE,GAAO,+BAAiC,sBAAwB,CAChE,GAAK,gCAAmC,uBAA0B,CAAE","file":"static/css/main.a2e9df35.css","sourcesContent":["body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: sans-serif;\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/index.css",".App {\r\n text-align: center;\r\n}\r\n\r\n.App-logo {\r\n height: 80px;\r\n}\r\n\r\n.App-header {\r\n background-color: #222;\r\n height: 150px;\r\n padding: 20px;\r\n color: white;\r\n}\r\n\r\n.App-title {\r\n font-size: 1.5em;\r\n}\r\n\r\n.App-intro {\r\n font-size: large;\r\n}\r\n\r\n@-webkit-keyframes App-logo-spin {\r\n from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }\r\n to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }\r\n}\r\n\r\n@keyframes App-logo-spin {\r\n from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }\r\n to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/App.css"],"sourceRoot":""} -------------------------------------------------------------------------------- /examples/midi-sounds-example7/build/static/media/logo.ee7cd8ed.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/midi-sounds-example7/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "midi-sounds-examples", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://surikov.github.io/midi-sounds-react-examples/examples/midi-sounds-example7/build", 6 | "dependencies": { 7 | "react": "^16.2.0", 8 | "react-dom": "^16.2.0", 9 | "react-scripts": "1.1.0", 10 | "midi-sounds-react": "^1.2.45" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test --env=jsdom", 16 | "eject": "react-scripts eject" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/midi-sounds-example7/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surikov/midi-sounds-react-examples/61c88f10e0bbc861b3fee1fc97b22a23e07725ed/examples/midi-sounds-example7/public/favicon.ico -------------------------------------------------------------------------------- /examples/midi-sounds-example7/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /examples/midi-sounds-example7/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/midi-sounds-example7/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 80px; 7 | } 8 | 9 | .App-header { 10 | background-color: #222; 11 | height: 150px; 12 | padding: 20px; 13 | color: white; 14 | } 15 | 16 | .App-title { 17 | font-size: 1.5em; 18 | } 19 | 20 | .App-intro { 21 | font-size: large; 22 | } 23 | 24 | @keyframes App-logo-spin { 25 | from { transform: rotate(0deg); } 26 | to { transform: rotate(360deg); } 27 | } 28 | -------------------------------------------------------------------------------- /examples/midi-sounds-example7/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /examples/midi-sounds-example7/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /examples/midi-sounds-example7/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | 8 | -------------------------------------------------------------------------------- /examples/midi-sounds-example7/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/midi-sounds-example8/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # misc 10 | .DS_Store 11 | .env.local 12 | .env.development.local 13 | .env.test.local 14 | .env.production.local 15 | 16 | npm-debug.log* 17 | yarn-debug.log* 18 | yarn-error.log* 19 | -------------------------------------------------------------------------------- /examples/midi-sounds-example8/README.md: -------------------------------------------------------------------------------- 1 | midi-sounds-example6 -------------------------------------------------------------------------------- /examples/midi-sounds-example8/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "main.css": "static/css/main.a2e9df35.css", 3 | "main.css.map": "static/css/main.a2e9df35.css.map", 4 | "main.js": "static/js/main.3aef8ee4.js", 5 | "main.js.map": "static/js/main.3aef8ee4.js.map", 6 | "static\\media\\logo.svg": "static/media/logo.ee7cd8ed.svg" 7 | } -------------------------------------------------------------------------------- /examples/midi-sounds-example8/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surikov/midi-sounds-react-examples/61c88f10e0bbc861b3fee1fc97b22a23e07725ed/examples/midi-sounds-example8/build/favicon.ico -------------------------------------------------------------------------------- /examples/midi-sounds-example8/build/index.html: -------------------------------------------------------------------------------- 1 | React App
-------------------------------------------------------------------------------- /examples/midi-sounds-example8/build/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/midi-sounds-example8/build/service-worker.js: -------------------------------------------------------------------------------- 1 | "use strict";var precacheConfig=[["/midi-sounds-react-examples/examples/midi-sounds-example8/build/index.html","67a2ee6e7c3194f8cf758da3ec9293cd"],["/midi-sounds-react-examples/examples/midi-sounds-example8/build/static/css/main.a2e9df35.css","b3dfa7a31a3365f957520b8522501d1a"],["/midi-sounds-react-examples/examples/midi-sounds-example8/build/static/js/main.3aef8ee4.js","27eadf769cb6956e7491721a09c6ea86"],["/midi-sounds-react-examples/examples/midi-sounds-example8/build/static/media/logo.ee7cd8ed.svg","ee7cd8ed2dcec943251eb2763684fc6f"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(e){return e.redirected?("body"in e?Promise.resolve(e.body):e.blob()).then(function(t){return new Response(t,{headers:e.headers,status:e.status,statusText:e.statusText})}):Promise.resolve(e)},createCacheKey=function(e,t,n,r){var a=new URL(e);return r&&a.pathname.match(r)||(a.search+=(a.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),a.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,t){var n=new URL(e);return n.hash="",n.search=n.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(e){return t.every(function(t){return!t.test(e[0])})}).map(function(e){return e.join("=")}).join("&"),n.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],r=new URL(t,self.location),a=createCacheKey(r,hashParamName,n,/\.\w{8}\./);return[r.toString(),a]}));function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(e){return setOfCachedUrls(e).then(function(t){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(n){if(!t.has(n)){var r=new Request(n,{credentials:"same-origin"});return fetch(r).then(function(t){if(!t.ok)throw new Error("Request for "+n+" returned a response with status "+t.status);return cleanResponse(t).then(function(t){return e.put(n,t)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var t=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(e){return e.keys().then(function(n){return Promise.all(n.map(function(n){if(!t.has(n.url))return e.delete(n)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(e){if("GET"===e.request.method){var t,n=stripIgnoredUrlParameters(e.request.url,ignoreUrlParametersMatching),r="index.html";(t=urlsToCacheKeys.has(n))||(n=addDirectoryIndex(n,r),t=urlsToCacheKeys.has(n));var a="/midi-sounds-react-examples/examples/midi-sounds-example8/build/index.html";!t&&"navigate"===e.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],e.request.url)&&(n=new URL(a,self.location).toString(),t=urlsToCacheKeys.has(n)),t&&e.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(t){return console.warn('Couldn\'t serve response for "%s" from cache: %O',e.request.url,t),fetch(e.request)}))}}); -------------------------------------------------------------------------------- /examples/midi-sounds-example8/build/static/css/main.a2e9df35.css: -------------------------------------------------------------------------------- 1 | body{margin:0;padding:0;font-family:sans-serif}.App{text-align:center}.App-logo{height:80px}.App-header{background-color:#222;height:150px;padding:20px;color:#fff}.App-title{font-size:1.5em}.App-intro{font-size:large}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}} 2 | /*# sourceMappingURL=main.a2e9df35.css.map*/ -------------------------------------------------------------------------------- /examples/midi-sounds-example8/build/static/css/main.a2e9df35.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["index.css","App.css"],"names":[],"mappings":"AAAA,KACE,SACA,UACA,sBAAwB,CCH1B,KACE,iBAAmB,CAGrB,UACE,WAAa,CAGf,YACE,sBACA,aACA,aACA,UAAa,CAGf,WACE,eAAiB,CAGnB,WACE,eAAiB,CAGnB,iCACE,GAAO,+BAAiC,sBAAwB,CAChE,GAAK,gCAAmC,uBAA0B,CAAE,CAGtE,yBACE,GAAO,+BAAiC,sBAAwB,CAChE,GAAK,gCAAmC,uBAA0B,CAAE","file":"static/css/main.a2e9df35.css","sourcesContent":["body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: sans-serif;\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/index.css",".App {\r\n text-align: center;\r\n}\r\n\r\n.App-logo {\r\n height: 80px;\r\n}\r\n\r\n.App-header {\r\n background-color: #222;\r\n height: 150px;\r\n padding: 20px;\r\n color: white;\r\n}\r\n\r\n.App-title {\r\n font-size: 1.5em;\r\n}\r\n\r\n.App-intro {\r\n font-size: large;\r\n}\r\n\r\n@-webkit-keyframes App-logo-spin {\r\n from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }\r\n to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }\r\n}\r\n\r\n@keyframes App-logo-spin {\r\n from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }\r\n to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/App.css"],"sourceRoot":""} -------------------------------------------------------------------------------- /examples/midi-sounds-example8/build/static/media/logo.ee7cd8ed.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/midi-sounds-example8/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "midi-sounds-examples", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://surikov.github.io/midi-sounds-react-examples/examples/midi-sounds-example8/build", 6 | "dependencies": { 7 | "react": "^16.2.0", 8 | "react-dom": "^16.2.0", 9 | "react-scripts": "1.1.0", 10 | "midi-sounds-react": "^1.2.45" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test --env=jsdom", 16 | "eject": "react-scripts eject" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/midi-sounds-example8/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surikov/midi-sounds-react-examples/61c88f10e0bbc861b3fee1fc97b22a23e07725ed/examples/midi-sounds-example8/public/favicon.ico -------------------------------------------------------------------------------- /examples/midi-sounds-example8/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /examples/midi-sounds-example8/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/midi-sounds-example8/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 80px; 7 | } 8 | 9 | .App-header { 10 | background-color: #222; 11 | height: 150px; 12 | padding: 20px; 13 | color: white; 14 | } 15 | 16 | .App-title { 17 | font-size: 1.5em; 18 | } 19 | 20 | .App-intro { 21 | font-size: large; 22 | } 23 | 24 | @keyframes App-logo-spin { 25 | from { transform: rotate(0deg); } 26 | to { transform: rotate(360deg); } 27 | } 28 | -------------------------------------------------------------------------------- /examples/midi-sounds-example8/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import logo from './logo.svg'; 3 | import './App.css'; 4 | import MIDISounds from 'midi-sounds-react'; 5 | 6 | const O = 12; 7 | 8 | const C = 0; 9 | const c = 1; 10 | const D = 2; 11 | const d = 3; 12 | const E = 4 13 | const F = 5; 14 | const f = 6; 15 | const G = 7; 16 | const g = 8; 17 | const A = 9; 18 | const a = 10; 19 | const B = 11; 20 | 21 | const S1 = 5 * O + E; 22 | const S2 = 4 * O + B; 23 | const S3 = 4 * O + G; 24 | const S4 = 4 * O + D; 25 | const S5 = 3 * O + A; 26 | const S6 = 3 * O + E; 27 | 28 | const X3 = 3 * O + G; 29 | const X4 = 3 * O + D; 30 | const X5 = 2 * O + A; 31 | const X6 = 2 * O + E; 32 | 33 | const _Em = [ 34 | S6 + 0 35 | , S5 + 2 36 | , S4 + 2 37 | , S3 + 0 38 | , S2 + 0 39 | , S1 + 0 40 | ]; 41 | 42 | class App extends Component { 43 | constructor(props) { 44 | super(props); 45 | this.state = { 46 | selectedInstrument: 269 47 | }; 48 | } 49 | componentDidMount() { 50 | this.setState({ initialized: true }); 51 | } 52 | onSelectInstrument(e){ 53 | var list=e.target; 54 | let n = list.options[list.selectedIndex].getAttribute("value"); 55 | this.setState({ 56 | selectedInstrument: n 57 | }); 58 | this.midiSounds.cacheInstrument(n); 59 | this.stopAll(); 60 | } 61 | createSelectItems() { 62 | if (this.midiSounds) { 63 | if (!(this.items)) { 64 | this.items = []; 65 | for (let i = 0; i < this.midiSounds.player.loader.instrumentKeys().length; i++) { 66 | this.items.push(); 67 | } 68 | } 69 | return this.items; 70 | } 71 | } 72 | startPlay(){ 73 | var guitar=this.state.selectedInstrument; 74 | var data=[ 75 | [[],[[guitar,[S6+1,S5+3,S4+3],3/16,1]]] 76 | ,[[],[]] 77 | ,[[],[]] 78 | ,[[],[[guitar,[S6+1,S5+3,S4+3],1/16,1]]] 79 | ,[[],[[guitar,[S6+1,S5+3,S4+3],2/16,2]]] 80 | ,[[],[]] 81 | ,[[],[[guitar,[S5+1,S4+3,S3+3],1/16,3]]] 82 | ,[[],[[guitar,[S5+1,S4+3,S3+3],1/16,3]]] 83 | 84 | ,[[],[[guitar,[S5+1,S4+3,S3+3],1/16,3]]] 85 | ,[[],[[guitar,[S5+1,S4+3,S3+3],1/16,3]]] 86 | ,[[],[[guitar,[S5+1,S4+3,S3+3],2/16,1]]] 87 | ,[[],[]] 88 | ,[[],[[guitar,[S5+1,S4+3,S3+3],2/16,1]]] 89 | ,[[],[]] 90 | ,[[],[[guitar,[S5+0,S4+0,S3+0],2/16,2]]] 91 | ,[[],[]] 92 | 93 | ,[[],[[guitar,[S6+4,S5+6,S4+6],3/16,1]]] 94 | ,[[],[]] 95 | ,[[],[]] 96 | ,[[],[[guitar,[S6+4,S5+6,S4+6],1/16,1]]] 97 | ,[[],[[guitar,[S6+4,S5+6,S4+6],2/16,2]]] 98 | ,[[],[]] 99 | ,[[],[[guitar,[S5+4,S4+6,S3+6],1/16,3]]] 100 | ,[[],[[guitar,[S5+4,S4+6,S3+6],1/16,3]]] 101 | 102 | ,[[],[[guitar,[S5+4,S4+6,S3+6],1/16,3]]] 103 | ,[[],[[guitar,[S5+4,S4+6,S3+6],1/16,3]]] 104 | ,[[],[[guitar,[S5+4,S4+6,S3+6],2/16,1]]] 105 | ,[[],[]] 106 | ,[[],[[guitar,[S5+4,S4+6,S3+6],2/16,1]]] 107 | ,[[],[]] 108 | ,[[],[[guitar,[S5+4,S4+6,S3+6],2/16,2]]] 109 | ,[[],[]] 110 | ]; 111 | this.midiSounds.startPlayLoop(data, 120, 1/16); 112 | } 113 | stopAll(){ 114 | this.midiSounds.stopPlayLoop(); 115 | } 116 | render() { 117 | return ( 118 |
119 |
120 | logo 121 |

Welcome to midi-sounds-react example 8

122 |
123 |

Select instrument and press a Play.

124 |

125 |

126 | 127 | 128 |

129 |

Component

130 | (this.midiSounds = ref)} appElementName="root" instruments={[this.state.selectedInstrument]} /> 131 |
132 |

Sources: https://www.npmjs.com/package/midi-sounds-react

133 |
134 | ); 135 | } 136 | } 137 | 138 | export default App; 139 | -------------------------------------------------------------------------------- /examples/midi-sounds-example8/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /examples/midi-sounds-example8/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /examples/midi-sounds-example8/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | 8 | -------------------------------------------------------------------------------- /examples/midi-sounds-example8/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/midi-sounds-example9/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # misc 10 | .DS_Store 11 | .env.local 12 | .env.development.local 13 | .env.test.local 14 | .env.production.local 15 | 16 | npm-debug.log* 17 | yarn-debug.log* 18 | yarn-error.log* 19 | -------------------------------------------------------------------------------- /examples/midi-sounds-example9/README.md: -------------------------------------------------------------------------------- 1 | midi-sounds-example6 -------------------------------------------------------------------------------- /examples/midi-sounds-example9/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "main.css": "static/css/main.a2e9df35.css", 3 | "main.css.map": "static/css/main.a2e9df35.css.map", 4 | "main.js": "static/js/main.8ab4c3e2.js", 5 | "main.js.map": "static/js/main.8ab4c3e2.js.map", 6 | "static\\media\\logo.svg": "static/media/logo.ee7cd8ed.svg" 7 | } -------------------------------------------------------------------------------- /examples/midi-sounds-example9/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surikov/midi-sounds-react-examples/61c88f10e0bbc861b3fee1fc97b22a23e07725ed/examples/midi-sounds-example9/build/favicon.ico -------------------------------------------------------------------------------- /examples/midi-sounds-example9/build/index.html: -------------------------------------------------------------------------------- 1 | React App
-------------------------------------------------------------------------------- /examples/midi-sounds-example9/build/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/midi-sounds-example9/build/service-worker.js: -------------------------------------------------------------------------------- 1 | "use strict";var precacheConfig=[["/midi-sounds-react-examples/examples/midi-sounds-example9/build/index.html","c4594e73e34d6c51f2d4578fe4594d23"],["/midi-sounds-react-examples/examples/midi-sounds-example9/build/static/css/main.a2e9df35.css","b3dfa7a31a3365f957520b8522501d1a"],["/midi-sounds-react-examples/examples/midi-sounds-example9/build/static/js/main.8ab4c3e2.js","105532f556974d430e114108408a688e"],["/midi-sounds-react-examples/examples/midi-sounds-example9/build/static/media/logo.ee7cd8ed.svg","ee7cd8ed2dcec943251eb2763684fc6f"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(e){return e.redirected?("body"in e?Promise.resolve(e.body):e.blob()).then(function(t){return new Response(t,{headers:e.headers,status:e.status,statusText:e.statusText})}):Promise.resolve(e)},createCacheKey=function(e,t,n,r){var s=new URL(e);return r&&s.pathname.match(r)||(s.search+=(s.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),s.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,t){var n=new URL(e);return n.hash="",n.search=n.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(e){return t.every(function(t){return!t.test(e[0])})}).map(function(e){return e.join("=")}).join("&"),n.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],r=new URL(t,self.location),s=createCacheKey(r,hashParamName,n,/\.\w{8}\./);return[r.toString(),s]}));function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(e){return setOfCachedUrls(e).then(function(t){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(n){if(!t.has(n)){var r=new Request(n,{credentials:"same-origin"});return fetch(r).then(function(t){if(!t.ok)throw new Error("Request for "+n+" returned a response with status "+t.status);return cleanResponse(t).then(function(t){return e.put(n,t)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var t=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(e){return e.keys().then(function(n){return Promise.all(n.map(function(n){if(!t.has(n.url))return e.delete(n)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(e){if("GET"===e.request.method){var t,n=stripIgnoredUrlParameters(e.request.url,ignoreUrlParametersMatching),r="index.html";(t=urlsToCacheKeys.has(n))||(n=addDirectoryIndex(n,r),t=urlsToCacheKeys.has(n));var s="/midi-sounds-react-examples/examples/midi-sounds-example9/build/index.html";!t&&"navigate"===e.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],e.request.url)&&(n=new URL(s,self.location).toString(),t=urlsToCacheKeys.has(n)),t&&e.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(t){return console.warn('Couldn\'t serve response for "%s" from cache: %O',e.request.url,t),fetch(e.request)}))}}); -------------------------------------------------------------------------------- /examples/midi-sounds-example9/build/static/css/main.a2e9df35.css: -------------------------------------------------------------------------------- 1 | body{margin:0;padding:0;font-family:sans-serif}.App{text-align:center}.App-logo{height:80px}.App-header{background-color:#222;height:150px;padding:20px;color:#fff}.App-title{font-size:1.5em}.App-intro{font-size:large}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}} 2 | /*# sourceMappingURL=main.a2e9df35.css.map*/ -------------------------------------------------------------------------------- /examples/midi-sounds-example9/build/static/css/main.a2e9df35.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["index.css","App.css"],"names":[],"mappings":"AAAA,KACE,SACA,UACA,sBAAwB,CCH1B,KACE,iBAAmB,CAGrB,UACE,WAAa,CAGf,YACE,sBACA,aACA,aACA,UAAa,CAGf,WACE,eAAiB,CAGnB,WACE,eAAiB,CAGnB,iCACE,GAAO,+BAAiC,sBAAwB,CAChE,GAAK,gCAAmC,uBAA0B,CAAE,CAGtE,yBACE,GAAO,+BAAiC,sBAAwB,CAChE,GAAK,gCAAmC,uBAA0B,CAAE","file":"static/css/main.a2e9df35.css","sourcesContent":["body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: sans-serif;\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/index.css",".App {\r\n text-align: center;\r\n}\r\n\r\n.App-logo {\r\n height: 80px;\r\n}\r\n\r\n.App-header {\r\n background-color: #222;\r\n height: 150px;\r\n padding: 20px;\r\n color: white;\r\n}\r\n\r\n.App-title {\r\n font-size: 1.5em;\r\n}\r\n\r\n.App-intro {\r\n font-size: large;\r\n}\r\n\r\n@-webkit-keyframes App-logo-spin {\r\n from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }\r\n to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }\r\n}\r\n\r\n@keyframes App-logo-spin {\r\n from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }\r\n to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/App.css"],"sourceRoot":""} -------------------------------------------------------------------------------- /examples/midi-sounds-example9/build/static/media/logo.ee7cd8ed.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/midi-sounds-example9/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "midi-sounds-examples", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://surikov.github.io/midi-sounds-react-examples/examples/midi-sounds-example9/build", 6 | "dependencies": { 7 | "react": "^16.2.0", 8 | "react-dom": "^16.2.0", 9 | "react-scripts": "1.1.0", 10 | "midi-sounds-react": "^1.2.45" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test --env=jsdom", 16 | "eject": "react-scripts eject" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/midi-sounds-example9/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surikov/midi-sounds-react-examples/61c88f10e0bbc861b3fee1fc97b22a23e07725ed/examples/midi-sounds-example9/public/favicon.ico -------------------------------------------------------------------------------- /examples/midi-sounds-example9/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /examples/midi-sounds-example9/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/midi-sounds-example9/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 80px; 7 | } 8 | 9 | .App-header { 10 | background-color: #222; 11 | height: 150px; 12 | padding: 20px; 13 | color: white; 14 | } 15 | 16 | .App-title { 17 | font-size: 1.5em; 18 | } 19 | 20 | .App-intro { 21 | font-size: large; 22 | } 23 | 24 | @keyframes App-logo-spin { 25 | from { transform: rotate(0deg); } 26 | to { transform: rotate(360deg); } 27 | } 28 | -------------------------------------------------------------------------------- /examples/midi-sounds-example9/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /examples/midi-sounds-example9/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /examples/midi-sounds-example9/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | 8 | -------------------------------------------------------------------------------- /examples/midi-sounds-example9/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | --------------------------------------------------------------------------------