巫娜-茶道

马黑黑

巫娜，1979年生于重庆，古琴女艺术家，毕业于中央音乐学院，师从著名古琴演奏家、教育家李祥霆先生，成为中央音乐学院古琴演奏专业的第一位研究生，2016年创办北京缦客教育科技有限公司。

1997年3月在台北国家音乐厅作了古琴独奏演出，获得成功。代表作《莲心不染》《暮良文王》《天禅》等。

巫娜的立场：古琴不古。只有回到古琴本身的人才会豁然开朗，古琴是鲜活的语言，不是陈词滥调。当然，也需要警惕对鲜活的滥用。

巫娜的态度：古琴不是工具，是古琴艺术家身体的一部分。古琴是内心存在，是心之花，是法则明快的茶园，是标新立异的苗圃，不是手指嫌贫爱富丢盔弃甲的竞技场。

巫娜的格调：演奏古琴，是为了帮助我们更好的生活，让内心像流水一样自由。

巫娜的趣味：不拘新旧，不拘东西，个性比共性庄严，品质比名气高贵。

资源来自网络 2023年6月27日

马黑黑

帖子代码

1. <style>
   
2. #mydiv {
   
3.         margin: 30px auto;
   
4.         padding: 20px 10px;
   
5.         width: 700px;
   
6.         min-height: 400px;
   
7.         border-radius: 12px;
   
8.         border: 2px solid var(--fColor);
   
9.         color: var(--fColor);
   
10.         background: var(--bgMain);
    
11.         position: relative;
    
12.         --bgMain: linear-gradient(snow,silver,snow);
    
13.         --bgTitle: lightblue;
    
14.         --fColor: navy;
    
15.         --btnWidth: 50px;
    
16.         --state: paused;
    
17. }
    
18. #mydiv::before, #mydiv::after {
    
19.         position: absolute;
    
20.         padding: 0 20px;
    
21.         font: bold 24px / 36px sans-serif;
    
22.         text-shadow: 1px 1px 2px #111;
    
23.         border: inherit;
    
24.         border-radius: inherit;
    
25.         background: var(--bgTitle);
    
26. }
    
27. 
    
28. #mydiv::before {
    
29.         content: '巫娜 - 『茶道』专辑';
    
30.         left: 18px;
    
31.         top: -18px;
    
32. }
    
33. #mydiv::after {
    
34.         content: attr(data-tt);
    
35.         position: absolute;
    
36.         left: 50%;
    
37.         bottom: -14px;
    
38.         transform: translateX(-50%);
    
39.         font-size: 14px;
    
40.         line-height: 20px;
    
41. }
    
42. #mydiv p { padding: 8px 0; font-size: 16px; }
    
43. #mplayer {
    
44.         position: absolute;
    
45.         width: var(--btnWidth);
    
46.         height: var(--btnWidth);
    
47.         background: conic-gradient(var(--fColor),var(--bgTitle),var(--fColor),var(--bgTitle));
    
48.         border-radius: 50%;
    
49.         bottom: 20px;
    
50.         left: calc(50% - var(--btnWidth) / 2);
    
51.         cursor: pointer;
    
52.         pointer-events: auto;
    
53.         animation: rot 5s infinite linear var(--state);
    
54. }
    
55. #mlist { margin: 20px; column-count: 3; column-rule: 2px solid transparent; column-gap: 100px; column-fill: balance; }
    
56. #mlist > span { display: block; width: fit-content; }
    
57. #mlist a { text-decoration: none; }
    
58. #mlist > span > a:hover { cursor: pointer; color: red; }
    
59. .lighten > a { color: red; }
    
60. .normal > a { color: var(--fColor); }
    
61. 
    
62. @keyframes rot { to { transform: rotate(360deg); } }
    
63. </style>
    
64. 
    
65. <div id="mydiv" data-tt="00:00/00:00">
    
66.         <p>巫娜，1979年生于重庆，古琴女艺术家，毕业于中央音乐学院，师从著名古琴演奏家、教育家李祥霆先生，成为中央音乐学院古琴演奏专业的第一位研究生，2016年创办北京缦客教育科技有限公司。</p>
    
67.         <p>1997年3月在台北国家音乐厅作了古琴独奏演出，获得成功。代表作《莲心不染》《暮良文王》《天禅》等。</p>
    
68.         <p>巫娜的立场：古琴不古。只有回到古琴本身的人才会豁然开朗，古琴是鲜活的语言，不是陈词滥调。当然，也需要警惕对鲜活的滥用。</p>
    
69.         <p>巫娜的态度：古琴不是工具，是古琴艺术家身体的一部分。古琴是内心存在，是心之花，是法则明快的茶园，是标新立异的苗圃，不是手指嫌贫爱富丢盔弃甲的竞技场。</p>
    
