Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 4441b67

Browse files
OkazariOkazari
committed
Migrating to ES6 + A reworked whole library (Okazari#14)
* Migrating to ES6 * A whole new code ! A new fantastic point of view.
1 parent 35201ae commit 4441b67

File tree

13 files changed

+293
-189
lines changed

13 files changed

+293
-189
lines changed

‎.babelrc

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"plugins": [
3+
"external-helpers",
4+
"transform-class-properties"
5+
],
6+
"presets": [ "es2015" ]
7+
}

‎.eslintrc

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"parser": "babel-eslint",
3+
"extends": "eslint:recommended",
4+
"env": {
5+
"node": true,
6+
"mocha": true
7+
}
8+
}

‎GulpFile.js

Lines changed: 3 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
var gulp = require('gulp');
2-
var webserver = require('gulp-webserver');
3-
var rollup = require('rollup').rollup
1+
var gulp = require('gulp')
2+
var webserver = require('gulp-webserver')
43

54
gulp.task('serve', function() {
65
gulp.src('.')
@@ -11,20 +10,4 @@ gulp.task('serve', function() {
1110
}));
1211
});
1312

14-
gulp.task('build', function() {
15-
return rollup({
16-
entry: './src/rythm.js'
17-
}).then(function(bundle) {
18-
bundle.write({
19-
format: 'umd',
20-
moduleName: 'Rythm',
21-
dest: './rythm.js'
22-
})
23-
})
24-
})
25-
26-
gulp.task('watch', function() {
27-
gulp.watch('./src/*.js', ['build'])
28-
})
29-
30-
gulp.task('default', ['build', 'serve', 'watch'])
13+
gulp.task('default', ['serve'])

‎package.json

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,28 @@
77
"rythm.js"
88
],
99
"scripts": {
10-
"start": "gulp",
10+
"start": "concurrently --kill-others \"npm run serve\" \"rollup -c -w\"",
11+
"serve": "gulp serve",
1112
"prepublish": "npm run build",
1213
"test": "echo \"No test specified\" && exit 0",
13-
"build": "gulp build"
14+
"build": "rollup -c"
1415
},
1516
"author": "Benjamin Plouzennec <[email protected]>",
1617
"license": "ISC",
1718
"dependencies": {},
1819
"devDependencies": {
20+
"babel-eslint": "^7.1.1",
21+
"babel-plugin-external-helpers": "^6.22.0",
22+
"babel-plugin-transform-class-properties": "^6.23.0",
23+
"babel-preset-es2015": "^6.22.0",
24+
"babel-register": "^6.23.0",
25+
"babelrc-rollup": "^3.0.0",
26+
"concurrently": "^3.3.0",
27+
"eslint": "^3.15.0",
1928
"gulp": "^3.9.1",
2029
"gulp-webserver": "^0.9.1",
21-
"rollup": "^0.41.4"
30+
"rollup": "^0.41.4",
31+
"rollup-plugin-babel": "^2.7.1",
32+
"rollup-watch": "^3.2.2"
2233
}
2334
}

‎rollup.config.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import babel from 'rollup-plugin-babel';
2+
import babelrc from 'babelrc-rollup';
3+
4+
let pkg = require('./package.json');
5+
let external = Object.keys(pkg.dependencies);
6+
7+
export default {
8+
entry: './src/index.js',
9+
plugins: [
10+
babel(babelrc()),
11+
],
12+
external: external,
13+
targets: [
14+
{
15+
format: 'umd',
16+
moduleName: 'Rythm',
17+
dest: './rythm.js'
18+
}
19+
]
20+
};

‎src/Analyser.js

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
class Analyser {
2+
3+
constructor () {
4+
this.startingScale = 0
5+
this.pulseRatio = 1
6+
this.maxValueHistory = 100
7+
this.hzHistory = []
8+
}
9+
10+
initialise = (analyser) => {
11+
this.analyser = analyser
12+
this.analyser.fftSize = 2048
13+
}
14+
15+
reset = () => {
16+
this.hzHistory = []
17+
this.frequences = new Uint8Array(this.analyser.frequencyBinCount)
18+
}
19+
20+
analyse = () => {
21+
this.analyser.getByteFrequencyData(this.frequences)
22+
this.frequences.forEach((frequence, i) => {
23+
if(!this.hzHistory[i]){
24+
this.hzHistory[i] = []
25+
}
26+
if(this.hzHistory[i].length > this.maxValueHistory){
27+
this.hzHistory[i].shift()
28+
}
29+
this.hzHistory[i].push(frequence)
30+
})
31+
}
32+
33+
getRangeAverageRatio = (startingValue, nbValue) => {
34+
let total = 0
35+
for(let i=startingValue; i<nbValue+startingValue; i++){
36+
total += this.getFrequenceRatio(i)
37+
}
38+
return total/nbValue
39+
}
40+
41+
getFrequenceRatio = (index) => {
42+
let min = 255
43+
let max = 0
44+
this.hzHistory[index].forEach(value => {
45+
if(value < min){
46+
min = value
47+
}
48+
if(value > max){
49+
max = value
50+
}
51+
})
52+
const scale = max - min
53+
const actualValue = this.frequences[index] -min
54+
const percentage = (actualValue/scale)
55+
return this.startingScale + (this.pulseRatio * percentage)
56+
}
57+
58+
}
59+
60+
export default new Analyser

