css-doodle音频播放控制器应用实例

马黑黑 · 发表于 2023-5-11 22:23

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

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

x

本帖最后由马黑黑于 2023-5-11 22:25 编辑

:doodle {@grid: 2 / 300px 60px;position: absolute;color: var(--color);bottom: 0;--prog: 0%; --size: 40px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color: lightgreen; --state: paused;} @nth(1) {@place: 25% 80%;:after { content: var(--ttmsg1); }} @nth(2) {@size: var(--size);@shape: windmill;@place: 50% 35%;background: var(--color);animation: rot 6s infinite linear var(--state);} @nth(3) {@place: 75% 80%;:after { content: var(--ttmsg2); }} @nth(4) {@place: 50% 80%;@size: 100% 2px;background: #bbb;display: grid;place-items: center start;:before {content: '';width: var(--prog);height: 100%;background: var(--color);}} @keyframes rot { to { transform: rotate(1turn); } }

马黑黑 · 发表于 2023-5-11 22:26

本帖最后由马黑黑于 2023-5-11 22:38 编辑

帖子源码

<style>
#papa {
margin: auto;
width: 900px;
height: 559px;
background: tan url('../pic/yujb.jpg');
box-shadow: 0 0 8px #000;
display: grid;
place-items: center;
position: relative;
}
</style>
<div id="papa">
<css-doodle id="mplayer">
:doodle {
@grid: 2 / 300px 60px;
position: absolute;
color: var(--color);
bottom: 0;
--prog: 0%; --size: 40px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color: lightgreen; --state: paused;
}
/* 时间信息 : 左 */
@nth(1) {
@place: 25% 80%;
:after { content: var(--ttmsg1); }
}
/* 控制器 */
@nth(2) {
@size: var(--size);
@shape: windmill;
@place: 50% 35%;
background: var(--color);
animation: rot 6s infinite linear var(--state);
}
/* 时间信息 : 右 */
@nth(3) {
@place: 75% 80%;
:after { content: var(--ttmsg2); }
}
/* 进度条 */
@nth(4) {
@place: 50% 80%;
@size: 100% 2px;
background: #bbb;
display: grid;
place-items: center start;
:before {
content: '';
width: var(--prog);
height: 100%;
background: var(--color);
}
}
@keyframes rot { to { transform: rotate(1turn); } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=16964082" autoplay loop></audio>
</div>
<script>
(function() {
let clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
document.head.appendChild(script);
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;};
let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {
mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);
mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);
mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)
});
mplayer.onclick = () => {
if(clickIdx === 1) aud.paused ? aud.play() : aud.pause();
if(clickIdx === 2) aud.currentTime = progChg;
}
mplayer.onmousemove = (e) => {
let size = parseInt(window.getComputedStyle(mplayer).getPropertyValue('--size')), ww = mplayer.offsetWidth, hh = mplayer.offsetHeight;
clickIdx = e.offsetY > hh/1.5 ? 2 : (e.offsetX > (ww - size)/2 && e.offsetX < (ww + size)/2 && e.offsetY < hh/1.5 ? 1 : 0);
mplayer.style.cursor = cursors[clickIdx];
if(clickIdx > 1) progChg = aud.duration * e.offsetX / ww;
}
})();
</script>

复制代码

亦是金 · 发表于 2023-5-11 22:27

黑黑老师上实例了，欣赏学习中！

亦是金 · 发表于 2023-5-11 22:29

先收藏，慢慢捣鼓！

马黑黑 · 发表于 2023-5-11 22:35

JS部分更改了一些算法，主要针对播放控制器。其中：

变量 clickIdx 是单击索引、progChg 是改变当前播放时间值、cursors 是鼠标指针数组。

脚本依据鼠标指针在 css-doodle 上的位置算出 clickIdx 值，分别为 0（不触发任何事件，指针默认）、1（触发播放暂停，指针手型）、2（触发播放进度的更改，指针手型）。

算法主要在css-doodle界面的鼠标滑过事件中进行计算。