diff --git a/html/audio.html b/html/audio.html
new file mode 100644
index 00000000..c336dce8
--- /dev/null
+++ b/html/audio.html
@@ -0,0 +1,4 @@
+<div id="js-audio">
+    <audio src="{{ src }}" controls autoplay></audio>
+    <p class="reduce-text"><strong>{{ name }}</strong></p>
+</div>
\ No newline at end of file
diff --git a/lib/client/view.js b/lib/client/view.js
index effb851c..d9c71a50 100644
--- a/lib/client/view.js
+++ b/lib/client/view.js
@@ -61,7 +61,7 @@ var CloudCmd, Util, DOM, CloudFunc, $;
          * function shows FancyBox
          */
         function show(data, callback, newConfig) {
-            var path, element, func, name, isImage,
+            var path, element, func, name,
                 config = {};
             
             if (!Loading) {
@@ -83,11 +83,16 @@ var CloudCmd, Util, DOM, CloudFunc, $;
                 } else {
                     Images.showLoad();
                     path   = CloudFunc.FS + Info.path;
-                    isImage = $.fancybox.isImage(path);
                     
-                    if (isImage) {
+                    if (isImage(path))
                         $.fancybox.open({ href : path }, Config);
-                    } else
+                    else if (isMusic(path))
+                        getMusicElement(path, function(element) {
+                            $.fancybox.open(element, {
+                                beforeShow: musicBeforeShow
+                            });
+                        });
+                    else
                         Info.getData(function(data) {
                             var element = document.createTextNode(data);
                             /* add margin only for view text documents */
@@ -103,6 +108,49 @@ var CloudCmd, Util, DOM, CloudFunc, $;
             $.fancybox.close();
         }
         
+        function isImage(name) {
+            var isMatch = $.fancybox.isImage(name);
+            
+            return isMatch;
+        }
+        
+        function isMusic(name) {
+            var isMatch,
+                isStr       = Util.isString(name),
+                exts        = '.mp3|.mp4',
+                extsReg     = new RegExp(exts);
+            
+            if (isStr)
+                isMatch     = name.match(extsReg);
+            
+            return isMatch;
+        }
+        
+        function getMusicElement(src, callback) {
+            DOM.ajax({
+                url     : '/html/audio.html',
+                success : function(template) {
+                    var rendered    = Util.render(template, {
+                        src: src,
+                        name: Info.name
+                    }),
+                
+                    element     = $(rendered);
+                    Util.exec(callback, element);
+                }
+            });
+        }
+        
+        function musicBeforeShow() {
+            var audioDiv    = $('#js-audio'),
+                audio       = audioDiv.find('audio'),
+                width       = audio.width() +'px';
+            
+            audioDiv.width(width);
+                
+            Images.hideLoad();
+        }
+        
         /**
          * function loads css and js of FancyBox
          * @callback   -  executes, when everything loaded