‎src/Dancer.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import pulse from './dances/pulse.js'
2+
import shake from './dances/shake.js'
3+
import jump from './dances/jump.js'
4+
5+
class Dancer {
6+
constructor() {
7+
this.dances = {}
8+
this.registerDance('size', pulse)
9+
this.registerDance('pulse', pulse)
10+
this.registerDance('shake', shake)
11+
this.registerDance('jump', jump)
12+
}
13+
14+
registerDance(type, value) {
15+
this.dances[type] = value
16+
}
17+
18+
dance(type, className, ratio, options) {
19+
const dance = this.dances[type] || this.dances['size']
20+
const elements = document.getElementsByClassName(className)
21+
Array.from(elements).forEach(elem => dance.apply(elem, ratio, options))
22+
}
23+
}
24+
25+
export default new Dancer

‎src/Player.js

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import Analyser from './Analyser.js'
2+
3+
class Player {
4+
constructor() {
5+
this.browserAudioCtx = AudioContext || webkitAudioContext
6+
this.audioCtx = new this.browserAudioCtx()
7+
Analyser.initialise(this.audioCtx.createAnalyser())
8+
this.gain = this.audioCtx.createGain()
9+
this.source = {}
10+
this.audio = {}
11+
this.hzHistory = []
12+
this.inputTypeList = {
13+
"TRACK" : 0,
14+
"STREAM" : 1,
15+
"EXTERNAL" : 2,
16+
}
17+
}
18+
19+
createSourceFromAudioElement = (audioElement) => {
20+
return this.audioCtx.createMediaElementSource(audioElement)
21+
}
22+
23+
connectExternalAudioElement = (audioElement) => {
24+
this.audio = audioElement
25+
this.currentInputType = this.inputTypeList['EXTERNAL']
26+
this.source = this.createSourceFromAudioElement(this.audioElement)
27+
this.connectSource(this.source)
28+
}
29+
30+
connectSource = (source) => {
31+
source.connect(this.gain)
32+
this.gain.connect(Analyser.analyser)
33+
if(this.currentInputType !== this.inputTypeList['STREAM']){
34+
Analyser.analyser.connect(this.audioCtx.destination)
35+
this.audio.addEventListener("ended", this.stop)
36+
}
37+
}
38+
39+
setMusic = (trackUrl) => {
40+
this.audio = new Audio(trackUrl)
41+
this.currentInputType = this.inputTypeList['TRACK']
42+
this.source = this.createSourceFromAudioElement(this.audio)
43+
this.connectSource(this.source)
44+
}
45+
46+
setGain = (value) => {
47+
this.gain.gain.value = value
48+
}
49+
50+
plugMicrophone = () => {
51+
return this.getMicrophoneStream().then(stream => {
52+
this.audio = stream
53+
this.currentInputType = this.inputTypeList['STREAM']
54+
this.source = this.audioCtx.createMediaStreamSource(stream)
55+
this.connectSource(this.source)
56+
})
57+
}
58+
59+
getMicrophoneStream = () => {
60+
navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia)
61+
return new Promise((resolve, reject) => {
62+
navigator.getUserMedia(
63+
{ audio:true },
64+
medias => resolve(medias),
65+
error => reject(error)
66+
)
67+
})
68+
}
69+
70+
start = () => {
71+
if(this.currentInputType === this.inputTypeList['TRACK']){
72+
this.audio.play()
73+
}
74+
}
75+
76+
stop = () => {
77+
if (this.currentInputType === this.inputTypeList['TRACK']) {
78+
this.audio.pause()
79+
} else if (this.currentInputType === this.inputTypeList['STREAM']) {
80+
this.audio.getAudioTracks()[0].enabled = false
81+
}
82+
}
83+
84+
}
85+
86+
export default new Player()

‎src/dances/jump.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export default {
2+
apply: (elem, value, options = {}) => {
3+
const max = options.max || 30
4+
const min = options.min || 0
5+
const jump = (max - min) * value
6+
elem.style.transform = `translateY(${-jump}px)`
7+
}
8+
}

‎src/dances/pulse.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export default {
2+
apply: (elem, value, options = {}) => {
3+
const max = options.max || 1.25
4+
const min = options.min || 0.75
5+
const scale = (max - min) * value
6+
elem.style.transform = `scale(${min + scale})`
7+
}
8+
}

‎src/dances/shake.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
export default {
2+
apply: (elem, value, options = {}) => {
3+
const max = options.max || 15
4+
const min = options.min || -15
5+
const direction = options.direction || 'left'
6+
let shake = 0
7+
if (value < 0.5) {
8+
shake = (0.5 - value) * min
9+
} else {
10+
shake = (value - 0.5) * max
11+
}
12+
elem.style.transform = `translateX(${direction === 'right' ? shake : -shake}px)`
13+
}
14+
}

‎src/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import Rythm from './rythm.js'
2+
export default Rythm

0 commit comments

Comments
 (0)