Skip to content

Commit ae7741c

Browse files
hykilpikonnahykilpikonna
authored
Merge pull request #7 from youquzhiji/experiment
Merge
2 parents 18abbf9 + c4c87d6 commit ae7741c

17 files changed

+641
-58
lines changed

‎index.html

+6
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@
55
<link rel="icon" href="/favicon.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Vite App</title>
8+
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
9+
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
10+
crossorigin="anonymous"></script>
11+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"
12+
integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA=="
13+
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
814
</head>
915
<body style="margin: 0; height: 100%">
1016
<div id="app"></div>

‎package.json

+7-1
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,29 @@
99
"dependencies": {
1010
"@fortawesome/fontawesome-free": "^6.0.0",
1111
"@tensorflow/tfjs": "^3.13.0",
12+
"chart.js": "^3.4.0",
13+
"chartjs-plugin-annotation": "^1.4.0",
1214
"chroma-js": "^2.4.2",
1315
"element-plus": "^1.3.0-beta.10",
1416
"meyda": "^5.3.0",
1517
"plotly.js-dist-min": "^2.9.0",
1618
"vue": "^3.2.25",
17-
"vue-class-component": "^8.0.0-rc.1",
19+
"vue-chart-3": "^3.1.8",
1820
"vue-router": "4"
1921
},
2022
"devDependencies": {
2123
"@types/chroma-js": "^2.1.3",
24+
"@types/jquery": "^3.5.14",
25+
"@types/jqueryui": "^1.12.16",
2226
"@types/meyda": "^4.3.2",
2327
"@types/node": "^17.0.15",
2428
"@types/plotly.js-dist-min": "^2.3.0",
2529
"@vitejs/plugin-vue": "^2.0.0",
2630
"sass": "^1.49.7",
2731
"typescript": "^4.4.4",
2832
"vite": "^2.7.2",
33+
"vue-class-component": "^8.0.0-rc.1",
34+
"vue-property-decorator": "^10.0.0-rc.3",
2935
"vue-tsc": "^0.29.8"
3036
}
3137
}

‎src/App.vue

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div id="nav" class="fbox-h fcenter unselectable" @dragstart="e => e.preventDefault()">
2+
<div id="nav" class="fbox-h fcenter unselectable anim" @dragstart="e => e.preventDefault()">
33
<router-link class="rlink" to="/">
44
<i class="fa-solid fa-house"></i>
55
<span>Home</span>
@@ -32,6 +32,7 @@ import {Back} from "@element-plus/icons-vue";
3232
-moz-osx-font-smoothing: grayscale
3333
text-align: center
3434
color: #2c3e50
35+
background: #6a6464
3536
3637
display: flex
3738
flex-direction: column

‎src/css/colors.sass

+5
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,8 @@ $color-text-special: #ff8373
66
$color-bg-6: #ffeedb
77
$color-bg-5: #fff4eb
88
$color-bg-4: #fffcf9
9+
10+
$color-trans-blue: #81daff
11+
$color-trans-pink: #ffbec8
12+
$color-bg: #6a6464
13+
$color-fg: #ffe3be

‎src/css/global.sass

+7-2
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ $c-highlight: #ff7878
3939
display: flex
4040
flex-flow: column
4141
height: 100%
42+
min-height: 0
4243

4344
.mh0
4445
min-height: 0
@@ -61,6 +62,7 @@ $c-highlight: #ff7878
6162

6263
.f-grow1
6364
flex-grow: 1
65+
min-height: 0
6466

6567
.f-no-shrink
6668
flex-shrink: 0
@@ -126,6 +128,9 @@ $c-highlight: #ff7878
126128
box-shadow: 0 10px 10px -5px $color-text-light
127129
cursor: pointer
128130

129-
*
130-
transition: all .25s ease
131+
.anim
132+
*
133+
transition: all .25s ease
131134

135+
.shadow
136+
box-shadow: 0 2px 12px -2px rgb(0 0 0 / 25%)

