diff --git a/themes/beauty/controller/ListController.php b/themes/beauty/controller/ListController.php
index 67944ea..98f5118 100644
--- a/themes/beauty/controller/ListController.php
+++ b/themes/beauty/controller/ListController.php
@@ -133,6 +133,11 @@ Class ListController extends Controller {
                 $videoExts = !empty(FSC::$app['config']['supportedVideoExts']) ? FSC::$app['config']['supportedVideoExts'] : array('mp4', 'mov', 'm3u8');
                 return !empty($item['extension']) && in_array($item['extension'], $videoExts);
             });
+        }else if ($showType == 'audio' && !empty($scanResults[$cateId]['files'])) {
+            $scanResults[$cateId]['files'] = array_filter($scanResults[$cateId]['files'], function($item) {
+                $audioExts = !empty(FSC::$app['config']['supportedAudioExts']) ? FSC::$app['config']['supportedAudioExts'] : array('mp3');
+                return !empty($item['extension']) && in_array($item['extension'], $audioExts);
+            });
         }
 
         //获取当前目录下的readme
@@ -227,6 +232,26 @@ Class ListController extends Controller {
                 }
             }
             return $this->renderJson(compact('page', 'pageSize', 'videos'));
+        }else if ($dataType == 'audio' && !empty($subcate['files'])) {
+            $audioExts = !empty(FSC::$app['config']['supportedAudioExts']) ? FSC::$app['config']['supportedAudioExts'] : array('mp3');
+            $audios = array();
+            $pageStartIndex = ($page-1) * $pageSize;
+            $index = 0;
+            foreach ($subcate['files'] as $id => $item) {
+                //翻页支持
+                if ($index < $pageStartIndex) {
+                    $index ++;
+                    continue;
+                }else if ($index >= $pageStartIndex + $pageSize) {
+                    break;
+                }
+
+                if (!empty($item['extension']) && in_array($item['extension'], $audioExts)) {
+                    array_push($audios, $item);
+                    $index ++;
+                }
+            }
+            return $this->renderJson(compact('page', 'pageSize', 'audios'));
         }
 
 
diff --git a/themes/beauty/controller/SiteController.php b/themes/beauty/controller/SiteController.php
index 7f491ea..eb442c7 100644
--- a/themes/beauty/controller/SiteController.php
+++ b/themes/beauty/controller/SiteController.php
@@ -152,6 +152,9 @@ Class SiteController extends Controller {
         $imgExts = !empty(FSC::$app['config']['supportedImageExts']) ? FSC::$app['config']['supportedImageExts'] : array('jpg', 'jpeg', 'png', 'webp', 'gif');
         $videoExts = !empty(FSC::$app['config']['supportedVideoExts']) ? FSC::$app['config']['supportedVideoExts'] : array('mp4', 'mov', 'm3u8');
 
+        //mp3支持
+        $audioExts = !empty(FSC::$app['config']['supportedAudioExts']) ? FSC::$app['config']['supportedAudioExts'] : array('mp3');
+
         $showType = $this->get('show', 'all');
         if ($showType == 'image') {
             $scanResults = array_filter($scanResults, function($item) {
@@ -163,6 +166,11 @@ Class SiteController extends Controller {
                 $videoExts = !empty(FSC::$app['config']['supportedVideoExts']) ? FSC::$app['config']['supportedVideoExts'] : array('mp4', 'mov', 'm3u8');
                 return !empty($item['extension']) && in_array($item['extension'], $videoExts);
             });
+        }else if ($showType == 'audio') {
+            $scanResults = array_filter($scanResults, function($item) {
+                $audioExts = !empty(FSC::$app['config']['supportedAudioExts']) ? FSC::$app['config']['supportedAudioExts'] : array('mp3');
+                return !empty($item['extension']) && in_array($item['extension'], $audioExts);
+            });
         }
 
 
@@ -213,8 +221,28 @@ Class SiteController extends Controller {
                 }
             }
             return $this->renderJson(compact('page', 'pageSize', 'videos'));
+        }else if ($dataType == 'audio') {
+            $audios = array();
+            $pageStartIndex = ($page-1) * $pageSize;
+            $index = 0;
+            foreach ($scanResults as $id => $item) {
+                //翻页支持
+                if ($index < $pageStartIndex) {
+                    $index ++;
+                    continue;
+                }else if ($index >= $pageStartIndex + $pageSize) {
+                    break;
+                }
+
+                if (!empty($item['extension']) && in_array($item['extension'], $audioExts)) {
+                    array_push($audios, $item);
+                    $index ++;
+                }
+            }
+            return $this->renderJson(compact('page', 'pageSize', 'audios'));
         }
 
