css-doodle播放控制器
<css-doodle id="mplayer">:doodle {
@grid: 2 / 300px 70px;
background: tan;
--prog: 0%; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --state: paused;
}
/* 时间信息 : 左 */ /* 时间信息 : 左 */
@nth(1) {
@place: 25% 70%;
:after { content: var(--ttmsg1); }
}
/* 控制器 */
@nth(2) {
@size: 40px;
@shape: clover 4;
@place: 50% 35%;
background: crimson;
cursor: pointer;
animation: rot 6s infinite linear var(--state);
}
/* 时间信息 : 右 */
@nth(3) {
@place: 75% 70%;
:after { content: var(--ttmsg2); }
}
/* 进度条 */
@nth(4) {
@place: 50% 75%;
@size: 100% 4px;
background: gray;
display: grid;
place-items: center start;
:before {
content: '';
width: var(--prog);
height: 100%;
background: crimson;
}
cursor: pointer;
}
@keyframes rot { to { transform: rotate(1turn); } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=488388710" autoplay loop></audio>
<script>
(function() {
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 = (e) => {
if(e.offsetX > 130 && e.offsetX < 170 && e.offsetY < 46) aud.paused ? aud.play() : aud.pause();
if(e.offsetY > 46) aud.currentTime = aud.duration * e.offsetX / mplayer.offsetWidth;
}
})();
</script>
本帖最后由 马黑黑 于 2023-5-10 22:46 编辑
源码<css-doodle id="mplayer">
:doodle {
@grid: 2 / 300px 70px;
background: tan;
--prog: 0%; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --state: paused;
}
/* 时间信息 : 左 */
@nth(1) {
@place: 25% 70%;
:after { content: var(--ttmsg1); }
}
/* 控制器 */
@nth(2) {
@size: 40px;
@shape: clover 4;
@place: 50% 35%;
background: crimson;
cursor: pointer;
animation: rot 6s infinite linear var(--state);
}
/* 时间信息 : 右 */
@nth(3) {
@place: 75% 70%;
:after { content: var(--ttmsg2); }
}
/* 进度条 */
@nth(4) {
@place: 50% 75%;
@size: 100% 4px;
background: gray;
display: grid;
place-items: center start;
:before {
content: '';
width: var(--prog);
height: 100%;
background: crimson;
}
cursor: pointer;
}
@keyframes rot { to { transform: rotate(1turn); } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=488388710" autoplay loop></audio>
<script>
(function() {
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 = (e) => {
if(e.offsetX > 130 && e.offsetX < 170 && e.offsetY < 46) aud.paused ? aud.play() : aud.pause();
if(e.offsetY > 46) aud.currentTime = aud.duration * e.offsetX / mplayer.offsetWidth;
}
})();
</script>
本帖最后由 马黑黑 于 2023-5-10 22:44 编辑
JS动态传递CSS变量值给单元格伪元素，之前曾断言不可行，晚饭后再研究了一阵子，终于解决问题。技巧是，所传递的值必须带小角引号，单引号双引号不论，前后配套就好。
具体实现代码在：
① 05行，声明 --ttmsg1 和 --ttmsg2 两个CSS变量；
② 10行和24行，两个单元格的伪元素分别调用 --ttmsg1 和 --ttmsg2 变量；
③ 55、56行分别对这两个变量赋值，赋值方式加了小角单引号。 本帖最后由 起个网名好难 于 2023-5-10 23:16 编辑
马黑黑 发表于 2023-5-10 22:42
JS动态传递CSS变量值给单元格伪元素，之前曾断言不可行，晚饭后再研究了一阵子，终于解决问题。技巧是，所 ...
请教，小角单引号是么意思？
mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`); 前两行是传入字符串要加引号
mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);
mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`) 这行是传入数值不用引号
是不是这意思。
学习…… 起个网名好难 发表于 2023-5-10 23:13
小角单引号是么意思？
mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`); ...
对。单元格的 content 属性，接受JS传递的变量，需要放在引号里，否则不成功 先收藏，慢慢学习，体会，模仿，试用！谢谢老师的教程！ 终于可以用css-doodle做出播放器了，黑黑研究得真深{:4_199:} 这个也能拉动播放进度呢，只是有些数值没看明白，比如if(e.offsetX > 130 && e.offsetX < 170 && e.offsetY < 46) ，这里面的数值不知道哪来的{:4_173:} 红影 发表于 2023-5-11 10:34
这个也能拉动播放进度呢，只是有些数值没看明白，比如if(e.offsetX > 130 && e.offsetX < 170 && e.offsetY ...
这些数值要用一个公式来替换，这里暂且这么办而已，是根据各自的位置决定的 亦是金 发表于 2023-5-10 23:25
先收藏，慢慢学习，体会，模仿，试用！谢谢老师的教程！
{:4_191:} 醉美水芙蓉 发表于 2023-5-11 06:36
问候老师早上好！
中午好 红影 发表于 2023-5-11 10:27
终于可以用css-doodle做出播放器了，黑黑研究得真深
还行 小播放器看上去小巧可爱，代码却不少。看来css-doodle画图可以变得简单之极，牵涉交互就复杂了。 马黑黑 发表于 2023-5-11 12:16
这些数值要用一个公式来替换，这里暂且这么办而已，是根据各自的位置决定的
哦，这个让人有点迷糊。 马黑黑 发表于 2023-5-11 12:17
还行
看着代码挺复杂，还不如之前的呢{:4_173:} 红影 发表于 2023-5-11 14:57
看着代码挺复杂，还不如之前的呢
怎么说呢？你不能因为《巴黎圣母院》字数之多定义其为啰嗦，也不能因为《道德经》才五千字而认为它不全。 红影 发表于 2023-5-11 14:57
哦，这个让人有点迷糊。
涉及到几何问题。 南无月 发表于 2023-5-11 12:38
小播放器看上去小巧可爱，代码却不少。看来css-doodle画图可以变得简单之极，牵涉交互就复杂了。
交互都是复杂的