koel/resources/assets/js/components/site-footer/equalizer.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>