diff --git a/src/assets/music.mp3 b/src/assets/music.mp3
new file mode 100644
index 0000000..5cf1841
Binary files /dev/null and b/src/assets/music.mp3 differ
diff --git a/src/components/Music.vue b/src/components/Music.vue
index e804a9d..068542f 100644
--- a/src/components/Music.vue
+++ b/src/components/Music.vue
@@ -96,11 +96,10 @@
 		width: 94%;
 		height: 20px;
 		padding: 8px 3%;
-		/*padding-bottom: 5px;*/
 		margin-bottom: 5px;
 		border-bottom: 1px solid #EEE;
 		overflow: hidden;
-		text-overflow:ellipsis;
+		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
 	.result span:last-child{
diff --git a/src/router/index.js b/src/router/index.js
index c3ef713..ddc75c8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,6 +4,7 @@ import index from '@/components/Index'
 import music from '@/components/Music'
 import form from '@/components/Form'
 import detail from '@/components/Detail'
+import map from '@/components/Map'
 
 Vue.use(Router)
 
@@ -28,6 +29,11 @@ export default new Router({
 			path: '/detail/:hash',
 			name: 'Detail',
 			component: detail
+		},
+		{
+			path: '/map',
+			name: 'Map',
+			component: map
 		}
 
 	]
diff --git a/src/utils/http.js b/src/utils/http.js
index caa4d29..5a22bd0 100644
--- a/src/utils/http.js
+++ b/src/utils/http.js
@@ -18,9 +18,11 @@ http.jsonp = function(url,data){
 
 	var funcName = callBack + ++couter;
 
+
 	data.callback = funcName;
 
 	var fullUrl = url + '?' + queryString(data);
+	console.log(fullUrl);
 
 	return new Promise((res,rej) => {
 		window[funcName] = res;
diff --git a/src/utils/music.js b/src/utils/music.js
new file mode 100644
index 0000000..fb7f191
--- /dev/null
+++ b/src/utils/music.js
@@ -0,0 +1,76 @@
+// music.js
+
+
+let music = {}
+
+
+var canvas = null;
+var data = null;
+var g = null;
+var analyser = null;
+
+function draw(){
+	// g.clearRect(0,0,1024,300);
+
+	g.fillStyle = 'rgba(255,255,255,.8)'
+
+	g.fillRect(0,0,1024,300)
+
+	// analyser.getByteTimeDomainData(data);
+	analyser.getByteFrequencyData(data);
+	// window.requestAnimationFrame(draw);
+
+
+	g.beginPath();
+	g.moveTo(0,128);
+	g.strokeStyle = '#BBB';
+	g.fillStyle = '#BBB';
+	g.lineWidth = 2;
+ 
+	// data.forEach((y,x) => {
+	// 	g.lineTo(x,y);
+	// })
+	for (var i = 0; i < data.length; i+=11) {
+		var x = i,y = data[i];
+		g.fillRect(x,300 - y,10,300);
+	}
+	g.stroke();
+
+
+}
+
+
+music.init = function(audio,_canvas){
+
+	canvas = _canvas;
+	canvas.width = 1024;
+	canvas.height = 300;
+	g = canvas.getContext('2d');
+
+	var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+	analyser = audioCtx.createAnalyser();
+
+	var source = audioCtx.createMediaElementSource(audio);
+	source.connect(analyser); 
+	analyser.connect(audioCtx.destination);
+
+	analyser.fftSize = 2048;
+	var bufferLength = analyser.frequencyBinCount;
+	data = new Uint8Array(bufferLength);
+	analyser.getByteTimeDomainData(data);
+
+
+	draw();
+
+	setInterval(draw,36);
+
+	// setInterval(function(){
+	// 	analyser.getByteTimeDomainData(data);
+	// 	console.log(data);
+	// },1000)
+}
+
+
+
+export default music
+
diff --git a/static/music.mp3 b/static/music.mp3
new file mode 100644
index 0000000..5cf1841
Binary files /dev/null and b/static/music.mp3 differ