

<!--
*转载请保留版权-笒鬼鬼博客-www.cenguigui.cn
 * ░░░░░░░░░░░░░░░░░░░░░░░░▄░░
 * ░░░░░░░░░▐█░░░░░░░░░░░▄▀▒▌░
 * ░░░░░░░░▐▀▒█░░░░░░░░▄▀▒▒▒▐
 * ░░░░░░░▐▄▀▒▒▀▀▀▀▄▄▄▀▒▒▒▒▒▐
 * ░░░░░▄▄▀▒░▒▒▒▒▒▒▒▒▒█▒▒▄█▒▐
 * ░░░▄▀▒▒▒░░░▒▒▒░░░▒▒▒▀██▀▒▌
 * ░░▐▒▒▒▄▄▒▒▒▒░░░▒▒▒▒▒▒▒▀▄▒▒
 * ░░▌░░▌█▀▒▒▒▒▒▄▀█▄▒▒▒▒▒▒▒█▒▐
 * ░▐░░░▒▒▒▒▒▒▒▒▌██▀▒▒░░░▒▒▒▀▄
 * ░▌░▒▄██▄▒▒▒▒▒▒▒▒▒░░░░░░▒▒▒▒
 * ▀▒▀▐▄█▄█▌▄░▀▒▒░░░░░░░░░░▒▒▒
 * 小狗狗就这样默默地看着你~
 
////////////////////////////////////////////////////////////////////
//                                                                //
//                                                                //
//            版权所有：笒鬼鬼博客                                  //
//            官方网站：https://www.cenguigui.cn                      //
//                                                                //
///////////////////////////////////////////////////////////////////
-->

<!--
	…o888888o.o88888888o.
