寒衣调

马黑黑 · 发表于 2022-9-12 07:24

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

lrc

00:00 | 00:00

马黑黑 · 发表于 2022-9-12 07:27

代码

<style>
#papa { left: -214px; width: 1024px; height: 640px; background: gray url('/data/attachment/forum/202209/12/072119w82nddfm2q3ow4mr.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#mplayer { position: absolute; right: 10px; bottom: 0px; width: 300px; height: 80px; user-select: none; display: grid; place-items: center; cursor: pointer; }
#mplayer:hover #btnwrap, #mplayer:hover #prog { transform: translateY(var(--yy)); }
#mplayer:hover #btnwrap { background: linear-gradient(to top right, rgba(0,255,0,.45), rgba(255,0,0,.35)); border-radius: 50%; }
#btnwrap, #prog { position: absolute; display: grid; place-items: center;transition: .5s; }
#btnwrap { --yy: -15px; width: 40px; height: 40px; transform: rotate(45deg); border: 1px solid gray; border-radius: 6px; }
#btnplay { width: 20px; height: 20px; background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
#prog { --yy: 20px; width: 300px; height: 18px; border-radius: 10px; background: linear-gradient(90deg, rgba(0,255,0,.45), rgba(255,0,0,.35) 100%, transparent 0); border: 1px solid gray; font: normal 14px sans-serif; color: purple; }
#lrc { position: absolute; right: 30px; top: 20px; font: bold 2em sans-serif; color: tan; text-shadow: 2px 2px 2px #222; }
</style>
<div id="papa">
<div id="lrc">lrc</div>
<div id="mplayer">
<div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
<div id="prog">00:00 | 00:00</div>
</div>
</div>
<script>
let lrcAr = [
['0.00','纯音乐 - 寒衣调'],
['240.00','感谢支持']
];
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=450510337.mp3';
aud.autoplay = true;
aud.loop = true;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
prog.style.background= 'linear-gradient(90deg, rgba(0,255,0,.45), rgba(255,0,0,.35) ' + aud.currentTime / aud.duration * 100 + '%, transparent 0)';//prog.offsetWidth * aud.currentTime / aud.duration) + 'px 0px';
prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr[j][0]) lrc.innerText = lrcAr[j][1];
}
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
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;
}
</script>

复制代码

马黑黑 · 发表于 2022-9-12 07:31

手机测试了，音乐可自动播放。播放器的交互响应，没有为手机浏览器作适配，但手机可以触碰触发播放器的鼠标滑过交互，并可操作播放、暂停、调节进度等功能。

马黑黑 · 发表于 2022-9-12 07:40

本帖代码简单，常规HTML+CSS+JS实现模式。亮点在播放器：进度条与控制按钮似合非合似分非分，合合分分相互依存，兼顾趣味性、把玩性强的同时，着重打造轻奢的审美创意。

播放器使用边框、渐变、形状简单组合，看似随手拈来，实则精心设计。

马黑黑 · 发表于 2022-9-12 07:57

本帖最后由马黑黑于 2022-9-12 08:00 编辑

播放器的颜色，包括lrc歌词的前景色，均可、也建议根据场景修改，不熟悉rgba颜色表达体系的可以将 rgba(x,y,z,.a) 结构更换为 #ff00cc 或 red 之类的表示法，需要透明设计的在对应CSS选择器加一句 opacity: .7; ，.7 是 0.7 的意思，透明度为 30%。rgba(...) 颜色表达体系已经引入alpha通道，它的好处是直接可以设置透明，无需 opacity 滤镜。

如何找到播放器元素对应于哪个 CSS 选择器？

得看 HTML 代码结构，每一个标签应该会有 id 或 class 标识，id 或 class 标识的值就是该标签对应的 CSS 选择器的名称，就指向它。例如，本帖的HTML代码，

<div id="papa">
      <div id="lrc">lrc</div>
      <div id="mplayer">
            <div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
            <div id="prog">00:00 | 00:00</div>
      </div>
</div

总共有 7 个 id。下面以音频播放器为例加以说明：

mplayer是播放器的收拢者，即容器，它下面有两个并列的 div 子元素，第一个 btnwrap 是按钮的容器，该容器下面又有两个子元素，其一是播放按钮 btnplay，其二是暂停按钮 btnpause；第二个 prog 是进度条。

这样层层找寻，就能像剥笋子一样，最终对HTML与CSS的关联一目了然，然后从容修改 CSS 对应选择器的相关属性。