WIP web stuff

Author: NotHyper-474

source/funkin/audio/waveform/WaveformDataParser.hx

@@ -1,8 +1,13 @@
 package funkin.audio.waveform;
 
+import lime.utils.Float32Array;
 import funkin.util.TimerUtil;
 import haxe.ds.Vector;
 import haxe.io.Bytes;
+#if web
+import lime.utils.UInt8Array;
+import js.html.audio.AnalyserNode;
+#end
 
 @:nullSafety
 class WaveformDataParser
@@ -47,14 +52,27 @@ class WaveformDataParser
 
   public static function interpretAudioBuffer(soundBuffer:lime.media.AudioBuffer):Null<WaveformData>
   {
+    #if web
+    var sampleRate = soundBuffer.src._sounds[0]._node.context.sampleRate;
+    var channels = 2;
+    var bitsPerSample = 32;
+
+    var analyser:AnalyserNode = soundBuffer.src._sounds[0]._node.context.createAnalyser();
+    analyser.fftSize = 2048;
+
+    var data = new Float32Array(analyser.frequencyBinCount);
+    analyser.getFloatTimeDomainData(data);
+    var soundData = data.toBytes();
+    #else
     var sampleRate = soundBuffer.sampleRate;
     var channels = soundBuffer.channels;
     var bitsPerSample = soundBuffer.bitsPerSample;
+    var soundData:Bytes = soundBuffer.data.toBytes();
+    #end
+
     var samplesPerPoint:Int = 256; // I don't think we need to configure this.
     var pointsPerSecond:Float = sampleRate / samplesPerPoint; // 172 samples per second for most songs is plenty precise while still being performant..
 
-    // TODO: Make this work better on HTML5.
-    var soundData:Bytes = soundBuffer.data.toBytes();
     var fakeBitsPerSample:Int = bitsPerSample;
     var minSampleValue:Int;
     var maxSampleValue:Int;

source/funkin/ui/debug/WaveformTestState.hx

@@ -1,11 +1,13 @@
 package funkin.ui.debug;
 
+import funkin.util.assets.SoundUtil;
 import flixel.math.FlxRect;
 import flixel.FlxSprite;
 import flixel.util.FlxColor;
 import funkin.audio.FunkinSound;
 import funkin.audio.waveform.WaveformData;
 import funkin.audio.waveform.WaveformDataParser;
+import funkin.audio.waveform.WaveformSprite;
 import funkin.graphics.rendering.MeshRender;
 
 class WaveformTestState extends MusicBeatState
@@ -20,7 +22,7 @@ class WaveformTestState extends MusicBeatState
 
   var waveformAudio:FunkinSound;
 
-  // var waveformSprite:WaveformSprite;
+  var waveformSprite:WaveformSprite;
   // var waveformSprite2:WaveformSprite;
   var timeMarker:FlxSprite;
 
@@ -37,30 +39,34 @@ class WaveformTestState extends MusicBeatState
     testSprite.clipRect = new FlxRect(0, 0, FlxG.width, FlxG.height);
     // add(testSprite);
 
-    waveformAudio = FunkinSound.load(Paths.inst('bopeebo', '-erect'));
-
-    waveformData = WaveformDataParser.interpretFlxSound(waveformAudio);
+    Assets.loadSound(Paths.music('chartEditorLoop/chartEditorLoop')).onComplete(sound -> {
+      waveformAudio = FunkinSound.load(sound);
+      waveformData = WaveformDataParser.interpretFlxSound(waveformAudio);
+
+      waveformSprite = WaveformSprite.buildFromWaveformData(waveformData, HORIZONTAL, FlxColor.fromString("#ADD8E6"));
+      waveformSprite.duration = 5.0 * 160;
+      waveformSprite.width = FlxG.width * 160;
+      waveformSprite.height = FlxG.height; // / 2;
+      waveformSprite.amplitude = 2.0;
+      waveformSprite.minWaveformSize = 25;
+      waveformSprite.clipRect = new FlxRect(0, 0, FlxG.width, FlxG.height);
+      add(waveformSprite);
+
+      //
+      // waveformSprite2 = WaveformSprite.buildFromWaveformData(waveformData2, HORIZONTAL, FlxColor.fromString("#FF0000"), 5.0);
+      // waveformSprite2.width = FlxG.width;
+      // waveformSprite2.height = FlxG.height / 2;
+      // waveformSprite2.y = FlxG.height / 2;
+      // add(waveformSprite2);
+    }).onError(e -> {
+      throw 'FUCKKKK $e';
+    });
 
     polygonSprite = new MeshRender(FlxG.width / 2, FlxG.height / 2, FlxColor.WHITE);
 
     setPolygonVertices(vertexCount);
     add(polygonSprite);
 
-    // waveformSprite = WaveformSprite.buildFromWaveformData(waveformData, HORIZONTAL, FlxColor.fromString("#ADD8E6"));
-    // waveformSprite.duration = 5.0 * 160;
-    // waveformSprite.width = FlxG.width * 160;
-    // waveformSprite.height = FlxG.height; // / 2;
-    // waveformSprite.amplitude = 2.0;
-    // waveformSprite.minWaveformSize = 25;
-    // waveformSprite.clipRect = new FlxRect(0, 0, FlxG.width, FlxG.height);
-    // add(waveformSprite);
-    //
-    // waveformSprite2 = WaveformSprite.buildFromWaveformData(waveformData2, HORIZONTAL, FlxColor.fromString("#FF0000"), 5.0);
-    // waveformSprite2.width = FlxG.width;
-    // waveformSprite2.height = FlxG.height / 2;
-    // waveformSprite2.y = FlxG.height / 2;
-    // add(waveformSprite2);
-
     timeMarker = new FlxSprite(0, FlxG.height * 1 / 6);
     timeMarker.makeGraphic(1, Std.int(FlxG.height * 2 / 3), FlxColor.RED);
     add(timeMarker);
@@ -74,13 +80,13 @@ class WaveformTestState extends MusicBeatState
 
     if (FlxG.keys.justPressed.SPACE)
     {
-      if (waveformAudio.isPlaying)
+      if (waveformAudio != null && waveformAudio.isPlaying)
       {
-        waveformAudio.stop();
+        waveformAudio?.stop();
       }
       else
       {
-        waveformAudio.play();
+        waveformAudio?.play();
       }
     }
 
@@ -98,11 +104,11 @@ class WaveformTestState extends MusicBeatState
       // }
     }
 
-    if (waveformAudio.isPlaying)
+    if (waveformAudio?.isPlaying ?? false)
     {
       // waveformSprite takes a time in fractional seconds, not milliseconds.
       var timeSeconds = waveformAudio.time / 1000;
-      // waveformSprite.time = timeSeconds;
+      waveformSprite.time = timeSeconds;
       // waveformSprite2.time = timeSeconds;
     }