+
         $isAdminIp = Common::isAdminIp($this->getUserIp());        //判断是否拥有管理权限
 
         $viewName = 'index';
diff --git a/themes/beauty/views/site/index.php b/themes/beauty/views/site/index.php
index 30eb544..65762dc 100644
--- a/themes/beauty/views/site/index.php
+++ b/themes/beauty/views/site/index.php
@@ -4,7 +4,8 @@ $total = 0;     //翻页支持
 
 $imgExts = !empty(FSC::$app['config']['supportedImageExts']) ? FSC::$app['config']['supportedImageExts'] : array('jpg', 'jpeg', 'png', 'webp', 'gif');
 $videoExts = !empty(FSC::$app['config']['supportedVideoExts']) ? FSC::$app['config']['supportedVideoExts'] : array('mp4', 'mov', 'm3u8');
-$supportedExts = array_merge($imgExts, $videoExts);
+$audioExts = !empty(FSC::$app['config']['supportedAudioExts']) ? FSC::$app['config']['supportedAudioExts'] : array('mp3');
+$supportedExts = array_merge($imgExts, $videoExts, $audioExts);
 
 //需密码授权的目录显示lock图标
 $authConfig = FSC::$app['config']['password_auth'];
@@ -266,24 +267,23 @@ eof;
         }
 
 
-        //显示图片、视频筛选链接
-        if ($total > 0) {
-            $arrShowTypes = array(
-                'all' => '所有',
-                'image' => '照片',
-                'video' => '视频',
-            );
+        //显示图片、视频、音乐筛选链接
+        $arrShowTypes = array(
+            'all' => '所有',
+            'image' => '照片',
+            'video' => '视频',
+            'audio' => '音乐',
+        );
 
-            echo '<ul class="nav nav-tabs ml-1">';
-            foreach ($arrShowTypes as $key => $title) {
-                $showLink = Html::getLinkByParams(FSC::$app['requestUrl'], array('show' => $key, 'page' => 1));
-                $activedClass = $key == $viewData['showType'] ? 'active' : '';
-                echo <<<eof
-                <li role="presentation" class="{$activedClass}"><a href="{$showLink}">{$title}</a></li>
+        echo '<ul class="nav nav-tabs ml-1">';
+        foreach ($arrShowTypes as $key => $title) {
+            $showLink = Html::getLinkByParams(FSC::$app['requestUrl'], array('show' => $key, 'page' => 1));
+            $activedClass = $key == $viewData['showType'] ? 'active' : '';
+            echo <<<eof
+            <li role="presentation" class="{$activedClass}"><a href="{$showLink}">{$title}</a></li>
 eof;
-            }
-            echo '</ul>';
         }
+        echo '</ul>';
 
 
         //空目录显示提示信息
@@ -398,6 +398,31 @@ eof;
         <span class="duration">00:00:00</span>
     </a>
 </div>
+eof;
+                }else if (in_array($file['extension'], $audioExts)) {       //输出音乐
+                    $title = !empty($file['title']) ? $file['title'] : $file['filename'];
+                    $videoUrl = urlencode($file['path']);
+                    $linkUrl = "/site/player?id={$file['id']}&pid={$file['pid']}&cid={$viewData['cacheDataId']}&url={$videoUrl}";
+                    if ($viewData['showType'] == 'video') {
+                        $linkUrl .= "&page={$viewData['page']}&limit={$viewData['pageSize']}";
+                    }
+
+                    echo <<<eof
+<div class="im_item bor_radius col-xs-6 col-sm-4 col-md-3 col-lg-2">
+    <a href="{$linkUrl}" target="_blank" class="bor_radius" title="{$title} - {$file['filename']}">
+        <img src="/img/beauty/video_snap.jpg" class="bor_radius im_img video-poster" id="poster_{$file['id']}"
+            data-video-id="{$file['id']}"
+            data-video-url="{$file['path']}"
+            alt="{$file['filename']}">
+        <div class="im_img_title">
+            <span class="right-bottom">
+                {$title}
+            </span>
+        </div>
+        <img src="/img/video-play.svg" class="playbtn hide" alt="video play button">
+        <span class="duration">00:00:00</span>
+    </a>
+</div>
 eof;
                 }
 
diff --git a/www/js/beauty.js b/www/js/beauty.js
index 4b88056..5389ea0 100644
--- a/www/js/beauty.js
+++ b/www/js/beauty.js
@@ -731,7 +731,7 @@ if ($('#my-player').length > 0 && typeof(videojs) != 'undefined') {
         }
 
         if (nextVideo) {
-            //TODO: 支持其它格式，fix /m3u8/这种路径
+            //支持其它格式，fix /m3u8/这种路径
             myPlayer.src({
                 src: nextVideo.path,
                 type: nextVideo.videoType