寒衣调

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

马黑黑 发表于 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) lrc.innerText = lrcAr;
}
});
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 对应选择器的相关属性。

加林森 发表于 2022-9-12 08:04

等会来学习！

上海朝阳 发表于 2022-9-12 08:27

哎，暂停键能否做一个印章图案，看不出播放器。我是学不会的，但我觉得一个很好的一幅画加了明显的播放器，影响了画面美感。

马黑黑 发表于 2022-9-12 08:32

上海朝阳发表于 2022-9-12 08:27
哎，暂停键能否做一个印章图案，看不出播放器。我是学不会的，但我觉得一个很好的一幅画加了明显的播放器， ...

好建议

马黑黑 发表于 2022-9-12 08:32

加林森发表于 2022-9-12 08:04
等会来学习！

这个简单的

小辣椒 发表于 2022-9-12 09:27

精彩，黑黑现在变菱形了

小辣椒 发表于 2022-9-12 09:27

上海朝阳发表于 2022-9-12 08:27
哎，暂停键能否做一个印章图案，看不出播放器。我是学不会的，但我觉得一个很好的一幅画加了明显的播放器， ...

朝阳大哥也是喜欢播放器了{:4_170:}

小辣椒 发表于 2022-9-12 09:30

黑黑这个进度条加长我应该也是去修改一下，今天来不及了

马黑黑 发表于 2022-9-12 09:32

小辣椒发表于 2022-9-12 09:30
黑黑这个进度条加长我应该也是去修改一下，今天来不及了

加长变短修改两个数字：

① #mplayer 的 width 值
② #prog 的 width 值

两者数值要一致

马黑黑 发表于 2022-9-12 09:33

小辣椒发表于 2022-9-12 09:27
精彩，黑黑现在变菱形了

有别于你专用的{:4_170:}

小辣椒 发表于 2022-9-12 09:34

马黑黑发表于 2022-9-12 09:32
加长变短修改两个数字：

① #mplayer 的 width 值

好的，今天来不及来了

小辣椒 发表于 2022-9-12 09:34

马黑黑发表于 2022-9-12 09:33
有别于你专用的

也是对的。哈哈{:4_189:}

红影发表于 2022-9-12 09:35

这漂亮，还带按钮变形的，比昨天送小辣椒的那个又改进了呢{:4_199:}

红影发表于 2022-9-12 09:36

黑黑每天带来惊喜，简直是无穷无尽的宝藏啊{:4_199:}

马黑黑 发表于 2022-9-12 09:39

红影发表于 2022-9-12 09:36
黑黑每天带来惊喜，简直是无穷无尽的宝藏啊

略加改动而已

马黑黑 发表于 2022-9-12 09:39

小辣椒发表于 2022-9-12 09:34
也是对的。哈哈

{:4_190:}

页: [1] 2 3

花潮论坛's Archiver

寒衣调