马黑黑 发表于 2023-6-27 11:39

巫娜-茶道

本帖最后由 马黑黑 于 2023-6-27 12:03 编辑 <br /><br /><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><br>巫娜，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>

醉美水芙蓉 发表于 2023-6-27 11:44

马黑黑 发表于 2023-6-27 11:47

本帖最后由 马黑黑 于 2023-6-27 12:03 编辑

帖子代码
<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>


马黑黑 发表于 2023-6-27 11:55

本帖最后由 马黑黑 于 2023-6-27 18:11 编辑

一、关于配置颜色等

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

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

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

二、关于音乐地址：

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

马黑黑 发表于 2023-6-27 11:56

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

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

樵歌 发表于 2023-6-27 13:55

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

红影 发表于 2023-6-27 14:09

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

红影 发表于 2023-6-27 14:11

这个还带播放时间的呢，真好{:4_199:}

醉美水芙蓉 发表于 2023-6-27 17:05

马黑黑 发表于 2023-6-27 18:06

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

要想弄进度条也成

马黑黑 发表于 2023-6-27 18:07

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

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

马黑黑 发表于 2023-6-27 18:07

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

{:4_181:}

马黑黑 发表于 2023-6-27 18:08

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

边框小巧玲珑也挺不错

千羽 发表于 2023-6-27 19:48

黑黑老师太厉害了，俺收藏了。谢谢{:4_187:}

焱鑫磊 发表于 2023-6-27 20:20

太棒了！赞！！！{:4_187:}{:4_187:}{:4_187:}

马黑黑 发表于 2023-6-27 20:21

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

{:4_191:}

马黑黑 发表于 2023-6-27 20:21

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

晚上好

红影 发表于 2023-6-27 20:41

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

这个吧播放时间放在边框上也很巧妙。{:4_187:}

红影 发表于 2023-6-27 20:42

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

这个做专辑的时候特别有用{:4_187:}

小文 发表于 2023-6-27 20:56

真好真好！
页: [1] 2 3 4 5 6 7 8 9 10
查看完整版本: 巫娜-茶道