‎src/data/vox1_kde_curves.json

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"pitch": {"f": [[116.6, 120.1, 123.6, 127.1, 130.6, 134.1, 137.6, 141.1, 144.6, 148.1, 151.6, 155.1, 158.6, 162.1, 165.6, 169.0, 172.5, 176.0, 179.5, 183.0, 186.5, 190.0, 193.5, 197.0, 200.5, 204.0, 207.5, 211.0, 214.5, 218.0, 221.5, 225.0, 228.5, 232.0, 235.5, 239.0, 242.5, 246.0, 249.5, 253.0, 256.5, 259.9, 263.4, 266.9, 270.4, 273.9, 277.4, 280.9, 284.4, 287.9], [0.0002385, 0.0002812, 0.0003063, 0.000327, 0.0003396, 0.0003417, 0.000371, 0.0005076, 0.0008299, 0.001372, 0.002127, 0.00308, 0.0042, 0.005453, 0.006871, 0.008576, 0.01063, 0.01284, 0.01485, 0.01638, 0.0173, 0.01756, 0.0171, 0.01605, 0.0148, 0.01377, 0.01306, 0.01248, 0.01178, 0.01087, 0.009828, 0.00873, 0.007576, 0.006316, 0.004969, 0.00368, 0.002619, 0.001861, 0.001352, 0.0009912, 0.0007084, 0.0004902, 0.0003512, 0.0002875, 0.0002574, 0.0002182, 0.0001684, 0.0001341, 0.0001244, 0.0001193]], "m": [[95.1, 98.82, 102.5, 106.3, 110.0, 113.7, 117.4, 121.1, 124.8, 128.6, 132.3, 136.0, 139.7, 143.4, 147.1, 150.9, 154.6, 158.3, 162.0, 165.7, 169.4, 173.2, 176.9, 180.6, 184.3, 188.0, 191.7, 195.5, 199.2, 202.9, 206.6, 210.3, 214.0, 217.8, 221.5, 225.2, 228.9, 232.6, 236.3, 240.1, 243.8, 247.5, 251.2, 254.9, 258.6, 262.4, 266.1, 269.8, 273.5, 277.2], [0.0009089, 0.002198, 0.004632, 0.008472, 0.01326, 0.01794, 0.02162, 0.02392, 0.02482, 0.02428, 0.02234, 0.01978, 0.01723, 0.01449, 0.01142, 0.008576, 0.006679, 0.005712, 0.004895, 0.003772, 0.002607, 0.001833, 0.001476, 0.001282, 0.001106, 0.0009028, 0.0006593, 0.0004488, 0.0003218, 0.000246, 0.0001913, 0.000133, 6.664e-05, 2.085e-05, 3.85e-06, 4.121e-07, 2.542e-08, 9.02e-10, 1.84e-11, 2.158e-13, 2.324e-14, 2.414e-12, 1.537e-10, 5.625e-09, 1.183e-07, 1.43e-06, 9.937e-06, 3.968e-05, 9.106e-05, 0.0001201]]}, "f1": {"f": [[507.9, 512.5, 517.1, 521.7, 526.3, 530.8, 535.4, 540.0, 544.6, 549.2, 553.8, 558.4, 563.0, 567.5, 572.1, 576.7, 581.3, 585.9, 590.5, 595.1, 599.7, 604.2, 608.8, 613.4, 618.0, 622.6, 627.2, 631.8, 636.4, 640.9, 645.5, 650.1, 654.7, 659.3, 663.9, 668.5, 673.1, 677.6, 682.2, 686.8, 691.4, 696.0, 700.6, 705.2, 709.7, 714.3, 718.9, 723.5, 728.1, 732.7], [0.0004256, 0.0005718, 0.0007402, 0.0009474, 0.001216, 0.001567, 0.002008, 0.002535, 0.003125, 0.003746, 0.004359, 0.004929, 0.00544, 0.005896, 0.006315, 0.006728, 0.00717, 0.007659, 0.008172, 0.008648, 0.009015, 0.009232, 0.009305, 0.009265, 0.009134, 0.008902, 0.008546, 0.008058, 0.007465, 0.006829, 0.006219, 0.005681, 0.005223, 0.004815, 0.004417, 0.003993, 0.003531, 0.003045, 0.002567, 0.00213, 0.001752, 0.001433, 0.001161, 0.0009206, 0.0007048, 0.0005189, 0.0003724, 0.0002681, 0.0001979, 0.0001481]], "m": [[444.8, 453.5, 462.2, 470.9, 479.7, 488.4, 497.1, 505.8, 514.5, 523.2, 531.9, 540.6, 549.4, 558.1, 566.8, 575.5, 584.2, 592.9, 601.6, 610.4, 619.1, 627.8, 636.5, 645.2, 653.9, 662.6, 671.3, 680.1, 688.8, 697.5, 706.2, 714.9, 723.6, 732.3, 741.1, 749.8, 758.5, 767.2, 775.9, 784.6, 793.3, 802.0, 810.8, 819.5, 828.2, 836.9, 845.6, 854.3, 863.0, 871.7], [0.0001434, 0.0002958, 0.0005961, 0.001162, 0.002001, 0.00295, 0.003955, 0.005155, 0.006556, 0.007942, 0.009073, 0.009743, 0.009801, 0.009316, 0.008519, 0.007539, 0.006422, 0.005258, 0.00419, 0.003317, 0.002627, 0.002064, 0.00156, 0.001127, 0.0008295, 0.0006194, 0.0004331, 0.0002928, 0.0002192, 0.000192, 0.0001708, 0.0001321, 8.308e-05, 4.569e-05, 3.726e-05, 4.765e-05, 4.765e-05, 2.943e-05, 1.087e-05, 2.391e-06, 3.13e-07, 2.44e-08, 1.282e-09, 4.4e-09, 7.575e-08, 7.819e-07, 4.804e-06, 1.757e-05, 3.826e-05, 4.959e-05]]}, "f2": {"f": [[1557.0, 1564.0, 1571.0, 1579.0, 1586.0, 1593.0, 1600.0, 1607.0, 1615.0, 1622.0, 1629.0, 1636.0, 1643.0, 1651.0, 1658.0, 1665.0, 1672.0, 1680.0, 1687.0, 1694.0, 1701.0, 1708.0, 1716.0, 1723.0, 1730.0, 1737.0, 1744.0, 1752.0, 1759.0, 1766.0, 1773.0, 1780.0, 1788.0, 1795.0, 1802.0, 1809.0, 1816.0, 1824.0, 1831.0, 1838.0, 1845.0, 1852.0, 1860.0, 1867.0, 1874.0, 1881.0, 1888.0, 1896.0, 1903.0, 1910.0], [0.000112, 0.0001628, 0.0002248, 0.0002953, 0.0003726, 0.0004588, 0.0005596, 0.0006797, 0.0008193, 0.0009787, 0.001167, 0.001403, 0.001699, 0.002047, 0.002417, 0.002782, 0.003139, 0.003507, 0.003912, 0.004366, 0.004853, 0.005333, 0.005749, 0.006055, 0.006237, 0.006313, 0.006317, 0.006267, 0.006162, 0.005994, 0.005773, 0.005517, 0.005227, 0.004879, 0.004454, 0.003964, 0.003456, 0.002978, 0.002549, 0.002157, 0.001784, 0.001427, 0.001101, 0.000822, 0.0005989, 0.0004302, 0.0003103, 0.0002307, 0.0001787, 0.00014]], "m": [[1375.0, 1385.0, 1395.0, 1406.0, 1416.0, 1426.0, 1436.0, 1447.0, 1457.0, 1467.0, 1477.0, 1488.0, 1498.0, 1508.0, 1518.0, 1528.0, 1539.0, 1549.0, 1559.0, 1569.0, 1580.0, 1590.0, 1600.0, 1610.0, 1621.0, 1631.0, 1641.0, 1651.0, 1661.0, 1672.0, 1682.0, 1692.0, 1702.0, 1713.0, 1723.0, 1733.0, 1743.0, 1754.0, 1764.0, 1774.0, 1784.0, 1794.0, 1805.0, 1815.0, 1825.0, 1835.0, 1846.0, 1856.0, 1866.0, 1876.0], [3.594e-05, 3.701e-05, 3.639e-05, 3.709e-05, 3.548e-05, 2.8e-05, 1.857e-05, 1.729e-05, 3.735e-05, 9.441e-05, 0.0002018, 0.0003662, 0.0005947, 0.0009019, 0.001293, 0.001741, 0.002186, 0.002597, 0.003007, 0.003467, 0.003989, 0.004543, 0.005089, 0.005565, 0.005906, 0.006082, 0.006112, 0.005998, 0.005706, 0.005239, 0.004674, 0.004098, 0.003536, 0.002955, 0.002346, 0.001782, 0.001363, 0.001114, 0.0009581, 0.0008206, 0.0006859, 0.0005639, 0.000453, 0.0003502, 0.0002598, 0.0001871, 0.0001376, 0.000113, 0.000103, 8.977e-05]]}, "f3": {"f": [[2553.0, 2562.0, 2572.0, 2581.0, 2591.0, 2600.0, 2609.0, 2619.0, 2628.0, 2638.0, 2647.0, 2656.0, 2666.0, 2675.0, 2685.0, 2694.0, 2703.0, 2713.0, 2722.0, 2732.0, 2741.0, 2750.0, 2760.0, 2769.0, 2779.0, 2788.0, 2797.0, 2807.0, 2816.0, 2826.0, 2835.0, 2844.0, 2854.0, 2863.0, 2873.0, 2882.0, 2891.0, 2901.0, 2910.0, 2920.0, 2929.0, 2938.0, 2948.0, 2957.0, 2967.0, 2976.0, 2985.0, 2995.0, 3004.0, 3014.0], [0.0001256, 0.0001721, 0.0002277, 0.0002936, 0.0003704, 0.000463, 0.0005834, 0.0007469, 0.0009616, 0.001221, 0.001506, 0.001803, 0.002117, 0.002465, 0.002852, 0.003261, 0.003655, 0.004006, 0.004317, 0.004606, 0.004877, 0.005104, 0.005242, 0.005258, 0.005155, 0.004967, 0.004726, 0.004448, 0.004134, 0.003784, 0.003407, 0.003015, 0.002624, 0.002252, 0.00192, 0.001642, 0.001416, 0.001229, 0.001067, 0.0009185, 0.0007744, 0.000632, 0.0004959, 0.0003755, 0.0002781, 0.0002046, 0.0001502, 0.00011, 8.06e-05, 5.873e-05]], "m": [[2392.0, 2405.0, 2417.0, 2429.0, 2442.0, 2454.0, 2467.0, 2479.0, 2492.0, 2504.0, 2517.0, 2529.0, 2542.0, 2554.0, 2566.0, 2579.0, 2591.0, 2604.0, 2616.0, 2629.0, 2641.0, 2654.0, 2666.0, 2679.0, 2691.0, 2703.0, 2716.0, 2728.0, 2741.0, 2753.0, 2766.0, 2778.0, 2791.0, 2803.0, 2815.0, 2828.0, 2840.0, 2853.0, 2865.0, 2878.0, 2890.0, 2903.0, 2915.0, 2928.0, 2940.0, 2952.0, 2965.0, 2977.0, 2990.0, 3002.0], [2.869e-05, 2.609e-05, 2.258e-05, 2.977e-05, 5.79e-05, 0.0001154, 0.0002067, 0.0003241, 0.0004535, 0.0005956, 0.0007721, 0.001006, 0.001299, 0.001634, 0.00201, 0.002484, 0.003113, 0.003843, 0.004502, 0.00494, 0.005127, 0.005137, 0.005066, 0.004967, 0.004828, 0.004605, 0.004253, 0.00376, 0.003164, 0.002544, 0.001981, 0.001523, 0.001178, 0.0009281, 0.0007529, 0.0006376, 0.0005623, 0.0004934, 0.0004005, 0.0002829, 0.0001717, 9.8e-05, 6.493e-05, 5.315e-05, 4.427e-05, 3.261e-05, 2.291e-05, 2.114e-05, 2.584e-05, 2.866e-05]]}, "tilt": {"f": [[-0.4538, -0.4471, -0.4404, -0.4337, -0.427, -0.4203, -0.4136, -0.4069, -0.4002, -0.3935, -0.3868, -0.3801, -0.3734, -0.3667, -0.36, -0.3533, -0.3466, -0.3399, -0.3332, -0.3265, -0.3198, -0.3131, -0.3064, -0.2997, -0.293, -0.2863, -0.2796, -0.2729, -0.2662, -0.2595, -0.2528, -0.2461, -0.2394, -0.2327, -0.226, -0.2193, -0.2126, -0.2059, -0.1992, -0.1924, -0.1857, -0.179, -0.1723, -0.1656, -0.1589, -0.1522, -0.1455, -0.1388, -0.1321, -0.1254], [0.06016, 0.06715, 0.07362, 0.0867, 0.1163, 0.1755, 0.2775, 0.4279, 0.6216, 0.8508, 1.119, 1.447, 1.869, 2.404, 3.043, 3.747, 4.465, 5.159, 5.823, 6.475, 7.109, 7.66, 8.011, 8.063, 7.811, 7.351, 6.828, 6.35, 5.946, 5.594, 5.256, 4.901, 4.5, 4.036, 3.519, 2.986, 2.486, 2.057, 1.716, 1.465, 1.285, 1.153, 1.039, 0.916, 0.7722, 0.6138, 0.4605, 0.3311, 0.2321, 0.1585]], "m": [[-0.4582, -0.4515, -0.4449, -0.4382, -0.4316, -0.4249, -0.4182, -0.4116, -0.4049, -0.3982, -0.3916, -0.3849, -0.3783, -0.3716, -0.3649, -0.3583, -0.3516, -0.3449, -0.3383, -0.3316, -0.325, -0.3183, -0.3116, -0.305, -0.2983, -0.2916, -0.285, -0.2783, -0.2717, -0.265, -0.2583, -0.2517, -0.245, -0.2384, -0.2317, -0.225, -0.2184, -0.2117, -0.205, -0.1984, -0.1917, -0.1851, -0.1784, -0.1717, -0.1651, -0.1584, -0.1517, -0.1451, -0.1384, -0.1318], [0.04963, 0.0431, 0.02954, 0.02191, 0.02998, 0.05459, 0.08537, 0.1068, 0.1152, 0.1302, 0.1858, 0.3126, 0.5226, 0.8009, 1.124, 1.497, 1.952, 2.498, 3.121, 3.843, 4.704, 5.656, 6.549, 7.259, 7.793, 8.212, 8.527, 8.751, 8.916, 8.955, 8.69, 8.024, 7.053, 5.98, 5.01, 4.285, 3.799, 3.404, 2.943, 2.376, 1.782, 1.267, 0.8801, 0.6163, 0.4482, 0.347, 0.2885, 0.257, 0.236, 0.2028]]}}

