From 4fca2cda96c89c4b8cd5ab64aac7b514f3ac87a1 Mon Sep 17 00:00:00 2001 From: "Glitch (buttered-raspy-beechnut)" Date: Sun, 11 Oct 2020 05:55:12 +0000 Subject: [PATCH 1/3] html & css --- .glitch-assets | 11 + package-lock.json | 395 ++++++++++++++++++++++++++++++ package.json | 30 +++ public/script.js | 36 +++ public/style.css | 153 ++++++++++++ server.js | 125 ++++++++++ shrinkwrap.yaml | 612 ++++++++++++++++++++++++++++++++++++++++++++++ views/index.html | 161 ++++++++++++ 8 files changed, 1523 insertions(+) create mode 100644 .glitch-assets create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 public/script.js create mode 100644 public/style.css create mode 100644 server.js create mode 100644 shrinkwrap.yaml create mode 100644 views/index.html diff --git a/.glitch-assets b/.glitch-assets new file mode 100644 index 00000000..599511fc --- /dev/null +++ b/.glitch-assets @@ -0,0 +1,11 @@ +{"name":"drag-in-files.svg","date":"2016-10-22T16:17:49.954Z","url":"https://cdn.hyperdev.com/drag-in-files.svg","type":"image/svg","size":7646,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/drag-in-files.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(102, 153, 205)","uuid":"adSBq97hhhpFNUna"} +{"name":"click-me.svg","date":"2016-10-23T16:17:49.954Z","url":"https://cdn.hyperdev.com/click-me.svg","type":"image/svg","size":7116,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/click-me.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(243, 185, 186)","uuid":"adSBq97hhhpFNUnb"} +{"name":"paste-me.svg","date":"2016-10-24T16:17:49.954Z","url":"https://cdn.hyperdev.com/paste-me.svg","type":"image/svg","size":7242,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/paste-me.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(42, 179, 185)","uuid":"adSBq97hhhpFNUnc"} +{"uuid":"adSBq97hhhpFNUna","deleted":true} +{"uuid":"adSBq97hhhpFNUnb","deleted":true} +{"uuid":"adSBq97hhhpFNUnc","deleted":true} +{"name":"bensound-dreams.mp3","date":"2020-10-10T07:02:11.003Z","url":"https://cdn.glitch.com/3f0225bc-d8ea-44d1-a762-d956a20ee84b%2Fbensound-dreams.mp3","type":"audio/mpeg","size":5050617,"thumbnail":"https://cdn.glitch.com/3f0225bc-d8ea-44d1-a762-d956a20ee84b%2Fthumbnails%2Fbensound-dreams.mp3","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"bLp08p5sZ5expPcw"} +{"uuid":"bLp08p5sZ5expPcw","deleted":true} +{"name":"bensound-dreams.mp3","date":"2020-10-10T08:38:36.432Z","url":"https://cdn.glitch.com/3f0225bc-d8ea-44d1-a762-d956a20ee84b%2Fbensound-dreams.mp3","type":"audio/mpeg","size":5050617,"thumbnail":"https://cdn.glitch.com/3f0225bc-d8ea-44d1-a762-d956a20ee84b%2Fthumbnails%2Fbensound-dreams.mp3","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"IK7LV4CxAyLk6Dn2"} +{"uuid":"IK7LV4CxAyLk6Dn2","deleted":true} +{"name":"bensound-dreams.mp3","date":"2020-10-10T15:50:17.416Z","url":"https://cdn.glitch.com/3f0225bc-d8ea-44d1-a762-d956a20ee84b%2Fbensound-dreams.mp3","type":"audio/mpeg","size":5050617,"thumbnail":"https://cdn.glitch.com/3f0225bc-d8ea-44d1-a762-d956a20ee84b%2Fthumbnails%2Fbensound-dreams.mp3","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"FnwAsp3BW1BTBjXM"} diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..ac9a8087 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,395 @@ +{ + "name": "hello-express", + "version": "0.0.1", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "express": { + "version": "4.17.1", + "requires": { + "accepts": "~1.3.7", + "array-flatten": "1.1.1", + "body-parser": "1.19.0", + "content-disposition": "0.5.3", + "content-type": "~1.0.4", + "cookie": "0.4.0", + "cookie-signature": "1.0.6", + "debug": "2.6.9", + "depd": "~1.1.2", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "etag": "~1.8.1", + "finalhandler": "~1.1.2", + "fresh": "0.5.2", + "merge-descriptors": "1.0.1", + "methods": "~1.1.2", + "on-finished": "~2.3.0", + "parseurl": "~1.3.3", + "path-to-regexp": "0.1.7", + "proxy-addr": "~2.0.5", + "qs": "6.7.0", + "range-parser": "~1.2.1", + "safe-buffer": "5.1.2", + "send": "0.17.1", + "serve-static": "1.14.1", + "setprototypeof": "1.1.1", + "statuses": "~1.5.0", + "type-is": "~1.6.18", + "utils-merge": "1.0.1", + "vary": "~1.1.2" + } + }, + "mediaserver": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/mediaserver/-/mediaserver-0.1.1.tgz", + "integrity": "sha512-+Gpdjzxp8n3v4lUnvLzepimasnrjHdjNVqcvD/U9nhUkuYNkUp3AbenHoePBEFheqS/WL5j9Mk0V4tjAHLnIpw==" + }, + "mongodb": { + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-3.6.2.tgz", + "integrity": "sha512-sSZOb04w3HcnrrXC82NEh/YGCmBuRgR+C1hZgmmv4L6dBz4BkRse6Y8/q/neXer9i95fKUBbFi4KgeceXmbsOA==", + "requires": { + "bl": "^2.2.1", + "bson": "^1.1.4", + "denque": "^1.4.1", + "require_optional": "^1.0.1", + "safe-buffer": "^5.1.2", + "saslprep": "^1.0.0" + }, + "dependencies": { + "bl": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/bl/-/bl-2.2.1.tgz", + "integrity": "sha512-6Pesp1w0DEX1N550i/uGV/TqucVL4AM/pgThFSN/Qq9si1/DF9aIHs1BxD8V/QU0HoeHO6cQRTAuYnLPKq1e4g==", + "requires": { + "readable-stream": "^2.3.5", + "safe-buffer": "^5.1.1" + } + }, + "bson": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/bson/-/bson-1.1.5.tgz", + "integrity": "sha512-kDuEzldR21lHciPQAIulLs1LZlCXdLziXI6Mb/TDkwXhb//UORJNPXgcRs2CuO4H0DcMkpfT3/ySsP3unoZjBg==" + }, + "core-util-is": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", + "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=" + }, + "denque": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/denque/-/denque-1.4.1.tgz", + "integrity": "sha512-OfzPuSZKGcgr96rf1oODnfjqBFmr1DVoc/TrItj3Ohe0Ah1C5WX5Baquw/9U9KovnQ88EqmJbD66rKYUQYN1tQ==" + }, + "inherits": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" + }, + "isarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=" + }, + "memory-pager": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/memory-pager/-/memory-pager-1.5.0.tgz", + "integrity": "sha512-ZS4Bp4r/Zoeq6+NLJpP+0Zzm0pR8whtGPf1XExKLJBAczGMnSi3It14OiNCStjQjM6NU1okjQGSxgEZN8eBYKg==", + "optional": true + }, + "process-nextick-args": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", + "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==" + }, + "readable-stream": { + "version": "2.3.7", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz", + "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==", + "requires": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + }, + "dependencies": { + "safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" + } + } + }, + "require_optional": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/require_optional/-/require_optional-1.0.1.tgz", + "integrity": "sha512-qhM/y57enGWHAe3v/NcwML6a3/vfESLe/sGM2dII+gEO0BpKRUkWZow/tyloNqJyN6kXSl3RyyM8Ll5D/sJP8g==", + "requires": { + "resolve-from": "^2.0.0", + "semver": "^5.1.0" + } + }, + "resolve-from": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-2.0.0.tgz", + "integrity": "sha1-lICrIOlP+h2egKgEx+oUdhGWa1c=" + }, + "safe-buffer": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", + "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==" + }, + "saslprep": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/saslprep/-/saslprep-1.0.3.tgz", + "integrity": "sha512-/MY/PEMbk2SuY5sScONwhUDsV2p77Znkb/q3nSVstq/yQzYJOH/Azh29p9oJLsl3LnQwSvZDKagDGBsBwSooag==", + "optional": true, + "requires": { + "sparse-bitfield": "^3.0.3" + } + }, + "semver": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", + "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==" + }, + "sparse-bitfield": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/sparse-bitfield/-/sparse-bitfield-3.0.3.tgz", + "integrity": "sha1-/0rm5oZWBWuks+eSqzM004JzyhE=", + "optional": true, + "requires": { + "memory-pager": "^1.0.2" + } + }, + "string_decoder": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "requires": { + "safe-buffer": "~5.1.0" + }, + "dependencies": { + "safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" + } + } + }, + "util-deprecate": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=" + } + } + }, + "multer": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/multer/-/multer-1.4.2.tgz", + "integrity": "sha512-xY8pX7V+ybyUpbYMxtjM9KAiD9ixtg5/JkeKUTD6xilfDv0vzzOFcCp4Ljb1UU3tSOM3VTZtKo63OmzOrGi3Cg==", + "requires": { + "append-field": "^1.0.0", + "busboy": "^0.2.11", + "concat-stream": "^1.5.2", + "mkdirp": "^0.5.1", + "object-assign": "^4.1.1", + "on-finished": "^2.3.0", + "type-is": "^1.6.4", + "xtend": "^4.0.0" + }, + "dependencies": { + "append-field": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/append-field/-/append-field-1.0.0.tgz", + "integrity": "sha1-HjRA6RXwsSA9I3SOeO3XubW0PlY=" + }, + "buffer-from": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz", + "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==" + }, + "busboy": { + "version": "0.2.14", + "resolved": "https://registry.npmjs.org/busboy/-/busboy-0.2.14.tgz", + "integrity": "sha1-bCpiLvz0fFe7vh4qnDetNseSVFM=", + "requires": { + "dicer": "0.2.5", + "readable-stream": "1.1.x" + } + }, + "concat-stream": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz", + "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==", + "requires": { + "buffer-from": "^1.0.0", + "inherits": "^2.0.3", + "readable-stream": "^2.2.2", + "typedarray": "^0.0.6" + }, + "dependencies": { + "isarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=" + }, + "readable-stream": { + "version": "2.3.7", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz", + "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==", + "requires": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + }, + "string_decoder": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "requires": { + "safe-buffer": "~5.1.0" + } + } + } + }, + "core-util-is": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", + "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=" + }, + "dicer": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/dicer/-/dicer-0.2.5.tgz", + "integrity": "sha1-WZbAhrszIYyBLAkL3cCc0S+stw8=", + "requires": { + "readable-stream": "1.1.x", + "streamsearch": "0.1.2" + } + }, + "ee-first": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", + "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" + }, + "inherits": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" + }, + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" + }, + "media-typer": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", + "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=" + }, + "mime-db": { + "version": "1.44.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz", + "integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==" + }, + "mime-types": { + "version": "2.1.27", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.27.tgz", + "integrity": "sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==", + "requires": { + "mime-db": "1.44.0" + } + }, + "minimist": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", + "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==" + }, + "mkdirp": { + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz", + "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==", + "requires": { + "minimist": "^1.2.5" + } + }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" + }, + "on-finished": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", + "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=", + "requires": { + "ee-first": "1.1.1" + } + }, + "process-nextick-args": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", + "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==" + }, + "readable-stream": { + "version": "1.1.14", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz", + "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=", + "requires": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.1", + "isarray": "0.0.1", + "string_decoder": "~0.10.x" + } + }, + "safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" + }, + "streamsearch": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-0.1.2.tgz", + "integrity": "sha1-gIudDlb8Jz2Am6VzOOkpkZoanxo=" + }, + "string_decoder": { + "version": "0.10.31", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", + "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=" + }, + "type-is": { + "version": "1.6.18", + "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", + "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==", + "requires": { + "media-typer": "0.3.0", + "mime-types": "~2.1.24" + } + }, + "typedarray": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", + "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" + }, + "util-deprecate": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=" + }, + "xtend": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", + "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==" + } + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 00000000..b3cbfc3d --- /dev/null +++ b/package.json @@ -0,0 +1,30 @@ +{ + "//1": "describes your app and its dependencies", + "//2": "https://docs.npmjs.com/files/package.json", + "//3": "updating this file will download and update your packages", + "name": "hello-express", + "version": "0.0.1", + "description": "A simple Node app built on Express, instantly up and running.", + "main": "server.js", + "scripts": { + "start": "node server.js" + }, + "dependencies": { + "express": "^4.17.1", + "mediaserver": "^0.1.1", + "mongodb": "^3.6.2", + "multer": "^1.4.2" + }, + "engines": { + "node": "12.x" + }, + "repository": { + "url": "https://glitch.com/edit/#!/hello-express" + }, + "license": "MIT", + "keywords": [ + "node", + "glitch", + "express" + ] +} diff --git a/public/script.js b/public/script.js new file mode 100644 index 00000000..d5cc749f --- /dev/null +++ b/public/script.js @@ -0,0 +1,36 @@ +var color= ~~(Math.random()*360), + spans = d3.selectAll("._3dbox"), + len = 15; + +spans + .style("background-color", function(d) { + return "hsl("+ random(0, 360) +", 60%, 50%)"; + }) + + function draw () { + spans + .transition().duration(500).ease('elastic') + .style("height", function(d) { return d * 5 + "px"; }); + } + + setInterval(function () { + var arr = Array.apply(null, new Array(len)).map(function () { + return [random(10, 80)]; + }); + spans + .data(arr); + draw(); + }, 800); + + function random (min, max) { + return min + ~~(Math.random() * (max - min)); + } + +var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +var audioElement = document.getElementById('audioElement'); +var audioSrc = audioCtx.createMediaElementSource(audioElement); +var analyser = audioCtx.createAnalyser(); + +// Bind our analyser to the media element source. +audioSrc.connect(analyser); +audioSrc.connect(audioCtx.destination); diff --git a/public/style.css b/public/style.css new file mode 100644 index 00000000..a87f91e1 --- /dev/null +++ b/public/style.css @@ -0,0 +1,153 @@ +@import url(https://fonts.googleapis.com/css?family=Playball); +body { + background-image: url(https://subtlepatterns.com/patterns/tweed.png); + color: #999; + text-shadow: 0 1px 0px #333; + text-align: center; + font-family: 'Playball', cursive; + font-size: 1.4em; + perspective: 700px; +} + +a { + color: #00ACED; +} + +._3dbox:nth-child(1) { + transform: rotateY(24deg) translateZ(120px); +} + +._3dbox:nth-child(2) { + transform: rotateY(48deg) translateZ(120px); +} + +._3dbox:nth-child(3) { + transform: rotateY(72deg) translateZ(120px); +} + +._3dbox:nth-child(4) { + transform: rotateY(96deg) translateZ(120px); +} + +._3dbox:nth-child(5) { + transform: rotateY(120deg) translateZ(120px); +} + +._3dbox:nth-child(6) { + transform: rotateY(144deg) translateZ(120px); +} + +._3dbox:nth-child(7) { + transform: rotateY(168deg) translateZ(120px); +} + +._3dbox:nth-child(8) { + transform: rotateY(192deg) translateZ(120px); +} + +._3dbox:nth-child(9) { + transform: rotateY(216deg) translateZ(120px); +} + +._3dbox:nth-child(10) { + transform: rotateY(240deg) translateZ(120px); +} + +._3dbox:nth-child(11) { + transform: rotateY(264deg) translateZ(120px); +} + +._3dbox:nth-child(12) { + transform: rotateY(288deg) translateZ(120px); +} + +._3dbox:nth-child(13) { + transform: rotateY(312deg) translateZ(120px); +} + +._3dbox:nth-child(14) { + transform: rotateY(336deg) translateZ(120px); +} + +._3dbox:nth-child(15) { + transform: rotateY(360deg) translateZ(120px); +} + +/* 3D Cube */ +.space3d { + transform-style: preserve-3d; + width: 35px; + height: 400px; + text-align: center; + display: inline-block; + position: relative; + animation: rot 15s linear infinite; +} + +._3dbox { + position: absolute; + bottom: 0; + left: 0; + text-align: center; + width: 35px; + height: 35px; + transform-style: preserve-3d; + opacity: 0.8; +} + +._3dface { + overflow: hidden; + position: absolute; + background: inherit; + box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 0, 0, 0.3); + line-height: 35px; +} + +._3dface--front { + width: 35px; + height: 35px; + transform: translate3d(0, 0, 17.5px); +} + +._3dface--top { + width: 35px; + height: 35px; + transform: rotateX(90deg) translate3d(0, 0, 17.5px); +} + +._3dface--bottom { + width: 35px; + height: 35px; + transform: rotateX(-90deg) translate3d(0, 0, 17.5px); +} + +._3dface--left { + width: 35px; + height: 35px; + left: 50%; + margin-left: -17.5px; + transform: rotateY(-90deg) translate3d(0, 0, 17.5px); +} + +._3dface--right { + width: 35px; + height: 35px; + left: 50%; + margin-left: -17.5px; + transform: rotateY(90deg) translate3d(0, 0, 17.5px); +} + +._3dface--back { + width: 35px; + height: 35px; + transform: rotateY(180deg) translate3d(0, 0, 17.5px); +} + +@keyframes rot { + from { + transform: rotateY(0deg); + } + to { + transform: rotateY(360deg); + } +} diff --git a/server.js b/server.js new file mode 100644 index 00000000..e0b3ac04 --- /dev/null +++ b/server.js @@ -0,0 +1,125 @@ +// server.js +// where your node app starts + +// we've started you off with Express (https://expressjs.com/) +// but feel free to use whatever libraries or frameworks you'd like through `package.json`. +const express = require("express"); +const trackRoute = express.Router(); +const multer = require('multer'); + +const mongodb = require('mongodb'); +const MongoClient = require('mongodb').MongoClient; +const ObjectID = require('mongodb').ObjectID; +const ms = require('mediaserver'); + + +const { Readable } = require('stream'); + + + +const app = express(); + + +// make all the files in 'public' available +// https://expressjs.com/en/starter/static-files.html +app.use(express.static("public")); +app.use('/tracks', trackRoute); + + +const uri = "mongodb+srv://wying_glitch:${process.env.DBPASSWORD}@cluster0.zhrg2.mongodb.net/?retryWrites=true&w=majority"; +let db; +const client = new MongoClient(uri, { useNewUrlParser: true }); +client.connect((err, database) => { + const collection = client.db("tracks").collection("music"); + // perform actions on the collection object + db = database; +}); + +trackRoute.get('/:trackID',(req,res)=>{ + try { + var trackID = new ObjectID(req.params.trackID); + } catch(err) { + return res.status(400).json({ message: "Invalid trackID in URL parameter. Must be a single String of 12 bytes or a string of 24 hex characters" }); + } + res.set('content-type', 'audio/mp3'); + res.set('accept-ranges', 'bytes'); + + let bucket = new mongodb.GridFSBucket(db, { + bucketName: 'tracks' + }); + + let downloadStream = bucket.openDownloadStream(trackID); + + downloadStream.on('data', (chunk) => { + res.write(chunk); + }); + + downloadStream.on('error', () => { + res.sendStatus(404); + }); + + downloadStream.on('end', () => { + res.end(); + }); + + +}) + + +// https://expressjs.com/en/starter/basic-routing.html +app.get("/", (request, response) => { + response.sendFile(__dirname + "/views/index.html"); +}); + +// send the default array of dreams to the webpage +app.get("/dreams", (request, response) => { + var AUDIOFILE = 'https://cdn.glitch.com/3f0225bc-d8ea-44d1-a762-d956a20ee84b%2Fbensound-dreams.mp3' + ms.pipe(request,response,AUDIOFILE); +}); + + +trackRoute.post('/submit',(req,res)=>{ + + const storage = multer.memoryStorage() + const upload = multer({ + storage: storage, + limits: { fields: 1, + fileSize: 6000000, + files: 1, + parts: 2 }}); + upload.single('track')(req, res, (err) => { + if (err) { + return res.status(400).json({ message: "Upload Request Validation Failed" }); + } else if(!req.body.name) { + return res.status(400).json({ message: "No track name in request body" }); + } + + let trackName = req.body.name; + + // Covert buffer to Readable Stream + const readableTrackStream = new Readable(); + readableTrackStream.push(req.file.buffer); + readableTrackStream.push(null); + + let bucket = new mongodb.GridFSBucket(db, { + bucketName: 'tracks' + }); + + let uploadStream = bucket.openUploadStream(trackName); + let id = uploadStream.id; + readableTrackStream.pipe(uploadStream); + + uploadStream.on('error', () => { + return res.status(500).json({ message: "Error uploading file" }); + }); + + uploadStream.on('finish', () => { + return res.status(201).json({ message: "File uploaded successfully, stored under Mongo ObjectID: " + id }); + }); + }); +}) + +// listen for requests :) +const listener = app.listen(process.env.PORT, () => { + console.log("Your app is listening on port " + listener.address().port); +}); diff --git a/shrinkwrap.yaml b/shrinkwrap.yaml new file mode 100644 index 00000000..1d8adfa0 --- /dev/null +++ b/shrinkwrap.yaml @@ -0,0 +1,612 @@ +dependencies: + express: 4.17.1 + mongodb: 3.6.2 + multer: 1.4.2 +packages: + /accepts/1.3.7: + dependencies: + mime-types: 2.1.25 + negotiator: 0.6.2 + dev: false + engines: + node: '>= 0.6' + resolution: + integrity: sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA== + /append-field/1.0.0: + dev: false + resolution: + integrity: sha1-HjRA6RXwsSA9I3SOeO3XubW0PlY= + /array-flatten/1.1.1: + dev: false + resolution: + integrity: sha1-ml9pkFGx5wczKPKgCJaLZOopVdI= + /bl/2.2.1: + dependencies: + readable-stream: 2.3.7 + safe-buffer: 5.2.1 + dev: false + resolution: + integrity: sha512-6Pesp1w0DEX1N550i/uGV/TqucVL4AM/pgThFSN/Qq9si1/DF9aIHs1BxD8V/QU0HoeHO6cQRTAuYnLPKq1e4g== + /body-parser/1.19.0: + dependencies: + bytes: 3.1.0 + content-type: 1.0.4 + debug: 2.6.9 + depd: 1.1.2 + http-errors: 1.7.2 + iconv-lite: 0.4.24 + on-finished: 2.3.0 + qs: 6.7.0 + raw-body: 2.4.0 + type-is: 1.6.18 + dev: false + engines: + node: '>= 0.8' + resolution: + integrity: sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw== + /bson/1.1.5: + dev: false + engines: + node: '>=0.6.19' + resolution: + integrity: sha512-kDuEzldR21lHciPQAIulLs1LZlCXdLziXI6Mb/TDkwXhb//UORJNPXgcRs2CuO4H0DcMkpfT3/ySsP3unoZjBg== + /buffer-from/1.1.1: + dev: false + resolution: + integrity: sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A== + /busboy/0.2.14: + dependencies: + dicer: 0.2.5 + readable-stream: 1.1.14 + dev: false + engines: + node: '>=0.8.0' + resolution: + integrity: sha1-bCpiLvz0fFe7vh4qnDetNseSVFM= + /bytes/3.1.0: + dev: false + engines: + node: '>= 0.8' + resolution: + integrity: sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg== + /concat-stream/1.6.2: + dependencies: + buffer-from: 1.1.1 + inherits: 2.0.4 + readable-stream: 2.3.7 + typedarray: 0.0.6 + dev: false + engines: + '0': node >= 0.8 + resolution: + integrity: sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw== + /content-disposition/0.5.3: + dependencies: + safe-buffer: 5.1.2 + dev: false + engines: + node: '>= 0.6' + resolution: + integrity: sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g== + /content-type/1.0.4: + dev: false + engines: + node: '>= 0.6' + resolution: + integrity: sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA== + /cookie-signature/1.0.6: + dev: false + resolution: + integrity: sha1-4wOogrNCzD7oylE6eZmXNNqzriw= + /cookie/0.4.0: + dev: false + engines: + node: '>= 0.6' + resolution: + integrity: sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg== + /core-util-is/1.0.2: + dev: false + resolution: + integrity: sha1-tf1UIgqivFq1eqtxQMlAdUUDwac= + /debug/2.6.9: + dependencies: + ms: 2.0.0 + dev: false + resolution: + integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA== + /denque/1.4.1: + dev: false + engines: + node: '>=0.10' + resolution: + integrity: sha512-OfzPuSZKGcgr96rf1oODnfjqBFmr1DVoc/TrItj3Ohe0Ah1C5WX5Baquw/9U9KovnQ88EqmJbD66rKYUQYN1tQ== + /depd/1.1.2: + dev: false + engines: + node: '>= 0.6' + resolution: + integrity: sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak= + /destroy/1.0.4: + dev: false + resolution: + integrity: sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA= + /dicer/0.2.5: + dependencies: + readable-stream: 1.1.14 + streamsearch: 0.1.2 + dev: false + engines: + node: '>=0.8.0' + resolution: + integrity: sha1-WZbAhrszIYyBLAkL3cCc0S+stw8= + /ee-first/1.1.1: + dev: false + resolution: + integrity: sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0= + /encodeurl/1.0.2: + dev: false + engines: + node: '>= 0.8' + resolution: + integrity: sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k= + /escape-html/1.0.3: + dev: false + resolution: + integrity: sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg= + /etag/1.8.1: + dev: false + engines: + node: '>= 0.6' + resolution: + integrity: sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc= + /express/4.17.1: + dependencies: + accepts: 1.3.7 + array-flatten: 1.1.1 + body-parser: 1.19.0 + content-disposition: 0.5.3 + content-type: 1.0.4 + cookie: 0.4.0 + cookie-signature: 1.0.6 + debug: 2.6.9 + depd: 1.1.2 + encodeurl: 1.0.2 + escape-html: 1.0.3 + etag: 1.8.1 + finalhandler: 1.1.2 + fresh: 0.5.2 + merge-descriptors: 1.0.1 + methods: 1.1.2 + on-finished: 2.3.0 + parseurl: 1.3.3 + path-to-regexp: 0.1.7 + proxy-addr: 2.0.5 + qs: 6.7.0 + range-parser: 1.2.1 + safe-buffer: 5.1.2 + send: 0.17.1 + serve-static: 1.14.1 + setprototypeof: 1.1.1 + statuses: 1.5.0 + type-is: 1.6.18 + utils-merge: 1.0.1 + vary: 1.1.2 + dev: false + engines: + node: '>= 0.10.0' + resolution: + integrity: sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g== + /finalhandler/1.1.2: + dependencies: + debug: 2.6.9 + encodeurl: 1.0.2 + escape-html: 1.0.3 + on-finished: 2.3.0 + parseurl: 1.3.3 + statuses: 1.5.0 + unpipe: 1.0.0 + dev: false + engines: + node: '>= 0.8' + resolution: + integrity: sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA== + /forwarded/0.1.2: + dev: false + engines: + node: '>= 0.6' + resolution: + integrity: sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ= + /fresh/0.5.2: + dev: false + engines: + node: '>= 0.6' + resolution: + integrity: sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac= + /http-errors/1.7.2: + dependencies: + depd: 1.1.2 + inherits: 2.0.3 + setprototypeof: 1.1.1 + statuses: 1.5.0 + toidentifier: 1.0.0 + dev: false + engines: + node: '>= 0.6' + resolution: + integrity: sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg== + /http-errors/1.7.3: + dependencies: + depd: 1.1.2 + inherits: 2.0.4 + setprototypeof: 1.1.1 + statuses: 1.5.0 + toidentifier: 1.0.0 + dev: false + engines: + node: '>= 0.6' + resolution: + integrity: sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw== + /iconv-lite/0.4.24: + dependencies: + safer-buffer: 2.1.2 + dev: false + engines: + node: '>=0.10.0' + resolution: + integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA== + /inherits/2.0.3: + dev: false + resolution: + integrity: sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4= + /inherits/2.0.4: + dev: false + resolution: + integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ== + /ipaddr.js/1.9.0: + dev: false + engines: + node: '>= 0.10' + resolution: + integrity: sha512-M4Sjn6N/+O6/IXSJseKqHoFc+5FdGJ22sXqnjTpdZweHK64MzEPAyQZyEU3R/KRv2GLoa7nNtg/C2Ev6m7z+eA== + /isarray/0.0.1: + dev: false + resolution: + integrity: sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8= + /isarray/1.0.0: + dev: false + resolution: + integrity: sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE= + /media-typer/0.3.0: + dev: false + engines: + node: '>= 0.6' + resolution: + integrity: sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g= + /memory-pager/1.5.0: + dev: false + optional: true + resolution: + integrity: sha512-ZS4Bp4r/Zoeq6+NLJpP+0Zzm0pR8whtGPf1XExKLJBAczGMnSi3It14OiNCStjQjM6NU1okjQGSxgEZN8eBYKg== + /merge-descriptors/1.0.1: + dev: false + resolution: + integrity: sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E= + /methods/1.1.2: + dev: false + engines: + node: '>= 0.6' + resolution: + integrity: sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4= + /mime-db/1.42.0: + dev: false + engines: + node: '>= 0.6' + resolution: + integrity: sha512-UbfJCR4UAVRNgMpfImz05smAXK7+c+ZntjaA26ANtkXLlOe947Aag5zdIcKQULAiF9Cq4WxBi9jUs5zkA84bYQ== + /mime-types/2.1.25: + dependencies: + mime-db: 1.42.0 + dev: false + engines: + node: '>= 0.6' + resolution: + integrity: sha512-5KhStqB5xpTAeGqKBAMgwaYMnQik7teQN4IAzC7npDv6kzeU6prfkR67bc87J1kWMPGkoaZSq1npmexMgkmEVg== + /mime/1.6.0: + dev: false + engines: + node: '>=4' + hasBin: true + resolution: + integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg== + /minimist/1.2.5: + dev: false + resolution: + integrity: sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw== + /mkdirp/0.5.5: + dependencies: + minimist: 1.2.5 + dev: false + hasBin: true + resolution: + integrity: sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ== + /mongodb/3.6.2: + dependencies: + bl: 2.2.1 + bson: 1.1.5 + denque: 1.4.1 + require_optional: 1.0.1 + safe-buffer: 5.2.1 + dev: false + engines: + node: '>=4' + optionalDependencies: + saslprep: 1.0.3 + resolution: + integrity: sha512-sSZOb04w3HcnrrXC82NEh/YGCmBuRgR+C1hZgmmv4L6dBz4BkRse6Y8/q/neXer9i95fKUBbFi4KgeceXmbsOA== + /ms/2.0.0: + dev: false + resolution: + integrity: sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g= + /ms/2.1.1: + dev: false + resolution: + integrity: sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg== + /multer/1.4.2: + dependencies: + append-field: 1.0.0 + busboy: 0.2.14 + concat-stream: 1.6.2 + mkdirp: 0.5.5 + object-assign: 4.1.1 + on-finished: 2.3.0 + type-is: 1.6.18 + xtend: 4.0.2 + dev: false + engines: + node: '>= 0.10.0' + resolution: + integrity: sha512-xY8pX7V+ybyUpbYMxtjM9KAiD9ixtg5/JkeKUTD6xilfDv0vzzOFcCp4Ljb1UU3tSOM3VTZtKo63OmzOrGi3Cg== + /negotiator/0.6.2: + dev: false + engines: + node: '>= 0.6' + resolution: + integrity: sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw== + /object-assign/4.1.1: + dev: false + engines: + node: '>=0.10.0' + resolution: + integrity: sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM= + /on-finished/2.3.0: + dependencies: + ee-first: 1.1.1 + dev: false + engines: + node: '>= 0.8' + resolution: + integrity: sha1-IPEzZIGwg811M3mSoWlxqi2QaUc= + /parseurl/1.3.3: + dev: false + engines: + node: '>= 0.8' + resolution: + integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ== + /path-to-regexp/0.1.7: + dev: false + resolution: + integrity: sha1-32BBeABfUi8V60SQ5yR6G/qmf4w= + /process-nextick-args/2.0.1: + dev: false + resolution: + integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag== + /proxy-addr/2.0.5: + dependencies: + forwarded: 0.1.2 + ipaddr.js: 1.9.0 + dev: false + engines: + node: '>= 0.10' + resolution: + integrity: sha512-t/7RxHXPH6cJtP0pRG6smSr9QJidhB+3kXu0KgXnbGYMgzEnUxRQ4/LDdfOwZEMyIh3/xHb8PX3t+lfL9z+YVQ== + /qs/6.7.0: + dev: false + engines: + node: '>=0.6' + resolution: + integrity: sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ== + /range-parser/1.2.1: + dev: false + engines: + node: '>= 0.6' + resolution: + integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg== + /raw-body/2.4.0: + dependencies: + bytes: 3.1.0 + http-errors: 1.7.2 + iconv-lite: 0.4.24 + unpipe: 1.0.0 + dev: false + engines: + node: '>= 0.8' + resolution: + integrity: sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q== + /readable-stream/1.1.14: + dependencies: + core-util-is: 1.0.2 + inherits: 2.0.4 + isarray: 0.0.1 + string_decoder: 0.10.31 + dev: false + resolution: + integrity: sha1-fPTFTvZI44EwhMY23SB54WbAgdk= + /readable-stream/2.3.7: + dependencies: + core-util-is: 1.0.2 + inherits: 2.0.4 + isarray: 1.0.0 + process-nextick-args: 2.0.1 + safe-buffer: 5.1.2 + string_decoder: 1.1.1 + util-deprecate: 1.0.2 + dev: false + resolution: + integrity: sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw== + /require_optional/1.0.1: + dependencies: + resolve-from: 2.0.0 + semver: 5.7.1 + dev: false + resolution: + integrity: sha512-qhM/y57enGWHAe3v/NcwML6a3/vfESLe/sGM2dII+gEO0BpKRUkWZow/tyloNqJyN6kXSl3RyyM8Ll5D/sJP8g== + /resolve-from/2.0.0: + dev: false + engines: + node: '>=0.10.0' + resolution: + integrity: sha1-lICrIOlP+h2egKgEx+oUdhGWa1c= + /safe-buffer/5.1.2: + dev: false + resolution: + integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g== + /safe-buffer/5.2.1: + dev: false + resolution: + integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ== + /safer-buffer/2.1.2: + dev: false + resolution: + integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== + /saslprep/1.0.3: + dependencies: + sparse-bitfield: 3.0.3 + dev: false + engines: + node: '>=6' + optional: true + resolution: + integrity: sha512-/MY/PEMbk2SuY5sScONwhUDsV2p77Znkb/q3nSVstq/yQzYJOH/Azh29p9oJLsl3LnQwSvZDKagDGBsBwSooag== + /semver/5.7.1: + dev: false + hasBin: true + resolution: + integrity: sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ== + /send/0.17.1: + dependencies: + debug: 2.6.9 + depd: 1.1.2 + destroy: 1.0.4 + encodeurl: 1.0.2 + escape-html: 1.0.3 + etag: 1.8.1 + fresh: 0.5.2 + http-errors: 1.7.3 + mime: 1.6.0 + ms: 2.1.1 + on-finished: 2.3.0 + range-parser: 1.2.1 + statuses: 1.5.0 + dev: false + engines: + node: '>= 0.8.0' + resolution: + integrity: sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg== + /serve-static/1.14.1: + dependencies: + encodeurl: 1.0.2 + escape-html: 1.0.3 + parseurl: 1.3.3 + send: 0.17.1 + dev: false + engines: + node: '>= 0.8.0' + resolution: + integrity: sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg== + /setprototypeof/1.1.1: + dev: false + resolution: + integrity: sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw== + /sparse-bitfield/3.0.3: + dependencies: + memory-pager: 1.5.0 + dev: false + optional: true + resolution: + integrity: sha1-/0rm5oZWBWuks+eSqzM004JzyhE= + /statuses/1.5.0: + dev: false + engines: + node: '>= 0.6' + resolution: + integrity: sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow= + /streamsearch/0.1.2: + dev: false + engines: + node: '>=0.8.0' + resolution: + integrity: sha1-gIudDlb8Jz2Am6VzOOkpkZoanxo= + /string_decoder/0.10.31: + dev: false + resolution: + integrity: sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ= + /string_decoder/1.1.1: + dependencies: + safe-buffer: 5.1.2 + dev: false + resolution: + integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg== + /toidentifier/1.0.0: + dev: false + engines: + node: '>=0.6' + resolution: + integrity: sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw== + /type-is/1.6.18: + dependencies: + media-typer: 0.3.0 + mime-types: 2.1.25 + dev: false + engines: + node: '>= 0.6' + resolution: + integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g== + /typedarray/0.0.6: + dev: false + resolution: + integrity: sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= + /unpipe/1.0.0: + dev: false + engines: + node: '>= 0.8' + resolution: + integrity: sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw= + /util-deprecate/1.0.2: + dev: false + resolution: + integrity: sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8= + /utils-merge/1.0.1: + dev: false + engines: + node: '>= 0.4.0' + resolution: + integrity: sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM= + /vary/1.1.2: + dev: false + engines: + node: '>= 0.8' + resolution: + integrity: sha1-IpnwLG3tMNSllhsLn3RSShj2NPw= + /xtend/4.0.2: + dev: false + engines: + node: '>=0.4' + resolution: + integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ== +registry: 'https://registry.npmjs.org/' +shrinkwrapMinorVersion: 9 +shrinkwrapVersion: 3 +specifiers: + express: ^4.17.1 + mongodb: ^3.6.2 + multer: ^1.4.2 diff --git a/views/index.html b/views/index.html new file mode 100644 index 00000000..161583df --- /dev/null +++ b/views/index.html @@ -0,0 +1,161 @@ + + + + + + + + + + + Welcome to Glitch! + + + + + + + + + +
+

CSS 3D music visualization using D3.js

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+



+ +
+ + + + +
+
+ + From 34386b6ed6944a451e0f79f2cb45dd0ff71a94ff Mon Sep 17 00:00:00 2001 From: "Glitch (buttered-raspy-beechnut)" Date: Sun, 11 Oct 2020 05:55:58 +0000 Subject: [PATCH 2/3] added svg --- public/script.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/public/script.js b/public/script.js index d5cc749f..99c991e5 100644 --- a/public/script.js +++ b/public/script.js @@ -34,3 +34,27 @@ var analyser = audioCtx.createAnalyser(); // Bind our analyser to the media element source. audioSrc.connect(analyser); audioSrc.connect(audioCtx.destination); + + + +var frequencyData = new Uint8Array(200); + +var svgHeight = '300'; +var svgWidth = '1200'; +var barPadding = '1'; + +function createSvg(parent, height, width) { + return d3.select(parent).append('svg').attr('height', height).attr('width', width); +} + +var svg = createSvg('body', svgHeight, svgWidth); + +// Create our initial D3 chart. +svg.selectAll('rect') + .data(frequencyData) + .enter() + .append('rect') + .attr('x', function (d, i) { + return i * (svgWidth / frequencyData.length); + }) + .attr('width', svgWidth / frequencyData.length - barPadding); \ No newline at end of file From 3c7442b636f057fb938af3c97ef3d4699e346bbe Mon Sep 17 00:00:00 2001 From: "Glitch (a4-wying)" Date: Mon, 12 Oct 2020 03:41:51 +0000 Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=90=AB=F0=9F=92=BE=20Updated=20with?= =?UTF-8?q?=20Glitch?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 62 +++------------------- public/script.js | 130 +++++++++++++++++++++++++++++++---------------- views/index.html | 12 +++-- 3 files changed, 102 insertions(+), 102 deletions(-) diff --git a/README.md b/README.md index b61d3e2b..5f79098a 100644 --- a/README.md +++ b/README.md @@ -1,59 +1,11 @@ -Assignment 4 - Creative Coding: Interactive Multimedia Experiences -=== -Due: October 11th, by 11:59 PM. +## Dreams Visualization -For this assignment we will focus on client-side development using popular audio/graphics/visualization technologies; the server requirements are minimal. The goal of this assignment is to refine our JavaScript knowledge while exploring the multimedia capabilities of the browser. +Hosting link https://a4-wying.glitch.me/ -Baseline Requirements ---- +This project is a visualization of music made by Web Audio API and D3. When clicking play music, the roll keys will change with the frequency of the music. User can change the volume and speed and color as they want. -Your application is required to implement the following functionalities: - -- A server created using Express. This server can be as simple as needed. -- A client-side interactive experience using at least one of the following web technologies frameworks. - - [Three.js](https://threejs.org/): A library for 3D graphics / VR experiences - - [D3.js](https://d3js.org): A library that is primarily used for interactive data visualizations - - [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API): A 2D raster drawing API included in all modern browsers - - [SVG](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API): A 2D vector drawing framework that enables shapes to be defined via XML. - - [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API): An API for audio synthesis, analysis, processing, and file playback. -- A user interface for interaction with your project, which must expose at least six parameters for user control. [dat.gui](https://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage) is highly recommended for this. You might also explore interaction by tracking mouse movement via the `window.onmousemove` event handler in tandem with the `event.clientX` and `event.clientY` properties. Consider using the [Pointer Events API](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) to ensure that that mouse and touch events will both be supported in your app. -- Your application should display basic documentation for the user interface when the application first loads. This documentation should be dismissable, however, users should be able to redisplay it via either a help buton (this could, for example, be inside a dat.gui interface) or via a keyboard shortcut (commonly the question mark). -- Your HTML and CSS should validate. There are options/plugins for most IDEs to check validation. - -The interactive experience should possess a reasonable level of complexity. Some examples: -### Three.js -- A generative algorithm creates simple agents that move through a virtual world. Your interface controls the behavior / appearance of these agents. -- A simple 3D game -- An 3D audio visualization of a song of your choosing. User interaction should control aspects of the visualization. -### Canvas -- Implement a generative algorithm such as [Conway's Game of Life](https://bitstorm.org/gameoflife/) (or 1D cellular automata) and provide interactive controls. Note that the Game of Life has been created by 100s of people using ; we'll be checking to ensure that your implementation is not a copy of these. -- Design a 2D audio visualizer of a song of your choosing. User interaction should control visual aspects of the experience. -### Web Audio API -- Create a screen-based musical instrument using the Web Audio API. You can use projects such as [Interface.js](http://charlie-roberts.com/interface/) or [Nexus UI](https://nexus-js.github.io/ui/api/#Piano) to provide common musical interface elements, or use dat.GUI in combination with mouse/touch events (use the Pointer Events API). Your GUI should enable users to control aspects of sound synthesis. -### D3.js -- Create visualizations using the datasets found at [Awesome JSON Datasets](https://github.com/jdorfman/Awesome-JSON-Datasets). Experiment with providing different visualizations of the same data set, and providing users interactive control over visualization parameters and/or data filtering. Alternatively, create a single visualization with using one of the more complicated techniques shown at [d3js.org](d3js.org) and provide meaningful points of interaction for users. - -Deliverables ---- - -Do the following to complete this assignment: - -1. Implement your project with the above requirements. -3. Test your project to make sure that when someone goes to your main page on Glitch/Heroku/etc., it displays correctly. -4. Ensure that your project has the proper naming scheme `a4-firstname-lastname` so we can find it. -5. Fork this repository and modify the README to the specifications below. *NOTE: If you don't use Glitch for hosting (where we can see the files) then you must include all project files that you author in your repo for this assignment*. -6. Create and submit a Pull Request to the original repo. Name the pull request using the following template: `a4-firstname-lastname`. - -Sample Readme (delete the above when you're ready to submit, and modify the below so with your links and descriptions) ---- - -## Your Web Application Title - -your hosting link e.g. http://a4-charlieroberts.glitch.me - -Include a very brief summary of your project here. Images are encouraged when needed, along with concise, high-level text. Be sure to include: - -- the goal of the application -- challenges you faced in realizing the application -- the instructions you present in the website should be clear enough to use the application, but if you feel any need to provide additional instructions please do so here. +When clicking the piano mode button, the keys will turn to a musical instrument that is interactive and can produce a music. + +Challenges I faced was to create a lot of divs. I tried to create them in a loop in javascript but it went wrong. I had to change it to be hard coded in html. +Another challenge was that I initially want my application to be able to change music. I wanted to store the music in the database but it failed when I tried to send a response from the server. I did not find the reason still. diff --git a/public/script.js b/public/script.js index 99c991e5..4bc27905 100644 --- a/public/script.js +++ b/public/script.js @@ -1,33 +1,45 @@ -var color= ~~(Math.random()*360), - spans = d3.selectAll("._3dbox"), - len = 15; - -spans - .style("background-color", function(d) { - return "hsl("+ random(0, 360) +", 60%, 50%)"; - }) - - function draw () { - spans - .transition().duration(500).ease('elastic') - .style("height", function(d) { return d * 5 + "px"; }); - } - - setInterval(function () { - var arr = Array.apply(null, new Array(len)).map(function () { - return [random(10, 80)]; - }); - spans - .data(arr); - draw(); - }, 800); - - function random (min, max) { - return min + ~~(Math.random() * (max - min)); - } +let color = ~~(Math.random() * 360), + spans = d3.selectAll("._3dbox"), + len = 15; + +spans.style("background-color", function(d) { + return "hsl(" + random(0, 360) + ", 60%, 50%)"; +}); + +function changeColor(){ + spans.style("background-color", function(d) { + return "hsl(" + random(0, 360) + ", 60%, 50%)"; +}); +} + +function draw() { + spans + .transition() + .duration(500) + .ease("elastic") + .style("height", function(d) { + return d * 5 + "px"; + }); +} + +setInterval(function() { + //var arr = Array.apply(null, new Array(len)).map(function() { + // return [random(10, 80)]; + //}); + analyser.getByteFrequencyData(frequencyData); + + spans.data(frequencyData); + draw(); +}, 800); + + + +function random(min, max) { + return min + ~~(Math.random() * (max - min)); +} var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); -var audioElement = document.getElementById('audioElement'); +var audioElement = document.getElementById("audioElement"); var audioSrc = audioCtx.createMediaElementSource(audioElement); var analyser = audioCtx.createAnalyser(); @@ -35,26 +47,58 @@ var analyser = audioCtx.createAnalyser(); audioSrc.connect(analyser); audioSrc.connect(audioCtx.destination); +function play() { + audioCtx.resume(); + audioElement.play(); +} +var frequencyData = new Uint8Array(15); -var frequencyData = new Uint8Array(200); - -var svgHeight = '300'; -var svgWidth = '1200'; -var barPadding = '1'; +var svgHeight = "300"; +var svgWidth = "1200"; +var barPadding = "1"; function createSvg(parent, height, width) { - return d3.select(parent).append('svg').attr('height', height).attr('width', width); + return d3 + .select(parent) + .append("svg") + .attr("height", height) + .attr("width", width); } -var svg = createSvg('body', svgHeight, svgWidth); +var svg = createSvg("body", svgHeight, svgWidth); // Create our initial D3 chart. -svg.selectAll('rect') - .data(frequencyData) - .enter() - .append('rect') - .attr('x', function (d, i) { - return i * (svgWidth / frequencyData.length); - }) - .attr('width', svgWidth / frequencyData.length - barPadding); \ No newline at end of file +svg + .selectAll("rect") + .data(frequencyData) + .enter() + .append("rect") + .attr("x", function(d, i) { + return i * (svgWidth / frequencyData.length); + }) + .attr("width", svgWidth / frequencyData.length - barPadding); + + +function renderChart() { + requestAnimationFrame(renderChart); + + // Copy frequency data to frequencyData array. + analyser.getByteFrequencyData(frequencyData); + + // Update d3 chart with new data. + svg.selectAll('rect') + .data(frequencyData) + .attr('y', function(d) { + return svgHeight - d; + }) + .attr('height', function(d) { + return d; + }) + .attr('fill', function(d) { + return 'rgb(0, 0, ' + d + ')'; + }); +} + +// Run the loop +renderChart(); \ No newline at end of file diff --git a/views/index.html b/views/index.html index 161583df..35c04fc8 100644 --- a/views/index.html +++ b/views/index.html @@ -8,7 +8,7 @@ - Welcome to Glitch! + Interactive Music Player

CSS 3D music visualization using D3.js

-
+
@@ -35,6 +35,7 @@

CSS 3D music visualization using D3.js

+
@@ -151,11 +152,14 @@

CSS 3D music visualization using D3.js





- + + + +
- + \ No newline at end of file