mirror of
https://github.com/koel/koel
synced 2024-12-22 10:33:16 +00:00
350 lines
11 KiB
Vue
350 lines
11 KiB
Vue
<template>
|
|
<div id="equalizer">
|
|
<div class="presets">
|
|
<label class="select-wrapper" @change="loadPreset">
|
|
<select v-model="selectedPresetIndex">
|
|
<option value="-1">Preset</option>
|
|
<option v-for="preset in presets" :value="$index">{{* preset.name }}</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div class="bands">
|
|
<span class="band" v-for="band in bands">
|
|
<label>{{* band.label }}</label>
|
|
<input
|
|
type="range"
|
|
min="-20"
|
|
max="20"
|
|
step="0.01"
|
|
orient="vertical"
|
|
data-orientation="vertical"
|
|
:value="band.filter.gain.value">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import _ from 'lodash';
|
|
import $ from 'jquery';
|
|
import rangeslider from 'rangeslider.js';
|
|
|
|
import preferenceStore from '../../stores/preference';
|
|
import utils from '../../services/utils';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
bands: [],
|
|
selectedPresetIndex: -1,
|
|
|
|
presets: [
|
|
{
|
|
name: 'Default',
|
|
gains: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
},
|
|
{
|
|
name: 'Classical',
|
|
gains: [-1, -1, -1, -1, -1, -1, -7, -7, -7, -9],
|
|
},
|
|
{
|
|
name: 'Club',
|
|
gains: [-1, -1, 8, 5, 5, 5, 3, -1, -1, -1],
|
|
},
|
|
{
|
|
name: 'Dance',
|
|
gains: [9, 7, 2, -1, -1, -5, -7, -7, -1, -1],
|
|
},
|
|
{
|
|
name: 'Full Bass',
|
|
gains: [-8, 9, 9, 5, 1, -4, -8, -10, -11, -11]
|
|
},
|
|
{
|
|
name: 'Full Treble',
|
|
gains: [-9, -9, -9, -4, 2, 11, 16, 16, 16, 16]
|
|
},
|
|
{
|
|
name: 'Headphone',
|
|
gains: [4, 11, 5, -3, -2, 1, 4, 9, 12, 14]
|
|
},
|
|
{
|
|
name: 'Large Hall',
|
|
gains: [10, 10, 5, 5, -1, -4, -4, -4, -1, -1],
|
|
},
|
|
{
|
|
name: 'Live',
|
|
gains: [-4, -1, 4, 5, 5, 5, 4, 2, 2, 2],
|
|
},
|
|
{
|
|
name: 'Pop',
|
|
gains: [-1, 4, 7, 8, 5, -1, -2, -2, -1, -1],
|
|
},
|
|
{
|
|
name: 'Reggae',
|
|
gains: [-1, -1, -1, -5, -1, 6, 6, -1, -1, -1],
|
|
},
|
|
{
|
|
name: 'Rock',
|
|
gains: [8, 4, -5, -8, -3, 4, 8, 11, 11, 11],
|
|
},
|
|
{
|
|
name: 'Soft Rock',
|
|
gains: [4, 4, 2, -1, -4, -5, -3, -1, 2, 8],
|
|
},
|
|
{
|
|
name: 'Techno',
|
|
gains: [8, 5, -1, -5, -4, -1, 8, 9, 9, 8],
|
|
},
|
|
],
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
/**
|
|
* Init the equalizer.
|
|
*
|
|
* @param {Element} player The audio player's DOM.
|
|
*/
|
|
init(player) {
|
|
var AudioContext = window.AudioContext || window.webkitAudioContext || false;
|
|
var context = new AudioContext();
|
|
|
|
var gainNode = context.createGain();
|
|
gainNode.gain.value = 1;
|
|
|
|
var source = context.createMediaElementSource(player);
|
|
source.connect(gainNode);
|
|
|
|
var prevFilter = null;
|
|
|
|
var savedGains = preferenceStore.get('equalizerGains');
|
|
|
|
// Create 10 bands with the frequencies similar to those of Winamp and connect them together.
|
|
[60, 170, 310, 600, 1000, 3000, 6000, 12000, 14000, 16000].forEach((f, i) => {
|
|
var filter = context.createBiquadFilter();
|
|
|
|
filter.type = 'peaking';
|
|
filter.gain.value = savedGains[i];
|
|
filter.Q.value = 1;
|
|
filter.frequency.value = f;
|
|
|
|
if (!prevFilter) {
|
|
gainNode.connect(filter);
|
|
} else {
|
|
prevFilter.connect(filter);
|
|
}
|
|
|
|
prevFilter = filter;
|
|
|
|
this.bands.push({
|
|
filter,
|
|
label: (f + '').replace('000', 'K'),
|
|
});
|
|
});
|
|
|
|
prevFilter.connect(context.destination);
|
|
|
|
Vue.nextTick(() => {
|
|
$('#equalizer input[type="range"]').each((i, el) => {
|
|
$(el).rangeslider({
|
|
// Force the polyfill and its styles on all browsers
|
|
polyfill: false,
|
|
|
|
onSlide: (position, value) => {
|
|
this.changeGain(this.bands[i].filter, value);
|
|
},
|
|
|
|
onSlideEnd: () => {
|
|
this.selectedPresetIndex = -1;
|
|
this.save();
|
|
}
|
|
});
|
|
});
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Change the gain value for a band/filter.
|
|
*
|
|
* @param {Object} filter The filter object
|
|
* @param {Object} value
|
|
*/
|
|
changeGain(filter, value) {
|
|
filter.gain.value = value;
|
|
},
|
|
|
|
/**
|
|
* Load a preset when the user select it from the dropdown.
|
|
*/
|
|
loadPreset() {
|
|
if (this.selectedPresetIndex === -1) {
|
|
return;
|
|
}
|
|
|
|
var preset = this.presets[this.selectedPresetIndex];
|
|
|
|
$('#equalizer input[type=range]').each((i, input) => {
|
|
this.bands[i].filter.gain.value = preset.gains[i];
|
|
input.value = preset.gains[i];
|
|
});
|
|
|
|
$('#equalizer input[type="range"]').rangeslider('update', true);
|
|
|
|
this.save();
|
|
},
|
|
|
|
/**
|
|
* Save the current user's equalizer preferences into local storage.
|
|
*/
|
|
save() {
|
|
preferenceStore.set('equalizerGains', _.pluck(this.bands, 'filter.gain.value'));
|
|
},
|
|
},
|
|
|
|
events: {
|
|
'equalizer:init': function (player) {
|
|
if (utils.isAudioContextSupported()) {
|
|
this.init(player);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass">
|
|
@import "resources/assets/sass/partials/_vars.scss";
|
|
@import "resources/assets/sass/partials/_mixins.scss";
|
|
|
|
#equalizer {
|
|
position: absolute;
|
|
bottom: $footerHeight;
|
|
width: 100%;
|
|
background: rgba(0, 0, 0, 0.9);
|
|
display: flex;
|
|
flex-direction: column;
|
|
left: 0;
|
|
|
|
.presets {
|
|
padding: 8px 16px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
flex: 1;
|
|
align-content: center;
|
|
z-index: 1;
|
|
border-bottom: 1px solid rgba(255, 255, 255, .1);
|
|
|
|
.select-wrapper {
|
|
position: relative;
|
|
margin-bottom: 0;
|
|
|
|
&::after {
|
|
content: '\f107';
|
|
font-family: FontAwesome;
|
|
color: $colorHighlight;
|
|
display: inline-block;
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 3px;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
select {
|
|
background: none;
|
|
color: $colorMainText;
|
|
padding-left: 0;
|
|
width: 100px;
|
|
text-transform: none;
|
|
}
|
|
}
|
|
|
|
.bands {
|
|
padding: 16px;
|
|
display: flex;
|
|
left: 0;
|
|
justify-content: space-between;
|
|
font-size: 70%;
|
|
align-items: center;
|
|
z-index: 1;
|
|
|
|
.band {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* The range slider styles
|
|
*/
|
|
.rangeslider {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
|
|
&--vertical {
|
|
min-height: 100px;
|
|
|
|
&::before {
|
|
content: " ";
|
|
position: absolute;
|
|
left: 9px;
|
|
width: 2px;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
z-index: 1;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.rangeslider__fill {
|
|
width: 2px;
|
|
background: #fff;
|
|
position: absolute;
|
|
left: 9px;
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.rangeslider__handle {
|
|
left: 0;
|
|
background: #fff;
|
|
border: 0;
|
|
height: 2px;
|
|
width: 100%;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
|
|
&::after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-device-width : 768px) {
|
|
position: fixed;
|
|
max-width: 414px;
|
|
left: auto;
|
|
right: 0;
|
|
bottom: $footerHeight + 5px;
|
|
display: block;
|
|
height: auto;
|
|
|
|
.presets {
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
display: block;
|
|
height: 48px;
|
|
flex: none;
|
|
padding: 6px 0 0;
|
|
margin: 0 0;
|
|
overflow-y: hidden;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
label {
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|