70.         <p>巫娜的格调：演奏古琴，是为了帮助我们更好的生活，让内心像流水一样自由。</p>
    
71.         <p>巫娜的趣味：不拘新旧，不拘东西，个性比共性庄严，品质比名气高贵。</p>
    
72.         <div id="mlist"></div>
    
73.         <div id="mplayer"></div>
    
74.         <p style="text-align: right">资源来自网络 2023年6月27日</p>
    
75. </div>
    
76. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=501214980" autoplay="autoplay"></audio>
    
77. 
    
78. <script>
    
79. (function () {
    
80.         let spans = [];
    
81.         let ypAr = [['501214980','虚空望月'],['501220957','琴音茶语'],['501214981','叶水相逢'],['501220958','茶禅'],['501214982','谷水怀香'],['501220959','方寸一席'],['501220960','茶乐花香'],['501214983','茶香竹林'],['501214984','心似莲花开'],['501214985','一具一梦幻']];
    
82.         ypAr.forEach((item) => item[0] = 'https://music.163.com/song/media/outer/url?id=' + item[0]);
    
83.         ypAr.forEach((item, key) => {let sp = document.createElement('span');sp.className = 'normal';sp.innerHTML = `${key+1} <a onclick="javascript:mplay(${key})">${ypAr[key][1]}</a>`;mlist.appendChild(sp);spans.push(sp);});
    
84.         let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
    
85.         mplay = (idx, flag = 0) => {aud.src = ypAr[idx][0];if (flag >= 0) aud.play();spans[lastIdx].className = 'normal';spans[idx].className = 'lighten';lastIdx = idx;}
    
86.         let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
87.         aud.addEventListener('play', mState, false);
    
88.         aud.addEventListener('pause', mState, false);
    
89.         aud.addEventListener('ended', () => mplay(Math.floor(Math.random() * ypAr.length)));
    
90.         aud.addEventListener('timeupdate', () => mydiv.dataset.tt = toMin(aud.currentTime) + ' / ' + toMin(aud.duration));
    
91.         mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
    
92.         let lastIdx = Math.floor(Math.random() * ypAr.length);
    
93.         mplay(lastIdx);
    
94. })();
    
95. </script>
    

复制代码

马黑黑

一、关于配置颜色等

一般来说，改动一下 CSS 变量即可——

        --bgMain: linear-gradient(snow,silver,snow); /* 帖子主体背景颜色 */
        --bgTitle: lightblue; /* 帖子标题伪元素背景色 */
        --fColor: navy; /* 文本颜色 */
        --btnWidth: 50px; /* 播放器尺寸 */

想修改其他细节的颜色，请对应相应CSS选择器和属性完成操作。

二、关于音乐地址：

第 81 行的数组里，若提供了完整的URL（包含有前缀和后缀），则第 82 行应删掉。82行在本帖的作用是给音乐地址加统一的前缀。

马黑黑

醉美水芙蓉 发表于 2023-6-27 11:44
老师这个太妙了！可以多首曲子！

这个适合发音乐专辑。之前我们也有过专辑帖，现在这个样式与实现机制略有变化。

樵歌

对发音乐的特别有用。如小辣椒芙蓉焱美女梦美女们，貌似为她们量身订制的

红影

这个好，虽然仍是边框的形式，内容却是完全变了。能够播放这么多音乐，太好了

红影

这个还带播放时间的呢，真好

马黑黑

红影 发表于 2023-6-27 14:11
这个还带播放时间的呢，真好

要想弄进度条也成

马黑黑

樵歌 发表于 2023-6-27 13:55
对发音乐的特别有用。如小辣椒芙蓉焱美女梦美女们，貌似为她们量身订制的

这个本意是为文本帖做的，我先拿来放个专辑

马黑黑

醉美水芙蓉 发表于 2023-6-27 17:05
樵歌也可以的，它也可以只播放一首歌曲的！

马黑黑

红影 发表于 2023-6-27 14:09
这个好，虽然仍是边框的形式，内容却是完全变了。能够播放这么多音乐，太好了

边框小巧玲珑也挺不错

千羽

黑黑老师太厉害了，俺收藏了。谢谢

焱鑫磊

太棒了！赞！！！

马黑黑

焱鑫磊 发表于 2023-6-27 20:20
太棒了！赞！！！

马黑黑

千羽 发表于 2023-6-27 19:48
黑黑老师太厉害了，俺收藏了。谢谢

晚上好

红影

马黑黑 发表于 2023-6-27 18:06
要想弄进度条也成

这个吧播放时间放在边框上也很巧妙。

红影

马黑黑 发表于 2023-6-27 18:08
边框小巧玲珑也挺不错

这个做专辑的时候特别有用

小文

真好真好！