filtered beats, much better 'beat interval' slider, linking to artist's url
This commit is contained in:
parent
7303508907
commit
6e26e3fdb2
6 changed files with 75 additions and 65 deletions
|
|
@ -16,6 +16,9 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
}.observes('active'),
|
||||
|
||||
actions: {
|
||||
gotoURL(URL){
|
||||
window.open(URL, '_blank');
|
||||
},
|
||||
handleNewSoundCloudURL(URL){
|
||||
SC.resolve(URL).then((resultObj)=>{
|
||||
var processResult = (result)=>{
|
||||
|
|
@ -117,10 +120,10 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
defaultControls(){
|
||||
var beatOptions = this.get('beatOptions');
|
||||
|
||||
this.changePlayerControl('threshold', beatOptions.threshold.defaultValue, true, true);
|
||||
this.changePlayerControl('decay', beatOptions.decay.defaultValue, true, true);
|
||||
this.changePlayerControl('frequency', beatOptions.frequency.defaultValue, true, true);
|
||||
this.changePlayerControl('transitionTime', beatOptions.transitionTime.defaultValue, true, true);
|
||||
this.changePlayerControl('threshold', beatOptions.threshold.defaultValue);
|
||||
this.changePlayerControl('interval', beatOptions.interval.defaultValue);
|
||||
this.changePlayerControl('frequency', beatOptions.frequency.defaultValue);
|
||||
this.changePlayerControl('transitionTime', beatOptions.transitionTime.defaultValue);
|
||||
},
|
||||
playerAreaPlay(){
|
||||
if(Em.isEmpty(Em.$('#playerControls:hover')) && this.get('playQueuePointer') !== -1 ){
|
||||
|
|
@ -245,17 +248,17 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
repeatChanged(value) {
|
||||
this.changePlayerControl('repeat', Em.isNone(value) ? (this.get('repeat') + 1) % 3 : value);
|
||||
},
|
||||
thresholdChanged(value) {
|
||||
this.changePlayerControl('threshold', value, true);
|
||||
},
|
||||
transitionTimeChanged(value) {
|
||||
this.changePlayerControl('transitionTime', value);
|
||||
},
|
||||
playerBottomDisplayedChanged(value) {
|
||||
this.changePlayerControl('playerBottomDisplayed', value);
|
||||
},
|
||||
decayChanged(value){
|
||||
this.changePlayerControl('decay', value, true);
|
||||
thresholdChanged(value) {
|
||||
this.changePlayerControl('threshold', value, true);
|
||||
},
|
||||
intervalChanged(value){
|
||||
this.changePlayerControl('interval', value, true);
|
||||
},
|
||||
frequencyChanged(value){
|
||||
this.changePlayerControl('frequency', value, true);
|
||||
|
|
@ -314,21 +317,18 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
}
|
||||
},
|
||||
|
||||
changePlayerControl(name, value, isOption, skipSaveBeatPrefs){
|
||||
changePlayerControl(name, value, saveBeatPrefs){
|
||||
this.set(name, value);
|
||||
|
||||
if(isOption){
|
||||
var options = {};
|
||||
options[name] = value;
|
||||
if(this.get('usingLocalAudio') && this.get('playQueuePointer') !== -1 && skipSaveBeatPrefs !== true) {
|
||||
if(saveBeatPrefs && this.get('usingLocalAudio') && this.get('playQueuePointer') !== -1){
|
||||
this.saveSongBeatPreferences();
|
||||
}
|
||||
|
||||
// filter the threshold manually
|
||||
if(name !== 'threshold'){
|
||||
if(name === 'frequency'){
|
||||
var options = {};
|
||||
options[name] = value;
|
||||
this.get('kick').set(options);
|
||||
}
|
||||
}
|
||||
|
||||
this.get('storage').set('huegasm.' + name, value);
|
||||
},
|
||||
|
|
@ -345,7 +345,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
title = Em.isEmpty(song.artist) ? song.filename : song.artist + '-' + song.title,
|
||||
songBeatPreferences = this.get('songBeatPreferences');
|
||||
|
||||
songBeatPreferences[title] = {threshold: this.get('threshold'), decay: this.get('decay'), frequency: this.get('frequency') };
|
||||
songBeatPreferences[title] = {threshold: this.get('threshold'), interval: this.get('interval'), frequency: this.get('frequency') };
|
||||
|
||||
this.set('usingBeatPreferences', true);
|
||||
this.get('storage').set('huegasm.songBeatPreferences', songBeatPreferences, { compress: true });
|
||||
|
|
@ -360,16 +360,16 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
newOldBeatPrefCache = null;
|
||||
|
||||
if(!Em.isNone(preference)) { // load existing beat prefs
|
||||
newOldBeatPrefCache = {threshold: this.get('threshold'), decay: this.get('decay'), frequency: this.get('frequency') };
|
||||
newOldBeatPrefCache = {threshold: this.get('threshold'), interval: this.get('interval'), frequency: this.get('frequency') };
|
||||
|
||||
this.changePlayerControl('threshold', preference.threshold, true, true);
|
||||
this.changePlayerControl('decay', preference.decay, true, true);
|
||||
this.changePlayerControl('frequency', preference.frequency, true, true);
|
||||
this.changePlayerControl('threshold', preference.threshold);
|
||||
this.changePlayerControl('interval', preference.interval);
|
||||
this.changePlayerControl('frequency', preference.frequency);
|
||||
this.set('usingBeatPreferences', true);
|
||||
} else if(!Em.isNone(oldBeatPrefCache)) { // revert to using beat prefs before the remembered song
|
||||
this.changePlayerControl('threshold', oldBeatPrefCache.threshold, true, true);
|
||||
this.changePlayerControl('decay', oldBeatPrefCache.decay, true, true);
|
||||
this.changePlayerControl('frequency', oldBeatPrefCache.frequency, true, true);
|
||||
this.changePlayerControl('threshold', oldBeatPrefCache.threshold);
|
||||
this.changePlayerControl('interval', oldBeatPrefCache.interval);
|
||||
this.changePlayerControl('frequency', oldBeatPrefCache.frequency);
|
||||
this.set('usingBeatPreferences', false);
|
||||
}
|
||||
|
||||
|
|
@ -465,7 +465,8 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
},
|
||||
|
||||
simulateKick(mag) {
|
||||
var validBeat = (this.get('threshold') < mag);
|
||||
var validBeat = (this.get('threshold') < mag),
|
||||
beatInterval = this.get('interval');
|
||||
|
||||
if(validBeat){
|
||||
var activeLights = this.get('activeLights'),
|
||||
|
|
@ -515,15 +516,16 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
|
||||
stimulateLight(light, 254, color);
|
||||
setTimeout(stimulateLight, transitionTime + 50, light, 1);
|
||||
|
||||
this.set('paused', true);
|
||||
|
||||
setTimeout(function () {
|
||||
self.set('paused', false);
|
||||
}, 150);
|
||||
}
|
||||
}
|
||||
|
||||
if(beatInterval > 0 && validBeat){
|
||||
this.set('paused', true);
|
||||
setTimeout(() => {
|
||||
this.set('paused', false);
|
||||
}, beatInterval * 1000);
|
||||
}
|
||||
|
||||
//work the music beat area
|
||||
if(this.get('speakerViewed')){
|
||||
if(validBeat){
|
||||
|
|
@ -537,7 +539,10 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
maxSize = this.get('maxBeatHistorySize'),
|
||||
html = 'Beat intesity of <b>' + mag.toFixed(3) + '</b> at <b>' + this.get('timeElapsedTxt') + '</b>';
|
||||
|
||||
if(!validBeat && debugFiltered){
|
||||
if(!validBeat){
|
||||
if(!debugFiltered){
|
||||
return;
|
||||
}
|
||||
html = '<span class="filterBeat">' + html + ' ( filtered ) </span>';
|
||||
}
|
||||
beatHistory.unshiftObjects(html);
|
||||
|
|
@ -554,11 +559,9 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
var dancer = new Dancer(),
|
||||
storage = new window.Locally.Store(),
|
||||
self = this,
|
||||
decay = this.get('decay'),
|
||||
frequency = this.get('frequency'),
|
||||
kick = dancer.createKick({
|
||||
threshold: this.beatOptions.threshold.range.min,
|
||||
decay: decay,
|
||||
frequency: frequency,
|
||||
onKick: function (mag) {
|
||||
if (self.get('paused') === false) {
|
||||
|
|
@ -601,7 +604,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
this.set('usingMicSupported', false);
|
||||
}
|
||||
|
||||
['volume', 'shuffle', 'repeat', 'volumeMuted', 'threshold', 'decay', 'frequency', 'speakerViewed', 'transitionTime', 'randomTransition', 'playerBottomDisplayed', 'onBeatBriAndColor', 'audioMode', 'dimmerEnabled', 'songBeatPreferences'].forEach(function (item) {
|
||||
['volume', 'shuffle', 'repeat', 'volumeMuted', 'threshold', 'interval', 'frequency', 'speakerViewed', 'transitionTime', 'randomTransition', 'playerBottomDisplayed', 'onBeatBriAndColor', 'audioMode', 'dimmerEnabled', 'songBeatPreferences', 'debugFiltered'].forEach(function (item) {
|
||||
if (!Em.isNone(storage.get('huegasm.' + item))) {
|
||||
var itemVal = storage.get('huegasm.' + item);
|
||||
|
||||
|
|
|
|||
|
|
@ -20,10 +20,10 @@ export default Em.Mixin.create({
|
|||
}
|
||||
}
|
||||
},
|
||||
decay: {
|
||||
range: {min: 0, max: 0.1},
|
||||
interval: {
|
||||
range: {min: 0, max: 0.5},
|
||||
step: 0.01,
|
||||
defaultValue: 0.02,
|
||||
defaultValue: 0.15,
|
||||
pips: {
|
||||
mode: 'positions',
|
||||
values: [0,20,40,60,80,100],
|
||||
|
|
@ -66,13 +66,13 @@ export default Em.Mixin.create({
|
|||
|
||||
transitionTime: 0.1,
|
||||
threshold: 0.3,
|
||||
decay: 0.02,
|
||||
interval: 0.15,
|
||||
frequency: [0,4],
|
||||
|
||||
playQueuePointer: -1,
|
||||
playQueue: Em.A(),
|
||||
beatHistory: Em.A(),
|
||||
maxBeatHistorySize: 100,
|
||||
maxBeatHistorySize: 200,
|
||||
timeElapsed: 0,
|
||||
timeTotal: 0,
|
||||
lastLightBopIndex: 0,
|
||||
|
|
@ -136,16 +136,23 @@ export default Em.Mixin.create({
|
|||
}.property('playing'),
|
||||
|
||||
speakerViewed: true,
|
||||
debugFiltered: true,
|
||||
debugFiltered: false,
|
||||
speakerLabel: function() {
|
||||
this.get('storage').set('huegasm.speakerViewed', this.get('speakerViewed'));
|
||||
|
||||
if(this.get('speakerViewed')){
|
||||
this.get('beatHistory').clear();
|
||||
return 'Speaker View';
|
||||
} else {
|
||||
return 'Debug View';
|
||||
}
|
||||
}.property('speakerViewed'),
|
||||
debugFilteredText: function(){
|
||||
if(this.get('debugFiltered')){
|
||||
var debugFiltered = this.get('debugFiltered');
|
||||
this.get('storage').set('huegasm.debugFiltered', debugFiltered);
|
||||
Em.$('#beatHistory .filterBeat').css('display', debugFiltered === true ? 'inline' : 'none');
|
||||
|
||||
if(debugFiltered){
|
||||
return 'View Filtered';
|
||||
} else {
|
||||
return 'Hide Filtered';
|
||||
|
|
@ -280,11 +287,6 @@ export default Em.Mixin.create({
|
|||
});
|
||||
}.observes('dimmerOn'),
|
||||
|
||||
onSpeakerViewedChange: function(){
|
||||
this.get('storage').set('huegasm.speakerViewed', this.get('speakerViewed'));
|
||||
this.get('beatHistory').clear();
|
||||
}.observes('speakerViewed'),
|
||||
|
||||
onOptionChange: function(self, option){
|
||||
this.get('storage').set('huegasm.' + option, this.get(option));
|
||||
}.observes('randomTransition', 'onBeatBriAndColor'),
|
||||
|
|
|
|||
|
|
@ -73,7 +73,12 @@
|
|||
class="playlistItem cursorPointer {{if (eq index playQueuePointer) "active"}} {{if dragging "hidden"}}" {{action "goToSong" index true bubbles=false}}>
|
||||
{{#if item.title}}
|
||||
{{item.title}}
|
||||
{{#if item.artistUrl}}
|
||||
<a href="#" {{action "gotoURL" item.artistUrl bubbles=false}}><div class="songArtist">{{item.artist}}</div></a>
|
||||
{{else}}
|
||||
<div class="songArtist">{{item.artist}}</div>
|
||||
{{/if}}
|
||||
|
||||
{{else}}
|
||||
{{item.filename}}
|
||||
{{/if}}
|
||||
|
|
@ -102,31 +107,28 @@
|
|||
{{/if}}
|
||||
|
||||
<div class="row">
|
||||
<div class="beatOption col-xs-4">
|
||||
<div class="beatOption col-xs-3">
|
||||
<div class="text-center">{{threshold}}</div>
|
||||
{{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range slide="thresholdChanged" pips=beatOptions.threshold.pips}}
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Threshold of the sound intensity for the beat" class="optionDescription bootstrapTooltip">Treshold</span>
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" data-title="The minimum sound intensity for the beat to register" class="optionDescription bootstrapTooltip">Beat Threshold</span>
|
||||
</div>
|
||||
|
||||
{{!--
|
||||
<div class="beatOption col-xs-3">
|
||||
<div class="text-center">{{decay}}</div>
|
||||
{{range-slider start=decay orientation="vertical" step=beatOptions.decay.step range=beatOptions.decay.range slide="decayChanged" pips=beatOptions.decay.pips}}
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" data-title="The rate at which the previously registered beat's intensity is reduced to find the next beat" class="optionDescription bootstrapTooltip">Decay Rate</span>
|
||||
<div class="text-center">{{interval}} sec</div>
|
||||
{{range-slider start=interval orientation="vertical" step=beatOptions.interval.step range=beatOptions.interval.range slide="intervalChanged" pips=beatOptions.interval.pips}}
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" data-title="The minimum amount of time between each registered beat" class="optionDescription bootstrapTooltip">Beat Interval</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
--}}
|
||||
|
||||
<div class="beatOption col-xs-4">
|
||||
<div class="beatOption col-xs-3">
|
||||
<div class="text-center">[{{#each frequency as |item index|}}{{item}}{{#unless index}}
|
||||
,{{/unless}}{{/each}}
|
||||
]
|
||||
</div>
|
||||
{{range-slider start=frequency orientation="vertical" step=beatOptions.frequency.step range=beatOptions.frequency.range connect=true slide="frequencyChanged" pips=beatOptions.frequency.pips}}
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" data-title="The frequency range of sound to listen on for the beat" class="optionDescription bootstrapTooltip">Frequency Range</span>
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" data-title="The frequency range of the sound to listen on for the beat" class="optionDescription bootstrapTooltip">Frequency Range</span>
|
||||
</div>
|
||||
|
||||
<div class="beatOption col-xs-4">
|
||||
<div class="beatOption col-xs-3">
|
||||
<div class="text-center">{{transitionTime}} sec</div>
|
||||
{{range-slider start=transitionTime orientation="vertical" step=beatOptions.transitionTime.step range=beatOptions.transitionTime.range slide="transitionTimeChanged" pips=beatOptions.transitionTime.pips}}
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" data-title="The time it takes for a light to change color or brightness" class="optionDescription bootstrapTooltip">Transition Time</span>
|
||||
|
|
|
|||
|
|
@ -746,7 +746,7 @@ md-switch.md-default-theme.md-checked .md-thumb {
|
|||
height: 85%;
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
width: 300px;
|
||||
width: 290px;
|
||||
margin: 40px auto 0 auto;
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,9 @@
|
|||
"ember-qunit": "0.4.9",
|
||||
"ember-qunit-notifications": "0.0.7",
|
||||
"ember-resolver": "~0.1.18",
|
||||
"font-awesome": "~4.4.0",
|
||||
"hammerjs": "~2.0.4",
|
||||
"intro.js": "~1.1.1",
|
||||
"JavaScript-ID3-Reader": "https://github.com/aadsm/JavaScript-ID3-Reader.git",
|
||||
"jquery": "~2.1.4",
|
||||
"jquery-mousewheel": "~3.1.13",
|
||||
|
|
@ -19,8 +21,7 @@
|
|||
"matchMedia": "~0.2.0",
|
||||
"nouislider": "^8.0.1",
|
||||
"qunit": "~1.18.0",
|
||||
"three.js": "~0.72.0",
|
||||
"font-awesome": "~4.4.0"
|
||||
"three.js": "~0.72.0"
|
||||
},
|
||||
"resolutions": {
|
||||
"ember": "~2.1.0",
|
||||
|
|
|
|||
|
|
@ -15,6 +15,8 @@ module.exports = function(defaults) {
|
|||
app.import('bower_components/jquery-mousewheel/jquery.mousewheel.js');
|
||||
app.import('bower_components/three.js/three.js');
|
||||
app.import('bower_components/locallyjs/dist/locally.min.js');
|
||||
app.import('bower_components/intro.js/intro.js');
|
||||
app.import('bower_components/intro.js/introjs.css');
|
||||
|
||||
// Use `app.import` to add additional libraries to the generated
|
||||
// output files.
|
||||
|
|
|
|||
Reference in a new issue