…8888888888888888888888888o.
…888::::888888888888888888888888o.
…88::::::::88888888888888888888888888o.
…o8:::::::::888::顶88888888888888888888888.
…8888:8::::::8:::::::::顶88888888888888888888.
…8888::::8888::::::::::::::::顶88888888888 ‘’’‘88
…8888:::888888888::::::::::::::::顶888888888 8
…88.88888888888888888:::::::::::::顶88888888888
…88…888888888888888888:::::::::::顶88888888888888
…88.888888888888888888888::::::::顶88888888888888888
…8…8888888888888888888888::::::顶88888888888888888888
…8888888888888888::88888:::::顶8888888888888888888888
…88888888888888888::::8888::::8888888888888888 ‘’’‘8888
…88888888888888888::::8888::::::88888::888888888 888
…88888888888888888::::888:::::顶::::::888888888 88
…888888888888888888::::88::::::顶:::::::::::::888888888 88
.8888888888888888888::::8::::::顶:::::::::::::顶888888888 88
888…8888888888::88::::8:::::顶:::8oo8::::::88888888888888 8
88…88888888888:::8:::::::::顶:::::::::::::88888888888888888
.8…8888888888888:::::::::::顶::“8888888”:::顶88888888888888888
…8888888888::888::::::::::顶:::::“8a8”::::顶88888888888888888888
.888888888:::::88:::::::::顶88::::::::::::顶88888888888888888888888
8888888888:::::8:::::::::顶88888::::::::顶888888888888888888888888888
888888888:::::8:::::::::顶8888888ooooo顶8888888888888888888888888888888
888888.顶::::::::::::::顶8888888888::::::顶8888888888888888 ‘’’‘888888888
8888…顶:::::::::::::::顶88888888888::::::顶8888888888888888 88888888
.888…顶::::::::::::::顶8888888888888:::::::顶888888888888888 888888
…888.顶:::::::::::::顶88888888888888888::::::顶8888888888888 88888
…88.顶:::::::::::::8888:88888888888888888:::::顶顶888888888 8888
…88.顶:::::::::::8888顶::88888::888888888888:::::顶顶88888 888
…8…顶::::::::::8888顶:::8888:::::88888888888::::::顶顶88 888
…8顶:::::::8888顶:::::888:::::::88:::8888888:::::::顶顶 88
…88顶:::::::8888顶::::::88:::::::::8:::::888888::::::::顶顶 88
…8888顶:::::888顶:::::::::88::::::::::顶::::8888::::::::::::顶 8
…88888:顶::::888顶::::::::::8:::::::::::顶::::888::::::::::::::顶
…88.888:顶:::888:顶::::::::::8::::::::::::顶::888::::::::::::::::顶
…8.88888顶:::88::顶::::::::::::::::::::::::顶:88::::::::::::::::::顶
…88888顶:::88::顶:::::::::::::::::::::::::顶88:::::::::::::::::::顶
…88888顶:::88::顶:::::::::::::::::::::::::顶:8::::::::::::::::::::顶
…888888顶::::8::顶::::::::::::::8888::::::::顶8::::::::::::8888:::::顶
…88888…顶:::8::顶顶:::::::::::888888:::::::顶::::::::::::888888::::顶
…8888…顶顶:::::顶顶::::::::::888888:::::::顶顶::::::::::888888::::顶
…8888…顶:::::::顶顶::::::::::8888:::::::顶顶顶::::::::::8888::::顶’’’’
…888…顶顶::::::顶顶顶:::::::::::::::::顶顶::顶::::::::::::::::顶’’’’
…88…顶::::::::顶顶顶顶:::::::::::顶顶顶:::顶顶:::::::::::::顶’’’’
…88…顶顶:::::::::顶顶顶顶顶顶顶顶顶顶:::::::顶顶顶顶
…88…顶顶::::::::::::顶顶顶顶顶顶顶::::::::::::顶顶
…88…8顶顶::::::::::::::::::::::::::::::::::::::::顶
…8…88顶顶::::::::::::::::::::::顶:::顶::::::::::顶
…888顶顶::::::::::::::::::顶顶::::::顶顶::::::顶
…88888顶顶:::::::::::::::顶顶顶:::::::顶顶:::::顶
…888888顶顶:::::::::::::顶顶顶:::::::::顶顶:::顶
…88888888顶顶:::::::::::顶顶顶:::::::::::顶:::顶
…88.8888888.顶::::::::顶顶顶::::::::::::::顶::顶
…8…888888…顶::::::顶顶:::::::::::::::::顶::顶
…888888…顶:::::顶:::::::::::::::::::顶::顶顶
…888888…顶::::顶::::::::::::::::::::::::顶顶
…888888…顶::::顶::::::::::::::::::::::::顶:顶
…88888…顶::::::::::::::8::::::::::::::::顶::顶
…88888…顶:::::::::::::::88::::::::::::::::顶::顶
…88888…顶::::::::::::::::8::::::::::::::::::顶::顶
…88888…顶:::::顶:::::::::::::::::::::顶::::::::顶::顶
…8888…顶:::::顶:::::::::::::::::::::::顶顶::::::顶::顶
…8888…顶:::::顶:::::::::::::::::::::::顶顶顶:::::::顶:顶
…888…顶:::::顶顶::::::::::::::::::::::顶顶顶::::::::顶:顶
…顶::::::顶顶:::::::::::::::::::::顶顶顶::::::::: 顶:顶
…顶:::::顶:::::::::::::::::::::::顶顶::::::::::::::顶:顶
…顶::::::::::::::::::::::::::::::顶::::::::::::::::::顶:顶
…顶::::::::::::::::::::::::::::::::::::::::::::::::::顶:顶
…顶::::::::顶:::::::::::::::::::::::::::::::::::::::::顶:顶
…顶::::::::顶:::::::::::::::::顶::::::::::::::::::::::顶:顶
…顶::::::::::顶::::::::::::::顶::::::::::::::::::::::::顶:顶顶
…顶:::::::::::顶8::::::::8:顶:::::::::::::::::::::::::顶:顶顶p
…顶::::::::::::888hole888顶:::::::::::::::::::::::::::顶:顶o
…顶:::::::::::::88888888顶:::::::::::::::::::::::::::顶:顶p
…顶::::::::::::::888888顶::::::::::::::::::::::::::::顶:顶
…顶:::::::::::::::88888顶:::::::::::::::::::::::::::顶:顶
…顶:::::::::::::::::88顶::::::::::::::::::::::::::::顶顶
…顶:::::::::::::::::::顶:::::::::::::::::::::::::::顶顶
…顶:::::::::::::::::::顶::::::::::::::::::::::::::顶顶
…顶:::::::::::::::::顶::::::::::::::::::::::::::顶顶
…顶:::::::::::::::::顶::::::::::::::::::::::::::顶
…顶:::::::::::::::顶::::::::::::::::::::::::::顶
…顶:::::::::::::::顶:::::::::::::::::::::::::顶
…顶:::::::::::::顶:::::::::::::::::::::::::顶
…顶:::::::::::::顶:::::::::::::::::::::::顶
…顶:::::::::::顶:::::::::::::::::::::::顶
…顶:::::::::::顶::::::::::::::::::::::顶
…顶:::::::::顶::::::::::::::::::::::顶
…顶:::::::::顶:::::::::::::::::::::顶
…顶:::::::顶:::::::::::::::::::::顶
…顶::::::顶::::::::::::::::::::顶
…顶:::::顶::::::::::::::::::::顶
…顶:::顶::::::::::::::::::::顶
…顶::顶::::::::::::::::::::顶
…顶:顶:::::::::::::::::::顶
…顶顶:::::::::::::::::::顶
…顶顶::::::::::::::::::顶
…顶顶:::::::::::::::::顶
…顶顶:::::顶::::::::顶顶
…顶顶::::顶顶:::::::顶顶
…顶顶::::::顶顶:::::顶顶
…顶顶::::::::::::::顶顶
…顶顶::::顶:::::::::顶顶
…顶顶::顶顶顶:::::::顶顶
…顶顶::顶顶顶:::::::顶顶
…顶顶:::顶顶::::::::::顶
…顶顶::顶顶::::::::::顶
…顶顶::顶顶:::::::::::顶
…顶顶:::顶::::::::::::顶
…顶顶:::::::::::::::::顶
…顶顶:::::::::::::::::顶
…顶顶::::::::::::::::::顶
…顶顶::::::::::::::::::顶
…顶顶::::::::::::::::::顶
…顶顶:::::::::::::::::顶
…顶顶:::::::::::::::::顶
…顶顶:::::::::::::::::顶
…顶顶:::::::::::::::::顶
…顶顶:::::::::::::::::顶
…顶顶:::::::::::::::顶
…顶顶:::::::::::::::顶
…顶顶:::::::::::::::顶
…顶顶::::::::::::::顶
…顶顶:::::::::::::顶
…顶顶:::::::::::::顶
…顶顶:::::::::::::顶
…顶顶::::::::::::顶
…顶顶::::::::::::顶
…顶顶:::::::::::顶
…顶顶::::::::::顶
…顶顶::::::::::顶
…顶顶::::::::顶
…顶顶::::::::顶
…顶顶::::::::顶
…顶顶:::::::顶
…顶顶:::::::顶
…顶顶::::::顶
…顶顶::::::顶
…顶顶::::::顶
…顶顶::::::顶
…顶顶::::::顶
…顶顶::::::顶
…顶顶:::::::顶
…顶:顶::::::::顶
…顶:顶:::::::::顶
…顶:顶::::::::::顶
…顶:顶:::::::::::顶
…顶:顶::::::::::::顶
…顶:顶:::::::::::::顶
…顶:顶::::::::::::::顶
…顶顶:::::::::::::::::顶
…顶顶::::::::::::::::顶
…顶顶顶:::::::::顶顶
…顶顶::顶::::顶顶
…顶顶顶顶顶顶顶
…顶顶顶顶顶
-->
<!DOCTYPE html>
<html>
<head>
  <title>笒鬼鬼音乐盒</title>
  <meta charset="UTF-8">
  <!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> -->
  <meta http-equiv="Content-Security-Policy" content="media-src http:;">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="keywords" content="笒鬼鬼,音乐播放器,VIP音乐解析,xf音乐盒">
  <meta name="description" content="在线音乐播放器，免费音乐解析">
  <link rel="shortcut icon" href="https://www.cenguigui.cn/favicon.ico" type="image/x-icon">
  <script src="./rely/js/plyr.js"></script>
  <script src="./rely/js/clipboard.min.js"></script>
  <!-- 加载相关 CSS 文件 -->
  <link rel="stylesheet" href="./rely/css/plyr.css">
  <link rel="stylesheet" href="./css/main.css">
  <link rel="stylesheet" href="./css/loadding.css">
  <link rel="stylesheet" href="https://cdn.staticfile.net/font-awesome/4.7.0/css/font-awesome.css">
