皮肤制作

skins/myskin/
├── skin.xml    （必需）布局结构：窗口位置 + 子元素坐标
├── skin.css    （必需）视觉样式：按钮、歌词、进度条等
└── skin.js     （可选）自定义逻辑：通过 hooks 接管播放器事件

xywh="0C, 50R, 600, 46"
       ↑   ↑    ↑    ↑
       x   y    w    h

x = 0C  → 水平居中
y = 50R → 距底部 50px
w = 600 → 宽 600px
h = 46  → 高 46px

<skin name="myskin" version="1.0" author="你的名字">

  <!-- ① media 窗口：铺满全屏，放视频/封面/频谱 -->
  <media xywh="0, 0, 100P, 100P">
    <video xywh="0, 0, 100P, 100P" />
  </media>

  <!-- ② lrc 窗口：底部居中，高 150px -->
  <lrc xywh="0, 200R, 100P, 150">
    <text xywh="0, 0, 100P, 100P"
          align="center" size="24" color="#888,#fff" leading="36">
    </text>
  </lrc>

  <!-- ③ console 窗口：水平居中，距底 50px -->
  <console xywh="0C, 50R, 600, 46">
    <bt_play  xywh="0,   0,  46, 46"  tips="播放/暂停" />
    <bt_prev  xywh="54,  11, 24, 24"  tips="上一首" />
    <bt_next  xywh="82,  11, 24, 24"  tips="下一首" />
    <title    xywh="116, 11, 200, 24" />
    <progress xywh="320, 20, 200, 8"  tips="进度" />
    <time     xywh="528, 15, 60, 16"  />
    <bt_mute  xywh="594, 13, 20, 20"  tips="静音" />
    <volume   xywh="620, 17, 70, 8"   tips="音量" />
    <bt_list  xywh="700, 13, 24, 24"  tips="列表" />
  </console>

  <!-- ④ list 窗口：右侧，上下留 50px，默认隐藏 -->
  <list xywh="20R, 50, 260, 50B" display="0">
    <tree xywh="0, 0, 100P, 100P" />
  </list>

  <!-- ⑤ option 窗口：设置面板 -->
  <option xywh="20R, 50, 260, 50B" display="0">
    <pane xywh="0, 0, 100P, 100P" />
  </option>

</skin>

/* 窗口：透明背景，无边框 */
.lmp-window { background: transparent; border: none; }

/* 按钮：圆形半透明黑底 */
.lmp-btn {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s;
}
.lmp-btn:hover { background: rgba(0, 0, 0, 0.8); }
.lmp-bt_play { width: 46px; height: 46px; }

/* 歌词行 */
.lmp-lrc-line {
  font-size: 22px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  line-height: 1.5;
  padding: 4px 0;
  transition: all 0.3s;
}
.lmp-lrc-line.lmp-active {
  font-size: 28px;
  color: #fff;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

/* 进度条 */
.lmp-progress-track {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}
.lmp-progress-loaded { background: rgba(255, 255, 255, 0.4); }
.lmp-progress-played { background: #0969da; }

/* 播放列表 */
.lmp-tree {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 13px;
  border-radius: 8px;
  padding: 8px;
}

/* 加载动画 */
.lmp-loading {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
}

(function () {
    var hooks = LMP34.hooks;
    var NAMES = hooks.NAMES;

    // 播放状态变化：切换按钮图标
    hooks.addAction(NAMES.MEDIA_STATE, function (state) {
        var btn = document.querySelector('.lmp-bt_play');
        if (!btn) return;
        // state: 1=播放 2=暂停 3=停止
        btn.textContent = (state === 1) ? '❚❚' : '▶';
    });

    // 歌曲切换：控制台标题
    hooks.addAction(NAMES.ITEM_CHANGE, function (item) {
        var title = document.querySelector('.lmp-title');
        if (title && item) title.textContent = item.title || item.label || '';
    });

    // 皮肤初始化完成
    hooks.addAction(NAMES.SKIN_READY, function () {
        console.log('skin loaded');
    });

})();

LMP34.init({
    container: 'lmp34-player',
    skins: 'skins/myskin',          // 单个皮肤目录
    // 或多个：skins: 'skins/default,skins/qqplayer,skins/myskin'
    // 默认选第 3 个：skin_id: 3
    lists: 'list.xml',
    name: '我的播放器',
    url: ''
});