'+_translate('mic_gain_desc')+'
'); controlPanel.append(secondColumn); if (isYoutubeDarkTheme) { controlPanel.insertBefore(youtubeDarkThemeUiAttachTo); } else { controlPanel.insertAfter(UiAttachTo); } highPassAdjustDisplay = $('#KaraokeHighPassValue'); lowPassAdjustDisplay = $('#KaraokeLowPassValue'); return controlPanel }, setKaraokeButtonOn: function() { karaokeButton.attr('title', _translate('on')); }, setKaraokeButtonOff: function() { karaokeButton.attr('title',_translate('off')); }, getChannelAdjustControl: function() { return channelAdjustControl }, getHighPassAdjustControl: function() { return highPassAdjustControl }, getLowPassAdjustControl: function() { return lowPassAdjustControl }, getHighPassAdjustDisplay: function() { return highPassAdjustDisplay; }, getLowPassAdjustDisplay: function() { return lowPassAdjustDisplay; } } }(jQuery) let KaraokePlugin = function ($, KaraokeUI) { const MAX_CACHE_SIZE = 5000; const MAX_RETRIES = 20; const TIME_INTERVAL = 1500; //webaudio elements let audioContext, audioSource,micAudioContext, micSource; let karaokeFilterOn = false; let channelAdjustedValue = 1, gainAdjustedValue = 1; let highPassAdjustedValue = 200, lowPassAdjustedValue = 6000 let trackSearchDialog = null; let _createBiquadFilter = function(type,freq,qValue) { let filter = audioContext.createBiquadFilter(); filter.type = type; filter.frequency.value = freq; filter.Q.value = qValue; return filter; } /** * Cut common vocal frequencies @ center * Algo origin: https://github.com/stanton119/YouTube-Karaoke */ let _cutCenterV1 = function() { //cutoff frequencies let f1 = highPassAdjustedValue; let f2 = lowPassAdjustedValue; console.log('setting center cut v1 @'+f1+' - '+f2); //splitter and gains let splitter, gainL, gainR; //biquadFilters let filterLP1, filterHP1, filterLP2, filterHP2; let filterLP3, filterHP3, filterLP4, filterHP4; //phase inversion filter splitter = audioContext.createChannelSplitter(2); gainL = audioContext.createGain(); gainR = audioContext.createGain(); gainL.gain.value = 1; gainR.gain.value = -1; splitter.connect(gainL, 0); splitter.connect(gainR, 1); gainL.connect(audioContext.destination); gainR.connect(audioContext.destination); //biquad filters filterLP1 = _createBiquadFilter("lowpass",f2,1); filterLP2 = _createBiquadFilter("lowpass",f1,1); filterLP3 = _createBiquadFilter("lowpass",f2,1); filterLP4 = _createBiquadFilter("lowpass",f1,1); filterHP1 = _createBiquadFilter("highpass",f1,1); filterHP2 = _createBiquadFilter("highpass",f2,1); filterHP3 = _createBiquadFilter("highpass",f1,1); filterHP4 = _createBiquadFilter("highpass",f2,1); //connect filters audioSource.connect(filterLP1); audioSource.connect(filterLP2); audioSource.connect(filterHP2); filterLP1.connect(filterLP3); filterLP3.connect(filterHP1); filterHP1.connect(filterHP3); filterHP3.connect(splitter); filterLP2.connect(filterLP4); filterLP4.connect(audioContext.destination); filterHP2.connect(filterHP4); filterHP4.connect(audioContext.destination); } /** * Cut common vocal frequencies @ center with preserve stereo field * Algo origin: https://github.com/stanton119/YouTube-Karaoke */ let _cutCenterV2 = function() { //cutoff frequencies let f1 = highPassAdjustedValue; let f2 = lowPassAdjustedValue; console.log('setting center cut with stereo field @'+f1+' - '+f2); // stereo conversion let merger = audioContext.createChannelMerger(2); merger.connect(audioContext.destination); // L_Out = (Mid+side)/2 let gainNodeMS1_05 = audioContext.createGain(); gainNodeMS1_05.gain.value = 0.5; gainNodeMS1_05.connect(merger,0,0); // R_Out = (Mid-side)/2 let gainNodeMS2_05 = audioContext.createGain(); gainNodeMS2_05.gain.value = 0.5; gainNodeMS2_05.connect(merger,0,1); let gainNodeS_1 = audioContext.createGain(); gainNodeS_1.gain.value = -1; gainNodeS_1.connect(gainNodeMS2_05); // create band stop filter using two cascaded biquads // inputs -> FilterLP1 & FilterLP2 // outputs -> splitter & destinations // Bandstop filter = LP + HP let FilterLP1 = _createBiquadFilter('lowpass', f1, 1); let FilterLP2 = _createBiquadFilter('lowpass', f1, 1); FilterLP1.connect(FilterLP2); let FilterHP1 = _createBiquadFilter('highpass', f2, 1); let FilterHP2 = _createBiquadFilter('highpass', f2, 1); FilterHP1.connect(FilterHP2); // connect filters to left and right outputs FilterLP2.connect(gainNodeMS1_05); FilterHP2.connect(gainNodeMS1_05); FilterLP2.connect(gainNodeMS2_05); FilterHP2.connect(gainNodeMS2_05); // band pass with gain, adds mids into the side channel let gainNodeBP = audioContext.createGain(); gainNodeBP.gain.value = 1; let FilterBP1 = _createBiquadFilter('lowpass', f2, 1); let FilterBP2 = _createBiquadFilter('lowpass', f2, 1); FilterBP2.connect(FilterBP1); let FilterBP3 = _createBiquadFilter('highpass', f1, 1); FilterBP3.connect(FilterBP2); let FilterBP4 = _createBiquadFilter('highpass', f1, 1); FilterBP4.connect(FilterBP3); FilterBP1.connect(gainNodeBP); gainNodeBP.connect(gainNodeS_1); gainNodeBP.connect(gainNodeMS1_05); // mid-side conversion // split into L/R let splitter = audioContext.createChannelSplitter(2); // mid = L+R splitter.connect(FilterLP1,0); // // L->filter splitter.connect(FilterHP1,0); splitter.connect(FilterLP1,1); // R->filter splitter.connect(FilterHP1,1); // side = L-R, 2 outputs, 2 destinations let gainNodeR_1 = audioContext.createGain(); gainNodeR_1.gain.value = -1; splitter.connect(gainNodeR_1,1); gainNodeR_1.connect(gainNodeS_1); splitter.connect(gainNodeS_1,0); gainNodeR_1.connect(gainNodeMS1_05); splitter.connect(gainNodeMS1_05,0); gainNodeR_1.connect(FilterBP4); splitter.connect(FilterBP4,0); audioSource.connect(splitter); } /** * Expand left channel to both channel, drop right channel */ let _cutRight = function() { console.log('setting right cut'); let splitter, merger; splitter = audioContext.createChannelSplitter(2); merger = audioContext.createChannelMerger(1); splitter.connect(merger, 0); audioSource.connect(splitter); merger.connect(audioContext.destination); } /** * Expand right channel to both channel, drop left channel */ let _cutLeft = function() { console.log('setting left cut'); let splitter,merger; splitter = audioContext.createChannelSplitter(2); merger = audioContext.createChannelMerger(1); splitter.connect(merger, 1); audioSource.connect(splitter); merger.connect(audioContext.destination); } /** * Handle Microphone gain. This only applicable to mic that connected to browser. * @param amount * @private */ let _micGain = function(amount) { let gainElement = $('#KaraokeGainValue') gainElement.html(amount); console.log(gainElement.html()); micSource.disconnect(); let micGain = micAudioContext.createGain(); micSource.connect( micGain ); micGain.connect( micAudioContext.destination ); micGain.gain.value = amount; micSource.connect( micAudioContext.destination ); } /** * 0 = left cut, 1 = center cut v2, 2 = center cut v1, 2 = right cut **/ let _adjustChannel = function() { console.log('channelAdjust:'+channelAdjustedValue); _disconnectProcessors(); switch(channelAdjustedValue) { case 0: _cutLeft(); break; case 1: _cutCenterV2(); break; case 2: _cutCenterV1(); break; case 3: _cutRight(); break; } _saveSetting(); } let _disconnectProcessors = function() { console.log('disconnect audio processors'); audioSource.disconnect(); } let _getSongId = function() { return getSongId(); } let _loadSetting = function() { let songId = _getSongId(); if(typeof songId === undefined || songId === null) { return; } let localSetting = localStorage.getItem(songId); let savedItem = null; if(localSetting !== null) { savedItem = JSON.parse(localSetting); } console.log("Loading "+songId, savedItem); if(savedItem !== null) { touchLocalStorage(songId, savedItem); } } let touchLocalStorage = function(songId, savedItem) { channelAdjustedValue = savedItem.cv; lowPassAdjustedValue = savedItem.lpv; highPassAdjustedValue = savedItem.hpv; savedItem.date = Date.now(); localStorage.setItem(songId, JSON.stringify(savedItem)); } let _readjustControls = function() { KaraokeUI.getChannelAdjustControl().val(channelAdjustedValue); KaraokeUI.getHighPassAdjustControl().val(highPassAdjustedValue); KaraokeUI.getLowPassAdjustControl().val(lowPassAdjustedValue); KaraokeUI.getHighPassAdjustDisplay().html(highPassAdjustedValue.toString()) KaraokeUI.getLowPassAdjustDisplay().html(lowPassAdjustedValue.toString()) } let _saveSetting = function() { let songId = _getSongId(); if(songId === null) { return; } let data = { cv: channelAdjustedValue, lpv: lowPassAdjustedValue, hpv: highPassAdjustedValue, date: Date.now() } console.log('Saving Setting: '+songId, data) localStorage.setItem(songId, JSON.stringify(data)); _trimCache(); } let _trimCache = function() { if(localStorage.length > MAX_CACHE_SIZE) { let sortableArray = []; for (let i = 0; i < localStorage.length; i++) { let jsonItem = localStorage.getItem(localStorage.key(i)); let item = JSON.parse(jsonItem); if(typeof item.cv !== undefined) { sortableArray[localStorage.key(i)] = { key: localStorage.key(i), data: JSON.parse(localStorage.getItem(localStorage.key(i))) }; } } sortableArray.sort((a, b) => (a.data.date > b.data.date) ? 1 : -1); for (let i = 0; i < MAX_CACHE_SIZE/5; i++) { localStorage.removeItem(sortableArray[i].key); } } } let _connectAudio = function(element) { //setup audio routing try { window.AudioContext = window.AudioContext || window.webkitAudioContext; audioContext = new AudioContext(); audioSource = audioContext.createMediaElementSource(element); audioSource.connect(audioContext.destination); } catch (e) { console.error('Media element not found.'); console.error(e.message); } } let _getVideoElement = function(mediaElement) { let element = $(mediaElement) if (typeof $(mediaElement)[0] !== 'undefined') { element = $(mediaElement)[0] } return element; } return { setupAudioSource : function () { if(typeof _getVideoElement(mediaElement).tagName === 'undefined') { console.log('audio connecting via interval'); var retries = 0; var intervalId = setInterval(function() { console.log('audio connect retry: '+retries); if(retries > 10) { clearInterval(intervalId); return this; } console.log(_getVideoElement(mediaElement)); if(_getVideoElement(mediaElement).tagName === 'VIDEO') { console.log('audio connected'); _connectAudio(_getVideoElement(mediaElement)); clearInterval(intervalId); return this; } retries++; }, TIME_INTERVAL); } else { console.log('audio connected immediately'); _connectAudio(_getVideoElement(mediaElement)); } return this; }, setupMic: function() { navigator.mediaDevices.getUserMedia({ audio: true }) .then(function(stream) { /* use the stream */ window.AudioContext = window.AudioContext || window.webkitAudioContext; micAudioContext = new AudioContext(); console.log('Mic Latency:'+micAudioContext.baseLatency); // Create an AudioNode from the stream. micSource = micAudioContext.createMediaStreamSource( stream ); // Connect it to the destination to hear yourself (or any other node for processing!) micSource.connect( micAudioContext.destination ); }) .catch(function(err) { /* handle the error */ }); return this; }, setupMenu: function() { if($(targetContainer).length === 0) { console.log('menu connecting via interval'); var retries = 0; var intervalId = setInterval(function() { console.log('menu retry: '+retries); if(retries > 10) { clearInterval(intervalId); return this; } if($(targetContainer).length > 0) { console.log('audio connected'); KaraokeUI.menuUI(); clearInterval(intervalId); return this; } retries++; }, TIME_INTERVAL); } else { console.log('menu connected immediately'); KaraokeUI.menuUI(); } }, filterOn: function() { console.log("Removing vocals"); _adjustChannel(); return this; }, filterOff: function() { console.log("Adding in vocals"); _disconnectProcessors(); audioSource.connect(audioContext.destination); return this; }, switch: function() { if(karaokeFilterOn) { karaokeFilterOn = false; this.filterOff(); KaraokeUI.setKaraokeButtonOff(); this.removeControlPanel(); } else { karaokeFilterOn = true; this.filterOn(); KaraokeUI.setKaraokeButtonOn(); this.showControlPanel(); } return this; }, showControlPanel: function() { console.log('showpanel'); this.controlPanel = KaraokeUI.controlPanelUI(channelAdjustedValue, highPassAdjustedValue, lowPassAdjustedValue, gainAdjustedValue); _loadSetting(); return this; }, removeControlPanel: function() { console.log('hidepanel'); this.controlPanel.remove(); return this; }, isFilterOn: function() { return karaokeFilterOn; }, micGainAdjust: function(element) { gainAdjustedValue = $(element).val(); _micGain(gainAdjustedValue); return this; }, channelAdjust: function(element) { channelAdjustedValue = parseInt($(element).val()); _adjustChannel(); return this; }, highPassAdjust: function(element) { highPassAdjustedValue = parseInt($(element).val()); KaraokeUI.getHighPassAdjustDisplay().html(highPassAdjustedValue.toString()); _adjustChannel() return this; }, lowPassAdjust: function(element) { lowPassAdjustedValue = parseInt($(element).val()); KaraokeUI.getLowPassAdjustDisplay().html(lowPassAdjustedValue.toString()); _adjustChannel() return this; }, loadSetting: function() { _loadSetting(); } }; }(jQuery, KaraokeUI); if (typeof audioContext === 'undefined') { console.log(mediaElement); console.log(targetContainer); console.log(UiAttachTo); console.log("Loading setting"); KaraokePlugin.loadSetting(); console.log("setting up mic"); KaraokePlugin.setupMic(); console.log("setting up audio source"); KaraokePlugin.setupAudioSource(mediaElement); console.log("setting up menu"); KaraokePlugin.setupMenu(targetContainer); unsafeWindow.KaraokePluginSwitch = function() { KaraokePlugin.switch(); } unsafeWindow.KaraokePluginMicGainAdjust = function(element) { KaraokePlugin.micGainAdjust(element); } unsafeWindow.KaraokePluginChannelAdjust = function(element) { KaraokePlugin.channelAdjust(element); } unsafeWindow.KaraokePluginHighPassAdjust = function(element) { KaraokePlugin.highPassAdjust(element); } unsafeWindow.KaraokePluginLowPassAdjust = function(element) { KaraokePlugin.lowPassAdjust(element); } } window.addEventListener("popstate", (event) => { console.log('Event: popstate, reload setting'); KaraokePlugin.loadSetting(); if(KaraokePlugin.isFilterOn()) { KaraokePlugin.switch(); KaraokePlugin.switch(); } }); if (window.onurlchange === null) { console.log('Url Change Event. Setup'); window.addEventListener('urlchange', (info) => { console.log('Url Changed, reload setting.'); if (window.location.href.includes(urlChangePattern)) { KaraokePlugin.loadSetting(); if(KaraokePlugin.isFilterOn()) { KaraokePlugin.switch(); KaraokePlugin.switch(); } } }); } })(jQuery, md5);