‎src/js/SpectrogramCanvas.ts

+25-6
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import CanvasController from "@/js/CanvasController";
22
import * as tf from '@tensorflow/tfjs'
33
import chroma from "chroma-js";
44
import {extremes, Gradient, mean} from "@/js/Utils";
5+
import {hzToMel, melToHz, ticksLinear, ticksLog2, ticksMel, ticksMel2} from "@/js/scales/Scales";
56

67
/**
78
* Convert power spectrum signal to decibel signal inspired by python's librosa library.
@@ -74,22 +75,39 @@ export default class SpectrogramCanvas extends CanvasController
7475
const range = max - min
7576

7677
// Mapping i(y) - Input: pixel index y, Output: displayed index in array
78+
// y: y axis value
79+
// Output: transformed coefficient
7780
// Displayed index range = i(y) to i(y + 1), non-inclusive
7881
const binLen = spec[0].length
7982
const logLen = Math.log2(binLen)
83+
// const melLen = hzToMel()
8084
const [yPxLen, logPxLen] = [binLen / this.h, logLen / this.h]
85+
const logMin = Math.log2(32)
8186
const mappingLinear = (y: number) => y * yPxLen
82-
const mappingLog = (y: number) => Math.floor(Math.pow(2, y * logPxLen))
87+
// const mappingLog = (y: number) => Math.floor((Math.pow(2, (y / this.h) * logLen) - 32) / (binLen - 32) + 32)
88+
const mappingLog = (y: number) => Math.pow(2, y)
89+
const mappingMel =(y:number) => Math.floor(2595 * Math.log10(y / 700 + 1))
90+
91+
function createArray(max: number, resolution: number)
92+
{
93+
return Array.from(Array(Math.floor(resolution)).keys()).map(i => i / resolution * max)
94+
}
8395

8496
// Precompute mapping
85-
const mapping = Array.from(Array(this.h).keys()).map(i => mappingLog(i))
97+
// const mappedLog = createArray(logLen, 1000).map(i => mappingLog(i))
98+
const mappedMel = createArray(hzToMel(1024), 1000).map(i => melToHz(i))
99+
console.log(createArray(hzToMel(1024), 1000))
100+
console.log(mappedMel)
101+
const mapping = Array.from(Array(this.h).keys()).map(y => Math.floor(mappedMel[Math.floor(y / this.h * mappedMel.length)]))
102+
console.log(mapping)
86103

87104
// Draw each pixel
88105
const img = this.ctx.createImageData(this.w, this.h)
89106
const imgA = img.data
90107
const w4 = this.w * 4
91-
const gradient = new Gradient(chroma.scale(['#000',
108+
const gradient = new Gradient(chroma.scale(['#232323',
92109
'#4F1879', '#B43A78', '#F98766', '#FCFAC0']), 1000);
110+
// const gradient = new Gradient(chroma.scale(['#fff', '#ff7676', '#ff7676', '#ff2f2f']), 1000);
93111
for (let x = 0; x < this.w; x++)
94112
{
95113
const d = spec[x]
@@ -102,7 +120,7 @@ export default class SpectrogramCanvas extends CanvasController
102120
const area = d.subarray(iCur, iNext == iCur ? iNext + 1 : iNext)
103121

104122
// Draw
105-
const i = (this.h - y) * w4 + x4;
123+
const i = (this.h - y - 1) * w4 + x4;
106124
[imgA[i], imgA[i + 1], imgA[i + 2]] = gradient.get((mean(area) - min) / range)
107125
imgA[i + 3] = 255
108126

@@ -115,6 +133,7 @@ export default class SpectrogramCanvas extends CanvasController
115133
this.ctx.putImageData(img, 0, 0)
116134

117135
console.log(`drawing done: ${performance.now() - start} ms`)
118-
}
119136

120-
}
137+
return ticksMel2(this.h, 0, audio.sampleRate / 2)
138+
}
139+
}

‎src/js/Utils.ts

+12-3
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export class Gradient
4545
g: Uint8Array
4646
b: Uint8Array
4747

48-
constructor(scale: chroma.Scale, resolution: number)
48+
constructor(scale: chroma.Scale, resolution: number, logScale: boolean = true)
4949
{
5050
this.res = resolution
5151

@@ -54,8 +54,17 @@ export class Gradient
5454
this.b = new Uint8Array(resolution + 1)
5555

5656
// Precompute
57-
for (let i = 0; i <= resolution; i++)
58-
[this.r[i], this.g[i], this.b[i]] = scale(i / resolution).rgb()
57+
if (logScale)
58+
{
59+
const logMax = Math.log2(resolution)
60+
for (let i = 0; i <= resolution; i++)
61+
[this.r[i], this.g[i], this.b[i]] = scale(Math.log2(i) / logMax).rgb()
62+
}
63+
else
64+
{
65+
for (let i = 0; i <= resolution; i++)
66+
[this.r[i], this.g[i], this.b[i]] = scale(i / resolution).rgb()
67+
}
5968
}
6069

6170
/**

‎src/js/WaveformCanvas.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import CanvasController from "@/js/CanvasController";
22
import {extremes} from "@/js/Utils";
33

4-
const waveColor = 'pink'
4+
const waveColor = '#fff4eb'
55

66
export default class WaveformCanvas extends CanvasController
77
{

‎src/js/scales/Scales.ts

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
export function hzToMel(hz: number): number
2+
{
3+
return 2595 * Math.log10(1 + hz / 700)
4+
}
5+
6+
export function melToHz(mel: number): number
7+
{
8+
return 700 * (Math.pow(10, mel / 2595) - 1)
9+
}
10+
11+
/**
12+
* Convert FFT output bins (y-axis index) to frequencies
13+
*
14+
* @param winLen Integer, window length
15+
* @param sampleRate Sample rate
16+
*/
17+
export function binToFreq(winLen: number, sampleRate: number): Float32Array
18+
{
19+
const multiplier = sampleRate / winLen
20+
const bins = winLen / 2 + 1
21+
const arr = new Float32Array(bins)
22+
for (let i = 0; i < bins; i++) arr[i] = i * multiplier
23+
return arr
24+
}
25+
26+
/**
27+
* Tick: [numeric value, percentage position]
28+
*/
29+
export type Ticks = [number, number][]
30+
31+
/**
32+
* Generate ticks for a linear graph
33+
*
34+
* @param height Pixel height
35+
* @param min Min frequency
36+
* @param max Max frequency
37+
*/
38+
export function ticksLinear(height: number, min: number, max: number): Ticks
39+
{
40+
const ticks: Ticks = []
41+
for (let i = 100; i < Math.min(max, 1000); i += 100)
42+
ticks.push([i, i / (max - min) + min])
43+
for (let i = 1000; i <= max; i += 200)
44+
ticks.push([i, i / (max - min) + min])
45+
return ticks
46+
}
47+
48+
/**
49+
* Generate ticks for a Log2 graph
50+
*
51+
* @param height Pixel height
52+
* @param min Min frequency
53+
* @param max Max frequency
54+
*/
55+
export function ticksLog2(height: number, min: number, max: number): Ticks
56+
{
57+
const logMin = min < 1 ? 0 : Math.log2(min)
58+
const logMax = Math.log2(max)
59+
60+
const ticks: Ticks = []
61+
for (let log = 5; log < logMax; log++)
62+
ticks.push([Math.pow(2, log), log / (logMax - logMin) + logMin])
63+
return ticks
64+
}
65+
66+
export function ticksMel(height: number, min: number, max: number): Ticks
67+
{
68+
const melMin = min < 1 ? 0 : hzToMel(min)
69+
const melMax = hzToMel(max)
70+
71+
const ticks: Ticks = []
72+
for (let i = 0; i < 20; i++)
73+
{
74+
const pivoit = i * (melMax - melMin) / 19
75+
const hz = Math.round(melToHz(pivoit) / 100) * 100
76+
77+
ticks.push([hz, (hzToMel(hz) - melMin) / (melMax - melMin)])
78+
}
79+
return ticks
80+
}
81+
82+
export function ticksMel2(height: number, min: number, max: number): Ticks
83+
{
84+
const melMin = min < 1 ? 0 : hzToMel(min)
85+
const melMax = hzToMel(max)
86+
87+
const ticks: Ticks = []
88+
89+
for (let i = 100; i <= Math.min(max, 1000); i += 100)
90+
ticks.push([i, hzToMel(i) / (melMax - melMin) + melMin])
91+
92+
for (let i = 1000; i <= Math.min(max, 4000); i += 200)
93+
ticks.push([i, hzToMel(i) / (melMax - melMin) + melMin])
94+
95+
for (let i = 4000; i <= max; i += 500)
96+
ticks.push([i, hzToMel(i) / (melMax - melMin) + melMin])
97+
98+
return ticks
99+
}

‎src/main.ts

+6
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,10 @@ import 'element-plus/dist/index.css'
77
import '@fortawesome/fontawesome-free/css/fontawesome.min.css'
88
import '@fortawesome/fontawesome-free/css/solid.min.css'
99

10+
import {Chart, registerables} from 'chart.js';
11+
import annotationPlugin from 'chartjs-plugin-annotation';
12+
13+
Chart.register(...registerables)
14+
Chart.register(annotationPlugin)
15+
1016
createApp(App).use(router).use(ElementPlus).mount('#app')

0 commit comments

Comments
 (0)