mirror of
https://github.com/koel/koel
synced 2024-09-20 14:21:55 +00:00
Fix equalizer bugs
This commit is contained in:
parent
43eb314e08
commit
0dfbf4020a
3 changed files with 52 additions and 21 deletions
|
@ -42,7 +42,7 @@
|
||||||
"rangeslider.js": "^2.1.1",
|
"rangeslider.js": "^2.1.1",
|
||||||
"rangetouch": "0.0.9",
|
"rangetouch": "0.0.9",
|
||||||
"sinon": "^1.17.2",
|
"sinon": "^1.17.2",
|
||||||
"vue": "^2.0.0-alpha.6",
|
"vue": "^2.0.0-alpha.7",
|
||||||
"vue-hot-reload-api": "^1.3.2",
|
"vue-hot-reload-api": "^1.3.2",
|
||||||
"vue-resource": "^0.7.0",
|
"vue-resource": "^0.7.0",
|
||||||
"vueify": "^9.1.0",
|
"vueify": "^9.1.0",
|
||||||
|
|
|
@ -1,10 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="equalizer">
|
<div id="equalizer">
|
||||||
<div class="presets">
|
<div class="presets">
|
||||||
<label class="select-wrapper" @change="loadPreset">
|
<label class="select-wrapper">
|
||||||
<select v-model="selectedPresetIndex">
|
<select v-model="selectedPresetIndex">
|
||||||
<option value="-1">Preset</option>
|
<option v-for="p in presets" :value="p.id" v-once>{{ p.name }}</option>
|
||||||
<option v-for="(preset, idx) in presets" :value="idx">{{ preset.name }}</option>
|
|
||||||
</select>
|
</select>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
@ -34,14 +33,14 @@
|
||||||
step="0.01"
|
step="0.01"
|
||||||
data-orientation="vertical"
|
data-orientation="vertical"
|
||||||
:value="band.filter.gain.value">
|
:value="band.filter.gain.value">
|
||||||
<label v-once="band.label"></label>
|
<label>{{ band.label }}</label>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { map } from 'lodash';
|
import { map, cloneDeep } from 'lodash';
|
||||||
import $ from 'jquery';
|
import $ from 'jquery';
|
||||||
import rangeslider from 'rangeslider.js';
|
import rangeslider from 'rangeslider.js';
|
||||||
|
|
||||||
|
@ -53,21 +52,37 @@ export default {
|
||||||
return {
|
return {
|
||||||
idx: 0,
|
idx: 0,
|
||||||
bands: [],
|
bands: [],
|
||||||
selectedPresetIndex: -1,
|
|
||||||
preampGainValue: 0,
|
preampGainValue: 0,
|
||||||
|
selectedPresetIndex: -1,
|
||||||
presets: equalizerStore.presets,
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
presets() {
|
||||||
|
let clonedPreset = cloneDeep(equalizerStore.presets);
|
||||||
|
// Prepend an empty option for instruction purpose.
|
||||||
|
clonedPreset.unshift({
|
||||||
|
id: -1,
|
||||||
|
name: 'Preset',
|
||||||
|
});
|
||||||
|
return clonedPreset;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
watch: {
|
watch: {
|
||||||
/**
|
/**
|
||||||
* Save the selected preset (index) into local storage every time the value's changed.
|
* Watch selectedPresetIndex and trigger our logic.
|
||||||
*
|
* @param {Number} val
|
||||||
* @param {Number} val
|
|
||||||
*/
|
*/
|
||||||
selectedPresetIndex(val) {
|
selectedPresetIndex(val) {
|
||||||
|
/**
|
||||||
|
* Save the selected preset (index) into local storage every time the value's changed.
|
||||||
|
*/
|
||||||
preferences.selectedPreset = val;
|
preferences.selectedPreset = val;
|
||||||
|
|
||||||
|
if (Number.parseInt(val, 10) !== -1) {
|
||||||
|
this.loadPreset(equalizerStore.getPresetById(val));
|
||||||
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -78,7 +93,6 @@ export default {
|
||||||
* @param {Element} player The audio player's DOM.
|
* @param {Element} player The audio player's DOM.
|
||||||
*/
|
*/
|
||||||
init(player) {
|
init(player) {
|
||||||
this.selectedPresetIndex = preferences.selectedPreset;
|
|
||||||
const settings = equalizerStore.get();
|
const settings = equalizerStore.get();
|
||||||
|
|
||||||
const AudioContext = window.AudioContext ||
|
const AudioContext = window.AudioContext ||
|
||||||
|
@ -125,6 +139,9 @@ export default {
|
||||||
prevFilter.connect(context.destination);
|
prevFilter.connect(context.destination);
|
||||||
|
|
||||||
this.$nextTick(this.createRangeSliders);
|
this.$nextTick(this.createRangeSliders);
|
||||||
|
|
||||||
|
// Now we set this value to trigger the audio processing.
|
||||||
|
this.selectedPresetIndex = preferences.selectedPreset;
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -188,13 +205,7 @@ export default {
|
||||||
/**
|
/**
|
||||||
* Load a preset when the user select it from the dropdown.
|
* Load a preset when the user select it from the dropdown.
|
||||||
*/
|
*/
|
||||||
loadPreset() {
|
loadPreset(preset) {
|
||||||
if (Number.parseInt(this.selectedPresetIndex, 10) === -1) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const preset = this.presets[this.selectedPresetIndex];
|
|
||||||
|
|
||||||
$('#equalizer input[type=range]').each((i, input) => {
|
$('#equalizer input[type=range]').each((i, input) => {
|
||||||
// We treat our preamp slider differently.
|
// We treat our preamp slider differently.
|
||||||
if ($(input).parents('.band').is('.preamp')) {
|
if ($(input).parents('.band').is('.preamp')) {
|
||||||
|
|
|
@ -1,79 +1,99 @@
|
||||||
|
import { find } from 'lodash';
|
||||||
|
|
||||||
import { preferenceStore } from '.';
|
import { preferenceStore } from '.';
|
||||||
|
|
||||||
export const equalizerStore = {
|
export const equalizerStore = {
|
||||||
presets: [
|
presets: [
|
||||||
{
|
{
|
||||||
|
id: 0,
|
||||||
name: 'Default',
|
name: 'Default',
|
||||||
preamp: 0,
|
preamp: 0,
|
||||||
gains: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
gains: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
id: 1,
|
||||||
name: 'Classical',
|
name: 'Classical',
|
||||||
preamp: -1,
|
preamp: -1,
|
||||||
gains: [-1, -1, -1, -1, -1, -1, -7, -7, -7, -9],
|
gains: [-1, -1, -1, -1, -1, -1, -7, -7, -7, -9],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
id: 2,
|
||||||
name: 'Club',
|
name: 'Club',
|
||||||
preamp: -6.7,
|
preamp: -6.7,
|
||||||
gains: [-1, -1, 8, 5, 5, 5, 3, -1, -1, -1],
|
gains: [-1, -1, 8, 5, 5, 5, 3, -1, -1, -1],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
id: 3,
|
||||||
name: 'Dance',
|
name: 'Dance',
|
||||||
preamp: -4.3,
|
preamp: -4.3,
|
||||||
gains: [9, 7, 2, -1, -1, -5, -7, -7, -1, -1],
|
gains: [9, 7, 2, -1, -1, -5, -7, -7, -1, -1],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
id: 4,
|
||||||
name: 'Full Bass',
|
name: 'Full Bass',
|
||||||
preamp: -7.2,
|
preamp: -7.2,
|
||||||
gains: [-8, 9, 9, 5, 1, -4, -8, -10, -11, -11]
|
gains: [-8, 9, 9, 5, 1, -4, -8, -10, -11, -11]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
id: 5,
|
||||||
name: 'Full Treble',
|
name: 'Full Treble',
|
||||||
preamp: -12,
|
preamp: -12,
|
||||||
gains: [-9, -9, -9, -4, 2, 11, 16, 16, 16, 16]
|
gains: [-9, -9, -9, -4, 2, 11, 16, 16, 16, 16]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
id: 6,
|
||||||
name: 'Headphone',
|
name: 'Headphone',
|
||||||
preamp: -8,
|
preamp: -8,
|
||||||
gains: [4, 11, 5, -3, -2, 1, 4, 9, 12, 14]
|
gains: [4, 11, 5, -3, -2, 1, 4, 9, 12, 14]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
id: 7,
|
||||||
name: 'Large Hall',
|
name: 'Large Hall',
|
||||||
preamp: -7.2,
|
preamp: -7.2,
|
||||||
gains: [10, 10, 5, 5, -1, -4, -4, -4, -1, -1],
|
gains: [10, 10, 5, 5, -1, -4, -4, -4, -1, -1],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
id: 8,
|
||||||
name: 'Live',
|
name: 'Live',
|
||||||
preamp: -5.3,
|
preamp: -5.3,
|
||||||
gains: [-4, -1, 4, 5, 5, 5, 4, 2, 2, 2],
|
gains: [-4, -1, 4, 5, 5, 5, 4, 2, 2, 2],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
id: 9,
|
||||||
name: 'Pop',
|
name: 'Pop',
|
||||||
preamp: -6.2,
|
preamp: -6.2,
|
||||||
gains: [-1, 4, 7, 8, 5, -1, -2, -2, -1, -1],
|
gains: [-1, 4, 7, 8, 5, -1, -2, -2, -1, -1],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
id: 10,
|
||||||
name: 'Reggae',
|
name: 'Reggae',
|
||||||
preamp: -8.2,
|
preamp: -8.2,
|
||||||
gains: [-1, -1, -1, -5, -1, 6, 6, -1, -1, -1],
|
gains: [-1, -1, -1, -5, -1, 6, 6, -1, -1, -1],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
id: 11,
|
||||||
name: 'Rock',
|
name: 'Rock',
|
||||||
preamp: -10,
|
preamp: -10,
|
||||||
gains: [8, 4, -5, -8, -3, 4, 8, 11, 11, 11],
|
gains: [8, 4, -5, -8, -3, 4, 8, 11, 11, 11],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
id: 12,
|
||||||
name: 'Soft Rock',
|
name: 'Soft Rock',
|
||||||
preamp: -5.3,
|
preamp: -5.3,
|
||||||
gains: [4, 4, 2, -1, -4, -5, -3, -1, 2, 8],
|
gains: [4, 4, 2, -1, -4, -5, -3, -1, 2, 8],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
id: 13,
|
||||||
name: 'Techno',
|
name: 'Techno',
|
||||||
preamp: -7.7,
|
preamp: -7.7,
|
||||||
gains: [8, 5, -1, -5, -4, -1, 8, 9, 9, 8],
|
gains: [8, 5, -1, -5, -4, -1, 8, 9, 9, 8],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
||||||
|
getPresetById(id) {
|
||||||
|
return find(this.presets, { id });
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Get the current equalizer config.
|
* Get the current equalizer config.
|
||||||
*
|
*
|
||||||
|
@ -85,7 +105,7 @@ export const equalizerStore = {
|
||||||
}
|
}
|
||||||
|
|
||||||
// If the user chose a preset (instead of customizing one), just return it.
|
// If the user chose a preset (instead of customizing one), just return it.
|
||||||
return this.presets[preferenceStore.selectedPreset];
|
return this.getPresetById(preferenceStore.selectedPreset)
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
Loading…
Reference in a new issue