照猫画虎，画出来的好歹也是猫科动物，是不是虎不重要，能看就行。小白做个音频播放器没有想象中的那么难。


首先，布置好自己的帖子，包含CSS和HTML两部分。


CSS负责规范帖子的样式。它至少要对两个帖子元素进行样式描述，还设计一个动画。假设 papa 是帖子父元素，mplayer 是播放器元素：


<style>
/* 帖子外框 */
#papa {
        --state: paused; /* 关键帧动画运行变量值 ：暂停 */
        position: relative; /* 相对定位以约束绝对定位的子元素 */
        width: 1024px; /* 宽度 */
        height: 640px; /* 高度 */
        left: calc(50% - 81px); /* 左边定位 ：配合下一句令帖子居中显示 */
        transform: translateX(-50%);
        background: tan url('图片地址') no-repeat center/cover; /* 背景设计 */
}


/* 播放器 */
#mplayer {
        position: absolute; /* 绝对定位方式 */
        width: 120px;  /* 宽度 */
        height: 120px;  /* 高度 */
        left: 100px; /* 定位 ：左边值 */
        top: 100px; /* 定位 ：右边值 */
        background: olive;  /* 背景色 */
        cursor: pointer; /*鼠标指针样式 ：手型 */
        animation: spin 8s linear infinite;  /* 运行动画 */
        animation-play-state: var(--state);  /* 动画运行状态 ：通过变量接受JS控制 */
}


/* 关键帧动画 旋转360度 */
@keyframes spin {
        to { transform: rotate(360deg); }
}
</style>


CSS方面，这就差不多了，当然实际做帖时还需要一些细节完善和新元素添加。下来是HTML部分。HTML具体将帖子布置出来，显示在浏览器中。我们可以使用 div 标签来布置我们的帖子，标签的id至关重要，要一一对应上面的CSS选择器名称：


<div id="papa">
        <div id="mplayer"></div>
        <audio src="https://music.163.com/song/media/outer/url?id=429261487.mp3" autoplay loop></audio>
</div>


这里音频控件也有了，这是最简单高效的 audio 标签用法，自动播放、循环播放都设置好了。


最后，要用JS来控制播放器的暂停与播放以及其他交互控制：


<script>


//函数 ：根据audio播放与否控制关键帧动画的运行
let mState = () => {
        aud.paused ? papa.style.setProperty('--state', 'paused') : papa.style.setProperty('--state', 'running');
};


//监听 mplayer 单击事件 ：播放或暂停音乐
mplayer.addEventListener('click', () => {
        aud.paused ? aud.play() : aud.pause();
});


//监听 aud  播放事件 ：
aud.addEventListener('play', () => mState());


//监听 aud  暂停事件 ：
aud.addEventListener('pause', () => mState());


</script>


这就可以啦。嗯，JS代码还可以写得更简洁一些，比如 mState 函数，我使用三元运算符来写，一行解决所有问题，但还是有所冗余，可以写成更简短的：


let mState = () => {
        papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
};


那我为什么写成长一点的呢？这是考虑将来可能还要控制其他独立于音乐控制的动画，比如流动边框什么的，若此，很容易改造函数：


let mState = () => {
        aud.paused ? (papa.style.setProperty('--state', 'paused'), 其他控制语句) : (papa.style.setProperty('--state', 'running'), 其他控制语句);
};


JS是编程语言，不会没关系，能略微理解上面的代码就好，细心一点，就可以修改相关的内容。


下面是上述CSS、HTML和JS的代码汇总：


<style>
#papa {
        --state: paused;
        position: relative;
        width: 1024px;
        height: 640px;
        left: calc(50% - 81px);
        transform: translateX(-50%);
        background: tan url('图片地址') no-repeat center/cover;
}


#mplayer {
        position: absolute;
        width: 120px;
        height: 120px;
        left: 100px;
        top: 100px;
        background: olive;
        cursor: pointer;
        animation: spin 8s linear infinite;
        animation-play-state: var(--state);
}


@keyframes spin {
        to { transform: rotate(360deg); }
}
</style>


<div id="papa">
        <div id="mplayer"></div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=429261487.mp3" autoplay loop></audio>
</div>


<script>


let mState = () => {
        aud.paused ? papa.style.setProperty('--state', 'paused') : papa.style.setProperty('--state', 'running');
};


mplayer.addEventListener('click', () => {
        aud.paused ? aud.play() : aud.pause();
});


aud.addEventListener('play', () => mState());


aud.addEventListener('pause', () => mState());


</script>

前一篇: 【阿依莫】响应式圆环频谱（解说）
下一篇: CSS ：keyframes 和 animation