红影 发表于 2023-7-1 14:03

TO绿叶清舟（学习黑黑多首乐曲播放）


<style>
#papa {
      margin: 0px 0 0 calc(50% - 593px);
      width: 1024px;
      height: 630px;
      background: gray url('https://pic.imgdb.cn/item/611351cc5132923bf8ef79cb.jpg') no-repeat center/cover;
      box-shadow: 3px 3px 20px #000;
      position: relative;
      border-radius: 12px;
}
#mydiv {
      position: absolute;
      left: 60px; top: 178px;
      padding: 20px 10px;
      width:270px;
      height:206px;
      border-radius:25px 15px;
      box-shadow: 0px 0px 2px #eaeaea;
      color: navy;
      background: #eaeaea;
      --state: paused;
}
#mydiv::before {
      content: attr(data-tt);
      position: absolute;
      left: 86px;
      bottom: -6px;
      padding: 0 20px;
      font-size: 14px;
      line-height: 20px;
}
#mydiv p { padding: 8px 0; font-size: 16px; }
#mplayer {
      position: absolute;
      width: 58px;
      height: 58px;
      background: conic-gradient(DimGray,LightGrey,DimGray,LightGrey);
      border-radius: 50%;
      bottom: -76px;
      left: 116px;
      cursor: pointer;
      pointer-events: auto;
      animation: rot 5s infinite linear var(--state);
}
#mlist { margin: 20px; column-count: 2; column-rule: 2px solid transparent; column-gap: 30px; 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:navy; }
.wenzi { position: absolute; left:156px; bottom: 240px; color: navy; font: italic normal 12px/20px 'FangSong',serif; opacity: .85; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<div id="mydiv" data-tt="00:00/00:00">
      <div id="mlist" ></div>
      <div id="mplayer"></div></div>
      <div class="wenzi">——李志辉作品精选</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=444323047" autoplay="autoplay"></audio>
<script>
(function () {
      let spans = [];
      let ypAr = [['444323047','步步莲花'],['30413344','水墨兰亭'],['131149','紫禁花园'],['522467506','云门'],['522468278','一拂尘烟'],['30413351','禅茶人生'],['131245','平遥古韵'],['522467321','天地行云'],['30413352','云水潇湘'],['30413343','太极幻影']];
      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>${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-7-1 14:06

@绿叶清舟用清舟的图图学着做了个黑黑的多首歌曲播放，想告诉清舟用这法子可以随便找自己喜欢的歌曲或乐曲集中在一个帖子里，不用去找专辑了，自己做的就是自己喜欢的“专辑”{:4_173:}

红影 发表于 2023-7-1 14:09

这个帖子里的进度条是原图附带的示意图效果，并不是真的进度哦，不要去点，点了也没用{:4_173:}

红影 发表于 2023-7-1 14:09

谢谢黑黑的代码{:4_187:}

梦油 发表于 2023-7-1 15:18

这么多的乐曲啊！真棒！

红影 发表于 2023-7-1 15:26

梦油 发表于 2023-7-1 15:18
这么多的乐曲啊！真棒！

前面我弄错了一个功能，还是黑黑帮助修改的。{:4_173:}

三月的阳光 发表于 2023-7-1 16:36

有新创意~~{:4_199:}{:4_187:}

上海朝阳 发表于 2023-7-1 16:50

哈哈，画面还没出来，咚的一声撞钟出来了，进入了佛寺。我只有欣赏你们的制作，学不会。

醉美水芙蓉 发表于 2023-7-1 17:14

岩新新 发表于 2023-7-1 18:00

分享精彩制作！

南无月 发表于 2023-7-1 18:32

图片音乐浑然一体，色彩搭得极协调。。影子贴子极美，清舟收礼快乐！{:4_187:}

千羽 发表于 2023-7-1 19:52

听了两首，都挺好的，这个方法真好{:4_187:}

千羽 发表于 2023-7-1 19:53

清舟收礼开心哦{:4_187:}

绿叶清舟 发表于 2023-7-1 20:31

来了，这个看上去很漂亮的{:4_179:}

绿叶清舟 发表于 2023-7-1 20:32

谢谢影，太喜欢了，以后可以自由做专辑了{:4_204:}

绿叶清舟 发表于 2023-7-1 20:32

千羽 发表于 2023-7-1 19:53
清舟收礼开心哦

谢谢千羽，太开心了

梦油 发表于 2023-7-1 20:32

红影 发表于 2023-7-1 15:26
前面我弄错了一个功能，还是黑黑帮助修改的。

黑黑朋友还是很热心的啊。

绿叶清舟 发表于 2023-7-1 20:32

南无月 发表于 2023-7-1 18:32
图片音乐浑然一体，色彩搭得极协调。。影子贴子极美，清舟收礼快乐！

谢谢南无月，一起开心{:4_204:}

小辣椒 发表于 2023-7-1 20:37

这个多音乐可以做专辑的播放器，漂亮{:4_178:}

小辣椒 发表于 2023-7-1 20:39

音乐也是好听，图图也是特别雅致{:4_199:}
页: [1] 2 3 4 5 6 7
查看完整版本: TO绿叶清舟（学习黑黑多首乐曲播放）