</head>

<body>
  <!-- 侧边栏 -->
  <div class="sidebar">
    <div id="sidebar_op">
      <div onclick="playPageOpenOrClose()"><img class="sidebar-icon" src="./img/ui_icon/椰子树-1.png">沉浸播放模式<br><span class="explainSpan">在首页点击歌曲封面也能进入沉浸播放</span></div>
      <div onclick="searchSourceChange()"><img class="sidebar-icon" src="./img/ui_icon/箭头_左右切换_o.png">搜索曲库: <span id="searchSource"></span><span class="explainSpan">(点击切换)<br>仅搜索区分曲库，列表曲库可混合</span></div>
      <!--<div onclick="wyySongListRecommend()"><img class="sidebar-icon" src="./img/ui_icon/推荐-产品详情.png">歌单推荐<br><span class="explainSpan">网易云/热门/分类</span></div>-->
      <div onclick="jumpToSetupOnclick()"><img class="sidebar-icon_single-row" src="./img/ui_icon/setting.png">设置</div>
      <!-- <div id="huabing"></div> -->
    </div>
    <div id="sidebar_op_wyySongList">
      <button class="return_sidebar_btn" onclick="returnToSidebarOnclick()"><i class="fa fa-angle-left" aria-hidden="true"></i></button>
      <span class="sidebar_op_page_title">歌单推荐</span>
      <div id="songListSearchBtn" onclick="songListSearch()"><i class="fa fa-search"></i></div>
      <!-- <p style="position: absolute; top: 50px; left: 50%; transform: translate(-50%);" >即将开发</p> -->
      <div id="songListGridDiv">
        <select id="songListSelect" onchange="selectInit()">
          <option value="kw" disabled>酷我</option>
          <option value="wyy">网易云</option>
        </select>
        <select id="categoriesSelect1" onchange="categoriesSelect()"></select>
        <select id="categoriesSelect2" onchange="subCategoriesSelect()"></select>
        <div class="grid-container" id="gridContainer"></div>
        <div class="loader"></div>
      </div>
      
    </div>
  </div>
  <div class="sidebar2">
    <div>
      <button id="play_page_close_btn" onclick="playPageOpenOrClose()"><i class="fa fa-angle-right"
          aria-hidden="true"></i></button>
      <!-- <button id="share_btn" onclick="captureElement()"><i class="fa fa-share-square-o" aria-hidden="true"></i></button> -->
    </div>
    <div>
      <h3 id="sidebarSongName">笒鬼鬼音乐盒</h3>
      <h5 id="sidebarSingerName">VIP音乐解析</h5>
    </div>
    <div>
      <img id="cover2" width="40%" src="https://q2.qlogo.cn/headimg_dl?dst_uin=2963246343&spec=640" />
    </div>
    <div id="sidebarLrc">
      <div style="height: 30%;width: 100%;"></div>
      <div id="lrc_p">
      </div>
      <div style="height: 30%;width: 100%;"></div>
    </div>
      <div id="progressBar">
        <span id="time-label">00:00</span>
        <input type="range" min="0" max="100" value="0" step="0.1" id="progress" onchange="progressOnchange()">
        <span id="duration">00:00</span>
      </div>
    <div id="PlayControl">
      <div><button class="playBtn" title="" onclick="likeOnclick();"><i class="fa fa-heart"></i></button></div>
      <div><button class="PlayControlBtn" title="" onclick="nextPlay('pre');">
          <i class="fa fa-step-backward"></i>
        </button></div>
      <div><button class="PlayControlBtn" id="PlayStatus" title="" onclick="playOrPauseOnclick()"><i
            class="fa fa-play"></i></button></div>
      <div><button class="PlayControlBtn" title="" onclick="nextPlay('next');"><i
            class="fa fa-step-forward"></i></button></div>
      <div><button class="playBtn" title="" onclick="playListBtnOnclick()"><i class="fa fa-list"></i></button></div>
    </div>
    <div id="comment"><!-- 评论 --></div>
    <div class="play_page_song_list">
      <div id="play_page_song_list"></div>
    </div>
  </div>
  <div class="search">
    <div class="menu"><button title="" onclick="menu_onclick()"><i class="fa fa-bars"></i></button></div>
    <div class="search_box"><input id="search_box" type="text" placeholder="请输入歌曲/歌手" value=""></div>
    <div class="search_btn"><button id="search_btn" title="" onclick="search_onclick()"><i
          class="fa fa-search"></i></button>
    </div>
  </div>
  <div class="music_box" id="music_box" aria-hidden="true">
    <div class="img" onclick="playPageOpenOrClose()"><img id="cover" width="88px"
        src="https://q2.qlogo.cn/headimg_dl?dst_uin=2963246343&spec=640" />
    </div>
    <div class="song">
      <span id="songName">歌曲</span>
      <span>-</span>
      <span id="singerName">歌手</span>
    </div>
    <div class="lrc_box">
      <p id="lrc1" class="lrc">笒鬼鬼音乐盒</p>
      <p id="lrc2" class="clear">VIP音乐解析</p>
    </div>
    <!-- 添加一个 <audio> 标签 -->
    <div style="display: flex; width: 100%;">
      <audio controls id="music">
        <source src="https://ali.mu-jie.cc/static/null.mp3">
      </audio>
      <button class="playBtn" onclick="downloadOnclick();"><i class="fa fa-arrow-down"></i></button>
      <button class="playBtn" onclick="likeOnclick();"><i class="fa fa-heart"></i></button>
      <button class="playBtn" onclick="nextPlay('pre');"><i class="fa fa-fast-backward"></i></button>
      <button class="playBtn" onclick="playbackModeOnclick();" id="loopBtn"></button>
      <button class="playBtn" onclick="nextPlay('next');"><i class="fa far fa-fast-forward"></i></button>
    </div>
  </div>
  <div class="searchORlist">
    <div class="btn_box">
      <div id="opBar"></div>
      <button id="listBtn" title="" onclick="listBtn_onclick()">列表</button>
      <button id="resultBtn" title="" onclick="resultBtn_onclick()">搜索</button>
      <button id="boxBtn" title="" onclick="boxBtn_onclick()">音乐盒</button>
      <button id="setBtn" title="" onclick="setBtn_onclick()">设置</button>
    </div>
    <div class="songList"><iframe class="iframe" id="iframe" src="./songList.html"></iframe></div>
  </div>
  <div class="footnote">
    <div style="height: 12px;"></div>
    <footer>Copyright © 2023
      <a href="https://mu-jie.cc" target="_blank" rel="noopener noreferrer">笒鬼鬼</a>
      | 笒鬼鬼音乐盒 v<span id="version_span"></span>
    </footer>
  </div>
  <script src="./js/Popup.js"></script>
  <script src="./js/main.js"></script>
  <script src="./rely/js/opensug.js"></script>
  <script src="./js/sug.js"></script>
</body>

</html>