├── .gitignore ├── LICENSE ├── README.md ├── assets ├── audio │ ├── And.mp3 │ ├── AreYou.mp3 │ ├── Band.mp3 │ ├── Drummer.mp3 │ ├── Fans.mp3 │ ├── HHH.mp3 │ ├── Hello.mp3 │ ├── How.mp3 │ ├── III.mp3 │ ├── Indian.mp3 │ ├── Mi.mp3 │ ├── OK.mp3 │ ├── Oh.mp3 │ ├── ThankYou.mp3 │ ├── VeryHappy.mp3 │ ├── VeryMuch.mp3 │ └── VeryOK.mp3 └── js │ └── ion.sound.min.js ├── gulpfile.js ├── package.json └── src ├── css └── main.css ├── index.jade └── js └── main.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | 29 | dist 30 | *.swp 31 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Linghao Li 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 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Are You OK? 2 | 3 | Have fun with the *Are You OK?* song! Inspired by [DaftPunKonsole](https://github.com/KOWLOR/DaftPunKonsole). 4 | -------------------------------------------------------------------------------- /assets/audio/And.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/llh911001/are-you-ok/251366fe81d06f06070084fd19431b4ec0228c26/assets/audio/And.mp3 -------------------------------------------------------------------------------- /assets/audio/AreYou.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/llh911001/are-you-ok/251366fe81d06f06070084fd19431b4ec0228c26/assets/audio/AreYou.mp3 -------------------------------------------------------------------------------- /assets/audio/Band.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/llh911001/are-you-ok/251366fe81d06f06070084fd19431b4ec0228c26/assets/audio/Band.mp3 -------------------------------------------------------------------------------- /assets/audio/Drummer.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/llh911001/are-you-ok/251366fe81d06f06070084fd19431b4ec0228c26/assets/audio/Drummer.mp3 -------------------------------------------------------------------------------- /assets/audio/Fans.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/llh911001/are-you-ok/251366fe81d06f06070084fd19431b4ec0228c26/assets/audio/Fans.mp3 -------------------------------------------------------------------------------- /assets/audio/HHH.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/llh911001/are-you-ok/251366fe81d06f06070084fd19431b4ec0228c26/assets/audio/HHH.mp3 -------------------------------------------------------------------------------- /assets/audio/Hello.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/llh911001/are-you-ok/251366fe81d06f06070084fd19431b4ec0228c26/assets/audio/Hello.mp3 -------------------------------------------------------------------------------- /assets/audio/How.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/llh911001/are-you-ok/251366fe81d06f06070084fd19431b4ec0228c26/assets/audio/How.mp3 -------------------------------------------------------------------------------- /assets/audio/III.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/llh911001/are-you-ok/251366fe81d06f06070084fd19431b4ec0228c26/assets/audio/III.mp3 -------------------------------------------------------------------------------- /assets/audio/Indian.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/llh911001/are-you-ok/251366fe81d06f06070084fd19431b4ec0228c26/assets/audio/Indian.mp3 -------------------------------------------------------------------------------- /assets/audio/Mi.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/llh911001/are-you-ok/251366fe81d06f06070084fd19431b4ec0228c26/assets/audio/Mi.mp3 -------------------------------------------------------------------------------- /assets/audio/OK.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/llh911001/are-you-ok/251366fe81d06f06070084fd19431b4ec0228c26/assets/audio/OK.mp3 -------------------------------------------------------------------------------- /assets/audio/Oh.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/llh911001/are-you-ok/251366fe81d06f06070084fd19431b4ec0228c26/assets/audio/Oh.mp3 -------------------------------------------------------------------------------- /assets/audio/ThankYou.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/llh911001/are-you-ok/251366fe81d06f06070084fd19431b4ec0228c26/assets/audio/ThankYou.mp3 -------------------------------------------------------------------------------- /assets/audio/VeryHappy.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/llh911001/are-you-ok/251366fe81d06f06070084fd19431b4ec0228c26/assets/audio/VeryHappy.mp3 -------------------------------------------------------------------------------- /assets/audio/VeryMuch.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/llh911001/are-you-ok/251366fe81d06f06070084fd19431b4ec0228c26/assets/audio/VeryMuch.mp3 -------------------------------------------------------------------------------- /assets/audio/VeryOK.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/llh911001/are-you-ok/251366fe81d06f06070084fd19431b4ec0228c26/assets/audio/VeryOK.mp3 -------------------------------------------------------------------------------- /assets/js/ion.sound.min.js: -------------------------------------------------------------------------------- 1 | // Ion.Sound | version 3.0.7 | https://github.com/IonDen/ion.sound 2 | (function(l,e,n,r){l.ion=l.ion||{};if(!ion.sound){var m=function(a){a||(a="undefined");if(l.console){console.warn&&"function"===typeof console.warn?console.warn(a):console.log&&"function"===typeof console.log&&console.log(a);var g=n&&n("#debug");if(g&&g.length){var b=g.html();g.html(b+a+"
")}}},f=function(a,b){var c;b=b||{};for(c in a)a.hasOwnProperty(c)&&(b[c]=a[c]);return b};if("function"!==typeof Audio&&"object"!==typeof Audio)e=function(){m("HTML5 Audio is not supported in this browser")}, 3 | ion.sound=e,ion.sound.play=e,ion.sound.stop=e,ion.sound.pause=e,ion.sound.preload=e,ion.sound.destroy=e,e();else{e=/iPad|iPhone|iPod/.test(e.appVersion);var q=0,c={},d={},b;!c.supported&&e?c.supported=["mp3","mp4","aac"]:c.supported||(c.supported=["mp3","ogg","mp4","aac","wav"]);ion.sound=function(a){f(a,c);c.path=c.path||"";c.volume=c.volume||1;c.preload=c.preload||!1;c.multiplay=c.multiplay||!1;c.loop=c.loop||!1;c.sprite=c.sprite||null;c.scope=c.scope||null;c.ready_callback=c.ready_callback||null; 4 | c.ended_callback=c.ended_callback||null;if(q=c.sounds.length)for(b=0;b=b?this.clear():("function"===typeof this.source.start?this.source.start(0,a,b):this.source.noteOn(0,a,b),this.playing=!0,this.paused=!1,this.time_started=(new Date).valueOf())},stop:function(){this.playing&&this.source&& 15 | ("function"===typeof this.source.stop?this.source.stop(0):this.source.noteOff(0));this.clear()},pause:function(){this.paused?this.play():this.playing&&(this.source&&this.source.stop(0),this.paused=!0)},ended:function(){this.playing=!1;this.time_ended=(new Date).valueOf();this.time_played=(this.time_ended-this.time_started)/1E3;this.time_offset+=this.time_played;if(this.time_offset>=this.end||.015>this.end-this.time_offset)this._ended(),this.clear(),this.loop&&(this.loop--,this.play())},_ended:function(){var a= 16 | {name:this.name,alias:this.alias,part:this.sprite_part,start:this.start,duration:this.end};this.ended_callback&&"function"===typeof this.ended_callback&&this.ended_callback.call(this.scope,a)},clear:function(){this.time_offset=this.time_played=0;this.playing=this.paused=!1},setVolume:function(a){this.volume=a.volume;this.gain&&(this.gain.gain.value=this.volume)}};h||(function(){var a=new Audio,b=a.canPlayType("audio/mpeg"),e=a.canPlayType("audio/ogg"),a=a.canPlayType('audio/mp4; codecs="mp4a.40.2"'), 17 | d,f;for(f=0;f=this.end&&this.playing&&(this.stop(),this._ended())},ended:function(){this.playing&&(this.stop(),this._ended())},_ended:function(){this.playing= 26 | !1;var a={name:this.name,alias:this.alias,part:this.sprite_part,start:this.start,duration:this.end};this.ended_callback&&"function"===typeof this.ended_callback&&this.ended_callback.call(this.scope,a);this.loop&&setTimeout(this.looper.bind(this),15)},looper:function(){this.loop--;this.play()},clear:function(){this.paused_time=this.played_time=this.start_time=0},setVolume:function(a){this.volume=a.volume;this.sound&&(this.sound.volume=this.volume)}})}}})(window,navigator,window.jQuery||window.$); 27 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use scrict' 2 | 3 | var gulp = require('gulp') 4 | var jade = require('gulp-jade') 5 | var postcss = require('gulp-postcss') 6 | var processors = [ 7 | require('postcss-nested'), 8 | require('autoprefixer-core')() 9 | ] 10 | var cssmin = require('gulp-minify-css') 11 | var uglify = require('gulp-uglify') 12 | var watchJS 13 | 14 | gulp.task('jade', function () { 15 | return gulp.src('src/index.jade') 16 | .pipe(jade()) 17 | .pipe(gulp.dest('dist')) 18 | }) 19 | 20 | gulp.task('css', function () { 21 | return gulp.src('src/css/main.css') 22 | .pipe(postcss(processors)) 23 | .pipe(cssmin()) 24 | .pipe(gulp.dest('dist/css')) 25 | }) 26 | 27 | gulp.task('js', function () { 28 | return gulp.src('src/js/main.js') 29 | .pipe(uglify()) 30 | .pipe(gulp.dest('dist/js')) 31 | 32 | }) 33 | 34 | gulp.task('assets', function () { 35 | return gulp.src(['assets/**/*']) 36 | .pipe(gulp.dest('dist/assets')) 37 | 38 | }) 39 | 40 | gulp.task('watch', function () { 41 | gulp.watch('src/index.jade', ['jade']) 42 | gulp.watch('src/css/main.css', ['css']) 43 | gulp.watch('src/js/main.js', ['js']) 44 | }) 45 | 46 | gulp.task('default', ['jade', 'css', 'js', 'assets']) 47 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "are-you-ok", 3 | "version": "0.0.1", 4 | "description": "Play the Are You OK song by your keyboard.", 5 | "browserify": { 6 | "transform": [ 7 | "browserify-shim" 8 | ] 9 | }, 10 | "browserify-shim": { 11 | "ion-sound": { 12 | "depends": "jquery", 13 | "exports": "ion-sound" 14 | } 15 | }, 16 | "scripts": { 17 | "build": "gulp", 18 | "test": "echo \"Error: no test specified\" && exit 1" 19 | }, 20 | "repository": { 21 | "type": "git", 22 | "url": "https://github.com/llh911001/are-you-ok" 23 | }, 24 | "keywords": [ 25 | "areyouok", 26 | "music", 27 | "rap", 28 | "pop", 29 | "chinese rap" 30 | ], 31 | "author": "llh911001@gmail.com", 32 | "license": "MIT", 33 | "bugs": { 34 | "url": "https://github.com/llh911001/are-you-ok/issues" 35 | }, 36 | "homepage": "https://github.com/llh911001/are-you-ok", 37 | "devDependencies": { 38 | "autoprefixer-core": "^5.2.1", 39 | "gulp": "^3.9.0", 40 | "gulp-jade": "^1.0.1", 41 | "gulp-minify-css": "^1.2.0", 42 | "gulp-postcss": "^5.1.9", 43 | "gulp-uglify": "^1.2.0", 44 | "postcss-nested": "^0.3.2" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/css/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | html, body { 7 | height: 100vh; 8 | width: 100vw; 9 | font-size: 100%; 10 | vertical-align: baseline; 11 | } 12 | 13 | body { 14 | font: normal 1em/1.4em "Helvetica Neue", Helvetica, Arial, sans-serif; 15 | background-color: #2f343a; 16 | color: #fff; 17 | display: flex; 18 | align-items: center; 19 | flex-direction: column; 20 | justify-content: space-around; 21 | -webkit-font-smoothing: antialiased; 22 | -webkit-font-smoothing: subpixel-antialiased; 23 | text-rendering: optimizeLegibility; 24 | } 25 | 26 | .animated-lyrics { 27 | display: flex; 28 | align-items: center; 29 | justify-content: center; 30 | position: relative; 31 | flex: 1; 32 | 33 | .lyric { 34 | opacity: 0; 35 | font-size: 54px; 36 | color: #ef7126; 37 | } 38 | .animated { 39 | animation: fadeInOut 1s; 40 | } 41 | } 42 | 43 | .keyboard-wrap { 44 | display: flex; 45 | align-items: center; 46 | justify-content: center; 47 | flex: 2; 48 | } 49 | 50 | .keyboard { 51 | user-select: none; 52 | -webkit-tap-highlight-color: rgba(0,0,0,0); 53 | -webkit-tap-highlight-color: transparent; 54 | width: 630px; 55 | 56 | .row { 57 | position: relative; 58 | margin: 10px; 59 | display: flex; 60 | align-items: center; 61 | justify-content: space-between; 62 | 63 | &:nth-child(1) .key, &:nth-child(2) .key, .space { 64 | &.active, &:active { 65 | color: #ef7126; 66 | border-color: #ef7126; 67 | box-shadow: 0 0 12px -2px #ef7126; 68 | } 69 | } 70 | 71 | &:nth-child(2) { 72 | transform: translateX(2.5%); 73 | } 74 | 75 | &:nth-child(3) { 76 | margin-left: 8.5%; 77 | margin-right: 14%; 78 | 79 | .key { 80 | color: #717d8c; 81 | &:hover { 82 | color: #a6a6a6; 83 | border-color: #a6a6a6; 84 | } 85 | &.active, &:active{ 86 | color: #a6a6a6; 87 | border-color: #a6a6a6; 88 | box-shadow: 0 0 9px -2px #a6a6a6; 89 | } 90 | } 91 | } 92 | 93 | .key, .space { 94 | display: flex; 95 | flex-direction: column; 96 | justify-content: center; 97 | align-items: center; 98 | color: #ccc; 99 | width: 49px; 100 | height: 49px; 101 | border: 2px solid #717d8c; 102 | border-radius: 6px; 103 | transition: all .08s ease-in-out; 104 | 105 | &:hover { 106 | color: #ef7126; 107 | border-color: #ef7126; 108 | } 109 | 110 | &.active, &:active { 111 | transform: translateY(1px); 112 | } 113 | 114 | &:nth-child(5), &:nth-child(6) { 115 | color: #717d8c; 116 | &:hover { 117 | color: #a6a6a6; 118 | border-color: #a6a6a6; 119 | } 120 | &.active, &:active{ 121 | color: #a6a6a6; 122 | border-color: #a6a6a6; 123 | box-shadow: 0 0 9px -2px #a6a6a6; 124 | } 125 | } 126 | 127 | b, span { 128 | display: flex; 129 | align-items: center; 130 | flex: 2; 131 | } 132 | 133 | b { 134 | font-family: "Titillium Web"; 135 | } 136 | span { 137 | font-size: 9px; 138 | flex: 1; 139 | } 140 | } 141 | 142 | .space { 143 | width: 49%; 144 | margin-left: 27.5%; 145 | } 146 | 147 | } 148 | } 149 | 150 | .footer { 151 | display: flex; 152 | align-items: center; 153 | flex-direction: column; 154 | justify-content: center; 155 | flex: 1; 156 | 157 | p { 158 | font-size: 11px; 159 | color: #ccc; 160 | 161 | a { 162 | color: #8edc9d; 163 | text-decoration: none; 164 | } 165 | } 166 | } 167 | 168 | @keyframes fadeInOut { 169 | 0% { 170 | opacity: 1; 171 | } 172 | 173 | 100% { 174 | opacity: 0; 175 | transform: translateY(-100%); 176 | } 177 | } 178 | -------------------------------------------------------------------------------- /src/index.jade: -------------------------------------------------------------------------------- 1 | doctype 2 | html 3 | head 4 | meta(charset='utf-8') 5 | title Are You Ok? 6 | meta(name='description', content='') 7 | meta(name='viewport', content='width=device-width, initial-scale=1') 8 | link(rel='stylesheet', href='https://fonts.font.im/css?family=Titillium+Web') 9 | link(rel='stylesheet', href='css/main.css') 10 | body 11 | 17 | 18 | - var qw = [['Q', 81, '3Q'], ['W', 87, '哈喽'], ['E', 69, '为嘛吃'], ['R', 82, '哈哈哈'], ['T', 84, ''], ['Y', 89, ''], ['U', 85, 'Mi'], ['I', 73, 'Fans'], ['O', 79, 'Band'], ['P', 80, 'How']] 19 | - var as = [['A', 65, 'Are You'], ['S', 83, 'OK'], ['D', 68, 'And'], ['F', 70, '为嗨皮'], ['G', 71, ''], ['H', 72, ''], ['J', 74, 'I I I'], ['K', 75, 'Very OK'], ['L', 76, 'Indian'], [';', 186, 'Oh']] 20 | - var zx = [['Z', 90, ''], ['X', 88, ''], ['C', 67, ''], ['V', 86, ''], ['B', 66, ''], ['N', 78, ''], ['M', 77, ''], [',', 188, '']] 21 | 22 | .animated-lyrics 23 | 24 | .keyboard-wrap 25 | .keyboard 26 | .row 27 | each item in qw 28 | .key(data-key= item[0], data-keycode= item[1], data-lyric= item[2]) 29 | b= item[0] 30 | if item[2] 31 | span= item[2] 32 | .row 33 | each item in as 34 | .key(data-key= item[0], data-keycode= item[1], data-lyric= item[2]) 35 | b= item[0] 36 | if item[2] 37 | span= item[2] 38 | .row 39 | each item in zx 40 | .key(data-key= item[0], data-keycode= item[1], data-lyric= item[2]) 41 | b= item[0] 42 | if item[2] 43 | span= item[2] 44 | .row 45 | .space(data-key='SPACE', data-keycode='32') 46 | 47 | .footer 48 | p By Linghao Li with Github 49 | p Original audio by @MrLemoniX 50 | p Inspired by DaftPunKonsole 51 | 52 | script(src='//code.jquery.com/jquery-2.2.4.min.js') 53 | script(src='assets/js/ion.sound.min.js') 54 | script(src='js/main.js') 55 | -------------------------------------------------------------------------------- /src/js/main.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | $(function () { 3 | 4 | var soundIndex = { 5 | 'Q': 'ThankYou', 6 | 'W': 'Hello', 7 | 'E': 'VeryMuch', 8 | 'R': 'HHH', 9 | 'U': 'Mi', 10 | 'I': 'Fans', 11 | 'O': 'Band', 12 | 'P': 'How', 13 | 'A': 'AreYou', 14 | 'S': 'OK', 15 | 'D': 'And', 16 | 'F': 'VeryHappy', 17 | 'J': 'III', 18 | 'K': 'VeryOK', 19 | 'L': 'Indian', 20 | ';': 'Oh', 21 | 'SPACE': 'Drummer' 22 | } 23 | 24 | ion.sound({ 25 | sounds: $.map(soundIndex, function (value, key) { 26 | return {name: value, preload: true} 27 | }), 28 | volume: 0.5, 29 | path: 'assets/audio/', 30 | multiplay: true, 31 | preload: true 32 | }) 33 | 34 | $(document).keydown(function (e) { 35 | var code = e.keyCode || e.which 36 | var $key = $('[data-keycode=' + code + ']') 37 | var key = $key.data('key') 38 | var lyric = $key.data('lyric') 39 | $key.addClass('active') 40 | 41 | if (lyric) animateLyrics(lyric) 42 | if (soundIndex[key]) ion.sound.play(soundIndex[key]) 43 | }) 44 | 45 | $(document).keyup(function (e) { 46 | var code = e.keyCode || e.which 47 | var $key = $('[data-keycode=' + code + ']') 48 | $key.removeClass('active') 49 | }) 50 | 51 | function animateLyrics (lyric) { 52 | $('.animated-lyrics').html('' + lyric + '') 53 | } 54 | 55 | }) 56 | --------------------------------------------------------------------------------