《茶道》巫娜
<style>#mydiv {
margin: 30px auto;
padding: 20px 10px;
width: 700px;
min-height: 400px;
border-radius: 12px;
border: 2px solid var(--fColor);
color: var(--fColor);
background: var(--bgMain);
position: relative;
--bgMain: linear-gradient(snow,silver,snow);
--bgTitle: lightblue;
--fColor: navy;
--btnWidth: 50px;
--state: paused;
}
#mydiv::before, #mydiv::after {
position: absolute;
padding: 0 20px;
font: bold 24px / 36px sans-serif;
text-shadow: 1px 1px 2px #111;
border: inherit;
border-radius: inherit;
background: var(--bgTitle);
}
#mydiv::before {
content: '巫娜 - 『茶道』专辑';
left: 18px;
top: -18px;
}
#mydiv::after {
content: attr(data-tt);
position: absolute;
left: 50%;
bottom: -14px;
transform: translateX(-50%);
font-size: 14px;
line-height: 20px;
}
#mydiv p { padding: 8px 0; font-size: 16px; }
#mplayer {
position: absolute;
width: var(--btnWidth);
height: var(--btnWidth);
background: conic-gradient(var(--fColor),var(--bgTitle),var(--fColor),var(--bgTitle));
border-radius: 50%;
bottom: 20px;
left: calc(50% - var(--btnWidth) / 2);
cursor: pointer;
pointer-events: auto;
animation: rot 5s infinite linear var(--state);
}
#mlist { margin: 20px; column-count: 3; column-rule: 2px solid transparent; column-gap: 100px; column-fill: balance; }
#mlist > span { display: block; width: fit-content; }
#mlist a { text-decoration: none; }
#mlist > span > a:hover { cursor: pointer; color: red; }
.lighten > a { color: red; }
.normal > a { color: var(--fColor); }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="mydiv" data-tt="00:00/00:00">
<p>巫娜，1979年生于重庆，古琴女艺术家，毕业于中央音乐学院，师从著名古琴演奏家、教育家李祥霆先生，成为中央音乐学院古琴演奏专业的第一位研究生，2016年创办北京缦客教育科技有限公司。</p>
<p>1997年3月在台北国家音乐厅作了古琴独奏演出，获得成功。代表作《莲心不染》《暮良文王》《天禅》等。</p>
<p>巫娜的立场：古琴不古。只有回到古琴本身的人才会豁然开朗，古琴是鲜活的语言，不是陈词滥调。当然，也需要警惕对鲜活的滥用。</p>
<p>巫娜的态度：古琴不是工具，是古琴艺术家身体的一部分。古琴是内心存在，是心之花，是法则明快的茶园，是标新立异的苗圃，不是手指嫌贫爱富丢盔弃甲的竞技场。</p>
<p>巫娜的格调：演奏古琴，是为了帮助我们更好的生活，让内心像流水一样自由。</p>
<p>巫娜的趣味：不拘新旧，不拘东西，个性比共性庄严，品质比名气高贵。</p>
<div id="mlist"></div>
<div id="mplayer"></div>
<p style="text-align: right">资源来自网络 2023年6月27日</p>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=501214980" autoplay="autoplay"></audio>
<script>
(function () {
let spans = [];
let ypAr = [['501214980','虚空望月'],['501220957','琴音茶语'],['501214981','叶水相逢'],['501220958','茶禅'],['501214982','谷水怀香'],['501220959','方寸一席'],['501220960','茶乐花香'],['501214983','茶香竹林'],['501214984','心似莲花开'],['501214985','一具一梦幻']];
ypAr.forEach((item) => item = 'https://music.163.com/song/media/outer/url?id=' + item);
ypAr.forEach((item, key) => {let sp = document.createElement('span');sp.className = 'normal';sp.innerHTML = `${key+1} <a onclick="javascript:mplay(${key})">${ypAr}</a>`;mlist.appendChild(sp);spans.push(sp);});
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;};
mplay = (idx, flag = 0) => {aud.src = ypAr;if (flag >= 0) aud.play();spans.className = 'normal';spans.className = 'lighten';lastIdx = idx;}
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('ended', () => mplay(Math.floor(Math.random() * ypAr.length)));
aud.addEventListener('timeupdate', () => mydiv.dataset.tt = toMin(aud.currentTime) + ' / ' + toMin(aud.duration));
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
let lastIdx = Math.floor(Math.random() * ypAr.length);
mplay(lastIdx);
})();
</script>
欣赏一下，谢谢。 晚上好！{:1_292:} 帖子制作的漂亮，音乐好听 支持点赞{:1_293:} 蓝魔 发表于 2023-6-27 21:48
欣赏一下，谢谢。
问好！{:1_292:} 久久. 发表于 2023-6-27 22:44
帖子制作的漂亮，音乐好听
朋友晚上好！:handshake 久久. 发表于 2023-6-27 22:44
支持点赞
谢谢朋友！{:1_292:} 问好！前排欣赏 精彩，好听
页:
[1]
2