diff --git a/OsuDataDistributeRestful.csproj b/OsuDataDistributeRestful.csproj
index 896cc4f..27f4b51 100644
--- a/OsuDataDistributeRestful.csproj
+++ b/OsuDataDistributeRestful.csproj
@@ -81,6 +81,7 @@
     </ProjectReference>
   </ItemGroup>
   <ItemGroup>
+    <None Include="app.config" />
     <None Include="packages.config" />
   </ItemGroup>
   <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
diff --git a/Server/Api/OrtdpApis.cs b/Server/Api/OrtdpApis.cs
index ea1adfa..7af1fb7 100644
--- a/Server/Api/OrtdpApis.cs
+++ b/Server/Api/OrtdpApis.cs
@@ -79,7 +79,7 @@ public ActionResult GetAudioFile()
 
             if (File.Exists(filename))
             {
-                var fs = File.Open(filename, FileMode.Open, FileAccess.Read, FileShare.Read);
+                var fs = OpenFile(filename);
 
                 return new ActionResult(fs)
                 {
@@ -99,7 +99,7 @@ public ActionResult GetBackgroundFile()
 
             if (File.Exists(filename))
             {
-                var fs = File.Open(filename, FileMode.Open, FileAccess.Read, FileShare.Read);
+                var fs = OpenFile(filename);
                 string ext = Path.GetExtension(filename);
 
                 return new ActionResult(fs)
@@ -120,7 +120,7 @@ public ActionResult GetVideoFile()
 
             if (File.Exists(filename))
             {
-                var fs = File.Open(filename, FileMode.Open, FileAccess.Read, FileShare.Read);
+                var fs = OpenFile(filename);
                 string ext = Path.GetExtension(filename);
 
                 return new ActionResult(fs)
@@ -180,6 +180,11 @@ public object GetPlayingTime()
 
         #region tools
 
+        private Stream OpenFile(string filename)
+        {
+            return new MemoryStream(File.ReadAllBytes(filename));
+        }
+
         private object MakeProvideDatas(ProvideDataMask mask, Func<ProvideData, object> selector)
         {
             bool isTourney = ortdp.TourneyListenerManagersCount != 0;
diff --git a/Server/Api/RtppdApis.cs b/Server/Api/RtppdApis.cs
index 9a1ae90..a62cdf1 100644
--- a/Server/Api/RtppdApis.cs
+++ b/Server/Api/RtppdApis.cs
@@ -109,7 +109,7 @@ public object GetPPFormat()
 
         [Route("/hitCountFormat")]
         public object GetHitCountFormat()
-            => new {format = StringFormatter.GetHitCountFormatter().Format};
+            => new {format = StringFormatter.GetHitCountFormatter().Format };
 
         [Route("/formated/pp")]
         public object GetFormatedPP()
diff --git a/app.config b/app.config
new file mode 100644
index 0000000..195db1f
--- /dev/null
+++ b/app.config
@@ -0,0 +1,11 @@
+﻿<?xml version="1.0" encoding="utf-8"?>
+<configuration>
+  <runtime>
+    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
+      <dependentAssembly>
+        <assemblyIdentity name="Newtonsoft.Json" publicKeyToken="30ad4fe6b2a6aeed" culture="neutral" />
+        <bindingRedirect oldVersion="0.0.0.0-7.0.0.0" newVersion="7.0.0.0" />
+      </dependentAssembly>
+    </assemblyBinding>
+  </runtime>
+</configuration>
\ No newline at end of file
diff --git a/html/visualizer-wave.html b/html/visualizer-wave.html
new file mode 100644
index 0000000..c2bf1b6
--- /dev/null
+++ b/html/visualizer-wave.html
@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Visualizer</title>
+    <style>
+        #thefile {
+            position: fixed;
+            top: 10px;
+            left: 10px;
+            z-index: 100;
+        }
+
+        #canvas {
+            position: fixed;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+        }
+
+        audio {
+            position: fixed;
+            left: 10px;
+            bottom: 10px;
+            width: calc(100% - 20px);
+        }
+    </style>
+
+    <script src="js/ODDR.js"></script>
+    <script src="js/ORTDP.js"></script>
+    <script>
+            (async function () {
+                const MAX_HEIGTH = window.innerHeight - 20;
+                let context = new AudioContext();
+                let play = false;
+
+                let _url = new URL(window.location.href);
+                let has_sound = _url.searchParams.get('sound') || "false";
+                let host = _url.searchParams.get('host') || "localhost";
+                let port = _url.searchParams.get('port') || "10800";
+                let lineWidth = Number.parseInt(_url.searchParams.get('lineWidth') || "5");
+
+                let current_audio_buffer = null;
+                let src = context.createBufferSource();
+                let analyser = context.createAnalyser();
+                analyser.smoothingTimeConstant = 0.75;
+                src.connect(analyser);
+
+                let oddr = new ODDR(host,port);
+                let ortdp = new ORTDP(oddr);
+
+                //链接音频输出设备
+                if (has_sound === "true")
+                    analyser.connect(context.destination);
+
+                let last_mods = { timeRate: 1.0 };
+                let last_mp3 = "";
+                let audio_url = null;
+                let timer = 0;
+
+                //play and seek andio
+                function restart_audio(buf, time, timeRate) {
+                    if (buf === null) return;
+                    if (time < 0) return;
+                    src.disconnect(analyser);
+
+                    src = context.createBufferSource();
+                    src.buffer = buf;
+                    src.playbackRate.value = timeRate;
+                    src.connect(analyser);
+
+                    src.start(0, time);
+                    timer = time;
+                    play = true;
+                }
+
+                //play timer
+                setInterval(function () {
+                    if (play === true)
+                        timer += 0.026 * last_mods.timeRate;
+                }, Math.round(26 * last_mods.timeRate));
+
+                //http get loop
+                async function get_loop() {
+                    let time = (await ortdp.getPlayingTime()).time / 1000.0;
+                    let beatmap = await ortdp.getBeatmapInfo();
+                    let mods = await ortdp.getPlayingModsAt(0);
+
+                    let folder = beatmap.folder;
+                    let mp3 = beatmap.audioFilename;
+                    mp3 = folder + '\\' + mp3;
+
+                    if (folder !== "" && mp3 !== "") {
+                        if (last_mp3 != mp3) {
+                            if (play === true) {
+                                src.stop(0);
+                                play = false;
+                            }
+
+                            let audio_data = await ortdp.getBeatmapAudio("arraybuffer");
+                            let buf = await context.decodeAudioData(audio_data);
+                            current_audio_buffer = buf;
+                            restart_audio(buf, time, 1.0);
+                        }
+                    }
+                    if (Math.abs(timer - time) > 0.2)
+                        restart_audio(current_audio_buffer, time+0.1, mods.timeRate);
+
+                    if (last_mods.timeRate != mods.timeRate)
+                        restart_audio(current_audio_buffer, time, mods.timeRate);
+
+                    last_mp3 = mp3;
+                    last_mods = mods;
+                    setTimeout(get_loop, 100);
+                }
+
+                //canvas initialize
+                async function play_audio() {
+                    var canvas = document.getElementById("canvas");
+                    canvas.width = window.innerWidth;
+                    canvas.height = window.innerHeight;
+                    var ctx = canvas.getContext("2d");
+
+                    analyser.fftSize = 16384;
+                    const SKIP = 64;
+                    var bufferLength = analyser.fftSize;
+                    console.log(bufferLength);
+
+
+                    var dataArray = new Uint8Array(bufferLength);
+
+                    var WIDTH = canvas.width;
+                    var HEIGHT = canvas.height;
+                    var STEP = WIDTH / bufferLength;
+
+                    var barHeight;
+
+                    //render
+                    function renderFrame() {
+                        let x = 0;
+
+                        analyser.getByteTimeDomainData(dataArray);
+
+                        ctx.fillStyle = "#000";
+                        ctx.fillRect(0, 0, WIDTH, HEIGHT);
+                        ctx.lineWidth = lineWidth;
+
+                        ctx.strokeStyle = "#33aacc";
+                        ctx.beginPath();
+                        ctx.moveTo(0,dataArray[0] / 255.0 * MAX_HEIGTH);
+                        x += STEP;
+
+                        for (let i = 1; i < bufferLength; i+=SKIP) {
+                            let val1 = 0;
+                            let val2 = 0;
+
+                            for(let j=0;j<SKIP/2;j++){
+                                val1 += dataArray[i+j] / 255.0;
+                            }
+                            for(let j=0;j<SKIP/2;j++){
+                                val2 += dataArray[i + SKIP/2 +j] / 255.0;
+                            }
+                            val1 /= (SKIP/2);
+                            val2 /= (SKIP/2);
+
+                            let r = 128 + Math.round((128 * (i / bufferLength)));
+                            let g = Math.round(val1 * val2 * 230 - (25 * (i / bufferLength)));
+                            let b = 203;
+
+                            ctx.lineTo(x + STEP, val2 * MAX_HEIGTH);
+
+                            x += STEP * SKIP;
+                        }
+                        ctx.stroke();
+
+                        requestAnimationFrame(renderFrame);
+                    }
+                    renderFrame();
+                };
+
+                window.onload = function () {
+                    get_loop();
+                    play_audio();
+                }
+            })();
+    </script>
+</head>
+
+<body>
+    <div id="content">
+        <canvas id="canvas"></canvas>
+    </div>
+</body>
+</html>
+
diff --git a/html/visualizer.html b/html/visualizer.html
index 15332d6..ddaba7d 100644
--- a/html/visualizer.html
+++ b/html/visualizer.html
@@ -105,8 +105,8 @@
                             restart_audio(buf, time, 1.0);
                         }
                     }
-                    if (Math.abs(timer - time) > 0.5)
-                        restart_audio(current_audio_buffer, time, mods.timeRate);
+                    if (Math.abs(timer - time) > 0.2)
+                        restart_audio(current_audio_buffer, time+0.1, mods.timeRate);
 
                     if (last_mods.timeRate != mods.timeRate)
                         restart_audio(current_audio_buffer, time, mods.timeRate);
@@ -123,7 +123,7 @@
                     canvas.height = window.innerHeight;
                     var ctx = canvas.getContext("2d");
 
-                    analyser.fftSize = 512;
+                    analyser.fftSize = 2048;
 
                     var bufferLength = analyser.frequencyBinCount;
                     console.log(bufferLength);
@@ -133,7 +133,7 @@
                     var WIDTH = canvas.width;
                     var HEIGHT = canvas.height;
 
-                    var barWidth = (WIDTH / bufferLength) * 2.5;
+                    var barWidth = (WIDTH / bufferLength) * 2.5 * 4;
                     var barHeight;
                     var x = 0;
 
@@ -146,8 +146,13 @@
                         ctx.fillStyle = "#000";
                         ctx.fillRect(0, 0, WIDTH, HEIGHT);
 
-                        for (let i = 0; i < bufferLength; i++) {
-                            let val = dataArray[i] / 255.0;
+                        for (let i = 0; i < bufferLength; i+=4) {
+                            let val = 0
+
+                            for(let j=0;j<4;j++){
+                                val += dataArray[i+j] / 255.0;
+                            }
+                            val /= 4;
                             barHeight = val * val * val;
 
                             let r = 128 + Math.round((128 * (i / bufferLength)));
@@ -161,7 +166,7 @@
 
                             ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);
 
-                            x += barWidth + 1;
+                            x += barWidth;
                         }
 
                         requestAnimationFrame(renderFrame);
