css-doodle加餐教程（三）
本帖最后由 马黑黑 于 2023-4-13 07:47 编辑css-doodle加餐教程（三）
css-doodle四叶草与音乐关联
在 css-doodle加餐教程（二） 里，四叶草通过CSS关键帧动画已经能够旋转了，我们还通过 :doodle(:hover) {} 伪类选择器令动画可以控制。现在，让我们更进一步，令四叶草和音乐关联起来，换言之，用 css-doodle 做成的四叶草做一个音乐音乐播放控制器。下面是完整代码，这组代码可以完美地在 http://mahei.freeee.ml/api/pencilcode/pencilcode-ddl.html 页面里运行：
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=27571858" autoplay="autoplay" loop="loop"></audio>
<css-doodle grid="1">
:doodle {
@size: 160px;
cursor: pointer;
--state: paused;
}
background: rgb(20,20,200);
@shape: clover,4;
animation: rot 6s infinite linear var(--state);
@keyframes rot { to { transform: rotate(1turn); } }
</css-doodle>
<script>
let dd = document.querySelector('css-doodle');// ①
let mState = () => dd.style.setProperty('--state', aud.paused ? 'paused' : 'running'); // ②
aud.addEventListener('play', mState, false); // ③
aud.addEventListener('pause', mState, false); // ④
dd.onclick = () => aud.paused ? aud.play() : aud.pause(); //⑤
</script>
<audio> 标签大家已经很熟悉了，无需解释。
<css-doodle>标签代码和之前的两个教程有继承性和衔接性，道理一样，也无需解释。
现在来看看JS代码，我们经常使用的，这里给大家一个复习的机会：
在第 ① 句，我们先声明一个变量，dd，dd变量的赋值是通过对选择器 css-doodle 用JS的 queryselector 内置函数获得，这样我们就可以对文档中第一个<css-doodle> 选择器即我们的四叶草进行操控了。
接着，在第 ② 句，我们建立了一个自定义函数 mState() 函数，这个函数操纵四叶草（它现在叫 dd）的CSS变量变量 --state，音乐若暂停，它也取暂停（paused）的值，反之取运行（running）的值。
然后这个 mState() 函数分别通过监听 audio 播放器的两个事件，play 播放事件、pause 暂停事件得到运行（第 ③ ④ 句），其结果是，不论音乐处于播放中还是暂停中， --state 变量都得到正确赋值，关键帧动画运行与否因此与音乐的播放/暂停状态紧密关联。
最后，第 ⑤ 句，编写一个 dd 即四叶草的单击事件，该事件这么运作：如果音乐处于暂停状态（paused），则单击时令音乐播放（ play() ），反正，令音乐暂停（ pause() ）。
至此，大功告成。
两个应用实例：
① http://qhxy.52qingyin.cn/art/bsh ... art=uvuz_1681216168
② http://qhxy.52qingyin.cn/art/bshow.php?st=3&sd=3&art=1681304088
两个应用实例都很漂亮，悄然还换了个按钮，也很有趣{:4_187:} 红影 发表于 2023-4-13 10:28
两个应用实例都很漂亮，悄然还换了个按钮，也很有趣
就是 z-index 没有弄好 马黑黑 发表于 2023-4-13 12:42
就是 z-index 没有弄好
嗯，点击了没反应。不过帖子很漂亮呢。 红影 发表于 2023-4-13 16:32
嗯，点击了没反应。不过帖子很漂亮呢。
修改了，现在可以操控音频了 红影 发表于 2023-4-13 10:28
两个应用实例都很漂亮，悄然还换了个按钮，也很有趣
{:4_173:}换了个刀削面 马黑黑 发表于 2023-4-13 12:42
就是 z-index 没有弄好
{:4_170:}我试了盖图 雨中悄然 发表于 2023-4-13 18:22
我试了盖图
你去看看我的回复 红影 发表于 2023-4-13 16:32
嗯，点击了没反应。不过帖子很漂亮呢。
其实我点的是下方一点点的地方一直能暂停，就根本没想这个问题。。。你厉害，一眼就看出问题来了 马黑黑 发表于 2023-4-13 18:10
修改了，现在可以操控音频了
{:4_170:}黑黑出手了，我瞧瞧去 雨中悄然 发表于 2023-4-13 18:25
黑黑出手了，我瞧瞧去
不知满意不 马黑黑 发表于 2023-4-13 18:10
修改了，现在可以操控音频了
嗯嗯，我再看看去。。。 雨中悄然 发表于 2023-4-13 18:22
换了个刀削面
看到那里的回复了，这个叫法特别好玩{:4_173:} 雨中悄然 发表于 2023-4-13 18:23
其实我点的是下方一点点的地方一直能暂停，就根本没想这个问题。。。你厉害，一眼就看出问题来了
这也说明了我也出过同样的问题{:4_170:} 马黑黑 发表于 2023-4-13 18:59
不知满意不
老师教的不光是知识，还是是方法。十分满意 红影 发表于 2023-4-13 19:52
看到那里的回复了，这个叫法特别好玩
角度清奇 红影 发表于 2023-4-13 19:53
这也说明了我也出过同样的问题
也是经验，多做多熟练 雨中悄然 发表于 2023-4-14 18:20
老师教的不光是知识，还是是方法。十分满意
{:4_190:} 雨中悄然 发表于 2023-4-14 18:20
角度清奇
联想丰富{:4_173:} 雨中悄然 发表于 2023-4-14 18:20
也是经验，多做多熟练
我更是出好多次错才记住了{:4_196:}