WPwebplayer/index.html at main · shumuuu/WPwebplayer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WPMusicPlayer示例界面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cnceb-imgbed@2.0.5/friendlinks.css">
    <link rel="stylesheet" href="min-css.css">
</head>
<body>
    <div class="container">
          <h1><a href="https://github.com/yunsen2025/WPwebplayer">WPwebplayer</a>体验界面</h1>
          <h3>您可以在此界面快捷体验WPwebplayer</h3>
          <h3>关于本项目</h3>
            <p>本项目是一个简单的HTML音乐播放器，您可以在此页面上体验音乐播放功能。</p>
            <p>如果您对本项目感兴趣，请前往下方链接了解更多</p>
        <h3>当前参数</h3>
        <style>
  table {
    border-collapse: collapse;
    width: 100%;
    font-family: sans-serif;
  }
  th, td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
  }
  th {
    background-color: #f4f4f4;
  }
</style>
<table border="1">
  <tr>
    <th>参数名</th>
    <th>状态</th>
  </tr>
  <tr>
    <td>autoplay（自动播放）</td>
    <td>true</td>
  </tr>
  <tr>
    <td>loop（循环播放）</td>
    <td>true</td>
  </tr>
    <tr>
        <td>volume（音量 0-1）</td>
        <td>0.3</td>
    </tr>
    <tr>
        <td>fixed（固定样式）</td>
        <td>true</td>
    </tr>
    <tr>
        <td>mini（迷你样式）</td>
        <td>true</td>
    </tr>
</table>
          <div class="friend-links">
              <a href="https://github.com/yunsen2025/WPwebplayer" class="card" target="_blank">
                  <svg viewBox="0 0 24 24" fill="currentColor" class="avatar" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 1C5.923 1 1 5.923 1 12c0 4.867 3.149 8.979 7.521 10.436.55.096.756-.233.756-.522 0-.262-.013-1.128-.013-2.049-2.764.509-3.479-.674-3.699-1.292-.124-.317-.66-1.293-1.127-1.554-.385-.207-.936-.715-.014-.729.866-.014 1.485.797 1.691 1.128.99 1.663 2.571 1.196 3.204.907.096-.715.385-1.196.701-1.471-2.448-.275-5.005-1.224-5.005-5.432 0-1.196.426-2.186 1.128-2.956-.111-.275-.496-1.402.11-2.915 0 0 .921-.288 3.024 1.128a10.193 10.193 0 0 1 2.75-.371c.936 0 1.871.123 2.75.371 2.104-1.43 3.025-1.128 3.025-1.128.605 1.513.221 2.64.111 2.915.701.77 1.127 1.747 1.127 2.956 0 4.222-2.571 5.157-5.019 5.432.399.344.743 1.004.743 2.035 0 1.471-.014 2.654-.014 3.025 0 .289.206.632.756.522C19.851 20.979 23 16.854 23 12c0-6.077-4.922-11-11-11Z"/></svg>
                  <div class="info">
                      <div class="name">项目仓库</div>
                      <div class="desc">Github代码仓库</div>
                  </div>
              </a>

              <a href="https://www.yunsen2025.top/023-wpmusicplayer" class="card" target="_blank">
                  <img src="https://imgbed.yunsen2025.top/file/1752336341373.png" class="avatar" alt="头像">
                  <div class="info">
                      <div class="name">项目主页（博客）</div>
                      <div class="desc">聊聊此项目与详细的使用方法</div>
                  </div>
              </a>
              <a href="https://www.yunsen2025.top" class="card" target="_blank">
                  <img src="https://img.alicdn.com/bao/uploaded/i4/O1CN01TWOpM42DSyY5nC0hM_!!0-mtopupload.jpg" class="avatar" alt="头像">
                  <div class="info">
                      <div class="name">开发者博客</div>
                      <div class="desc">Yunsen2025的小窝</div>
                  </div>
              </a>
<script src="min-js.js"></script>

  <wp-music-player
    src="https://imgbed.112601.xyz/file/1752511502367.mp3"
    title="盛夏与蝉鸣2.0"
    artist="Hea2t"
    cover="https://imgbed.112601.xyz/file/1752511476222.jpg"
    autoplay="true"
    loop="true"
    volume="0.3"
    fixed="true"
    mini="true"
    theme="#ff6b6b">
  </wp-music-player>
</body>
</html>