自适应画图窗口；模型使用开关~；文件选择适配。

Author: Haskely

Audio/AudioDrawer.js

@@ -1,7 +1,7 @@
 import { Drawer } from '../Drawer/Drawer.js';
 
 class WaveDrawer extends Drawer {
-    constructor(id = 'audioWave', width = 1000, height = 100, total_duration = 10, show_time = true) {
+    constructor(id = 'audioWave', width = document.body.clientWidth * 0.8, height = 125, total_duration = 10, show_time = true) {
         super(id, width, height);
         this.total_duration = total_duration;
         this.show_time = show_time;
@@ -35,7 +35,7 @@ class WaveDrawer extends Drawer {
             for (let i = 0; i < audio_canvas_length; i += 1) {
                 const cur_x = i;
                 for (let cp = 0; cp < perpixel_n && cp < audio_pcm.length - i * perpixel_n; cp += 1) {
-                    const cur_w = sin_one(audio_pcm[i * perpixel_n + cp]);
+                    const cur_w = (audio_pcm[i * perpixel_n + cp]);
                     const cur_y = Math.round(cur_w * end_dy + end_y);
                     const cur_n = flatten_wave_imgArray_count[cur_x + cur_y * audio_canvas_length] + 1;
                     flatten_wave_imgArray_count[cur_x + cur_y * audio_canvas_length] = cur_n;
@@ -79,16 +79,16 @@ class WaveDrawer extends Drawer {
 
 function sin_one(x) {
     return Math.sin(x * Math.PI / 2);
-}
+};
 
 function circle_one(x) {
     if (x >= 0) return Math.sqrt(x * (2 - x));
     else return -Math.sqrt(-x * (2 - x));
-}
+};
 
 
 class StftDrawer extends Drawer {
-    constructor(id = 'audioStft', width = 1000, height = null, total_duration = 10, show_time = true) {
+    constructor(id = 'audioStft', width = document.body.clientWidth * 0.8, height = null, total_duration = 10, show_time = true) {
         super(id, width, height);
         this.total_duration = total_duration;
         this.adaptive_height = (!height);

Drawer/Drawer.js

@@ -1,5 +1,5 @@
 class Drawer {
-    constructor(id = 'canvas', width = 600, height = 400) {
+    constructor(id = 'canvas', width = document.body.clientWidth * 0.8, height = 400) {
 
         this.canvas = document.querySelector(`canvas#${id}`);
         if (!this.canvas) {

Workers/AudioProcesserWorker.js

@@ -17,9 +17,6 @@ importScripts("../tensorflowjs/[email protected]");
 
 async function init_model() {
     const model = await tf.loadGraphModel('../tensorflowjs/tfjsModel/tfjs_savedModel/model.json');
-
-    // const len = Math.round(self.audioContainer.max_duration / self.audioContainer.hop_s);
-    // model.predict(tf.zeros([1, len, 129]));
     return model;
 };
 

main.js

@@ -7,16 +7,16 @@ import { MyWorker } from './Workers/MyWorker.js';
 // 添加页面元素
 $('body').append(`
     <div>
-        <input type="file" id="audio_input" accept="audio/*" capture="microphone"/>
+        <input type="file" id="audio_input" accept=".wav, .mp3, .flac, .aac, .m4a, .opus, .ogg" capture="microphone"/>
         <button id="record_btn" >Record</button>
     </div>`
 ); const audio_input = document.querySelector('#audio_input'); const record_btn = document.querySelector('#record_btn');
 $('body').append(`<div id='audios'></div>`); const audios_div = document.querySelector('#audios');
 
-const waveDrawer = new WaveDrawer('audioWave', 1000, 125);
-const stftDrawer = new StftDrawer('audioStft', 1000, null);
-
+const waveDrawer = new WaveDrawer('audioWave');
+const stftDrawer = new StftDrawer('audioStft');
 $('body').append(`<button id='switch_btn'></button>`); const switch_btn = document.querySelector('#switch_btn');
+$('body').append(`<button id='open_model_btn'></button>`); const open_model_btn = document.querySelector('#open_model_btn');
 // 元素添加完毕
 
 // 设置页面元素事件
@@ -60,9 +60,8 @@ record_btn.onclick = async (e) => {
     };
 };
 
-switch_btn.disabled = true;
-switch_btn.textContent = "Loading..."
-switch_btn.onclick = async function (e) {
+switch_btn.textContent = "Start";
+switch_btn.onclick = function (e) {
     if (audioProcesser.isRunning()) {
         audioProcesser.stop();
         e.target.textContent = "Start";
@@ -73,6 +72,19 @@ switch_btn.onclick = async function (e) {
 
 };
 
+let is_open_model = false;
+open_model_btn.disabled = true;
+open_model_btn.textContent = "ModelLoading...";
+open_model_btn.onclick = function (e) {
+    if (is_open_model) {
+        is_open_model = false;
+        e.target.textContent = "OpenModel";
+    } else {
+        is_open_model = true;
+        e.target.textContent = "StopModel";
+    };
+};
+
 
 // 
 
@@ -95,8 +107,8 @@ myWorker.reciveData('Event', (content) => {
             break;
         case 'inited':
             console.log('myWorkerScript Inited!');
-            switch_btn.textContent = "Start";
-            switch_btn.disabled = false;
+            open_model_btn.textContent = "OpenModel";
+            open_model_btn.disabled = false;
             break;
         default:
             console.error(`[MainThread]收到未知Event:${content}`);
@@ -109,7 +121,7 @@ const audioProcesser = new AudioFlowProcesser(
     'sound',
     sampleRate,
     undefined,
-    256,
+    512,
     1,
     (audioData_Clip) => {
         audioContainer.updateAudioDataClip(audioData_Clip);
@@ -120,21 +132,23 @@ const audioProcesser = new AudioFlowProcesser(
         audioContainer.updateStftDataClip(stftData_Clip);
         stftDrawer.set_data(audioContainer.getStftData());
 
-        myWorker.sendData(
-            'stftData',
-            {
-                sampleRate: stftData_Clip.sampleRate,
-                fft_n: stftData_Clip.fft_n,
-                hop_n: stftData_Clip.hop_n,
-                stft: {
-                    stftMartrixArrayBuffer: stftData_Clip.stft._arrayBuffer,
-                    stftMartrixHeight: stftData_Clip.stft.height,
-                    stftMartrixWidth: stftData_Clip.stft.width,
+        if (is_open_model) {
+            myWorker.sendData(
+                'stftData',
+                {
+                    sampleRate: stftData_Clip.sampleRate,
+                    fft_n: stftData_Clip.fft_n,
+                    hop_n: stftData_Clip.hop_n,
+                    stft: {
+                        stftMartrixArrayBuffer: stftData_Clip.stft._arrayBuffer,
+                        stftMartrixHeight: stftData_Clip.stft.height,
+                        stftMartrixWidth: stftData_Clip.stft.width,
+                    },
+                    audioTime: stftData_Clip.audioTime,
                 },
-                audioTime: stftData_Clip.audioTime,
-            },
-            [stftData_Clip.stft._arrayBuffer]
-        );
+                [stftData_Clip.stft._arrayBuffer]
+            );
+        };
     },
     null,
 );