@mfcc64/ytms 11.0.2 → 12.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mfcc64/ytms",
-  "version": "11.0.2",
+  "version": "12.0.0",
   "description": "YouTube Musical Spectrum",
   "main": "script.mjs",
   "scripts": {

package/script.mjs

@@ -37,6 +37,9 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
         mic_pan:    { def:  0, min:-10, max: 10 },
         scale_x:    { def:100, min: 30, max:100 },
         scale_y:    { def:100, min: 30, max:100 },
+        base_note:  { def: 16, min: 16, max:100 },
+        semitones:  { def:120, min: 36, max:120 },
+        peak_color: { def:0xffffff, min:0, max:0xffffff },
         left_color: { def:0xdcb900, min:0, max:0xffffff },
         right_color:{ def:0x00b9dc, min:0, max:0xffffff },
         mid_color:  { def:0xdcdcdc, min:0, max:0xffffff },
@@ -116,7 +119,7 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
                 e("li", "If you want to change the axis, click it."),
                 e("li", "If you want to make your change persistent, click ", e("b", "Set as Default Settings"), " button."),
                 e("li", e("b", "New Features:"), " Hz-scale axis, microphone support, YT Music support, scale options to " +
-                    "reduce CPU usage, custom color."),
+                    "reduce CPU usage, custom color, custom range, peak color."),
                 e("li", e("a", {href: "https://github.com/mfcc64/youtube-musical-spectrum#settings"}, {target: "_blank"}, "Read more..."))
               ),
               e("p",
@@ -147,7 +150,7 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
         af_links.style.display = !af_links_timeout || (child_menu.visible?.checked ?? true) ? "block" : "none";
     }
 
-    const message_version = 8;
+    const message_version = 9;
     af_links.shadowRoot.getElementById("message").style.display = get_opt("message_version") == message_version ? "none" : "block";
     af_links.shadowRoot.getElementById("close_message").addEventListener("click", function() {
         set_opt("message_version", message_version);
@@ -351,10 +354,30 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
         create_child_range_menu("Scale Y", "scale_y", (child) => cqt.dataset.scaleY = child.value);
         create_child_select_codecs();
 
+        function update_range(child) {
+            if (!child_menu.base_note || !child_menu.semitones)
+                return;
+
+            const width = child_menu.semitones.value * 1;
+            const base = child_menu.base_note.value - 16;
+            if (base + width > 120) {
+                child == child_menu.semitones ?
+                    (child_menu.base_note.value = 120 - width + 16, child_menu.base_note.onchange()) :
+                    (child_menu.semitones.value = 120 - base, child_menu.semitones.onchange());
+                return;
+            }
+            cqt.style.left = -base / width * 100 + "%";
+            cqt.style.width = 12000 / width + "%";
+        }
+
+        create_child_range_menu("Base Note", "base_note", child => update_range(child));
+        create_child_range_menu("Semitones", "semitones", child => update_range(child));
+
         const number2color = n => "#" + (n|0).toString(16).padStart(6, "0");
         const color2number = c => Number.parseInt(c.slice(1), 16);
-        const color_int = [ 0, 0, 0 ];
+        const color_int = [ 0, 0, 0, 0 ];
         const color_table = new Array(9);
+        const peak_color = new Array(3);
 
         function create_child_color_menu(title, name, callback) {
             var tr = get_menu_table_tr();
@@ -386,6 +409,22 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
             child.onchange();
         }
 
+        create_child_color_menu("Peak Color", "peak_color", child => color_int[3] = color2number(child.value));
+
+        function detect_peak(color) {
+            if (color_int[3] == 0xffffff)
+                return;
+
+            for (let k = 4; k < color.length - 4; k += 4) {
+                if (color[k+3] <= color[k-1] || color[k+3] < color[k+7])
+                    continue;
+
+                const alpha = (1 - (k+2) / color.length) ** 2;
+                for (let m = 0; m < 3; m++)
+                    color[k+m] = Math.min(color[k+m], 1) * (1 - alpha + peak_color[m] * alpha);
+            }
+        }
+
         function update_color_table() {
             const k = 0xb9/0xdc;
             const color_tmp = new Array(9);
@@ -400,13 +439,17 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
                 color_table[0+x] = color_tmp[0+x] - k * color_table[3+x];
                 color_table[6+x] = color_tmp[6+x] - k * color_table[3+x];
             }
+
+            peak_color[0] = ((color_int[3] >> 16) & 0xff) / 0xff;
+            peak_color[1] = ((color_int[3] >> 8) & 0xff) / 0xff;
+            peak_color[2] = (color_int[3] & 0xff) / 0xff;
         }
 
         create_child_color_menu("Left Color", "left_color", child => color_int[0] = color2number(child.value));
         create_child_color_menu("Mid Color", "mid_color", child => color_int[1] = color2number(child.value));
         create_child_color_menu("Right Color", "right_color", child => color_int[2] = color2number(child.value));
 
-        cqt.actual_render_callback = function(color) {
+        function transform_color(color) {
             if (color_int[0] == 0xdcb900 && color_int[1] == 0xdcdcdc && color_int[2] == 0x00b9dc)
                 return;
 
@@ -418,6 +461,11 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
             }
         }
 
+        cqt.actual_render_callback = function(color) {
+            transform_color(color);
+            detect_peak(color);
+        }
+
         function create_child_select_codecs() {
             var tr = get_menu_table_tr();
             set_common_tr_style(tr);