第六讲：帖子加入音频并使用旋转的图片“控制”音频

HTML的音频标签是 audio，这是一个h5封装好的基于音频的媒体控件，我们可以使用语法糖的简化形式给帖子加入 audio 标签。下面的HTML代码在上一节的基础上添加了一个 audio 标签：

<!-- HTML代码 ：父元素包裹两个子元素 -->
<div id="mama">
	<audio id="aud" src="音频地址" autoplay loop></audio>
	<img id="mypic" alt="" src="https://638183.freep.cn/638183/small/4yc.png" />
</div>

和图片标签一样，audio 标签也有一个 id 属性，id="aud"，不过该id不是对标CSS样式，它只是表明身份，有了身份将来对它的操控就有依据（大概和点点关注不迷路意思相近）。该标签还有两个属性，autoplay 和 loop，分别表示自动播放和循环播放，这是做音画帖音频标签必设的属性，它还有诸多其他属性，感兴趣的童鞋可以搜一搜audio标签扩展一下对audio标签的认知。

以上是对audio标签的简单介绍。注意，这样的audio标签是没有界面的，音乐自动播放+循环播放的设置会让音乐的播放永不停息，直至页面被关闭。有童鞋可能会问，那为什么不让audio标签出现界面呢？这个容易，在audio标签里面加一个属性 controls 即可，与 autoplay、loop 并列放在一块儿就成，然后你会很惊讶：天哪，天下还有这么丑的东东存在！嗯嗯，audio界面是以外星人的审美观念设计的，我们不要见到它，我们用前面几节的四叶草来“控制”音频的播放与暂停会显得更酷。

这得用到编程！没错，做音画帖，你得会一点点编程，即使不能自己写编程代码，原理你得知道一些，改一改别人代码的能力你得有一些。好在照猫画虎即便看上去像一条狗，它也是四足动物，原理摆在那里，改代码做到心中有数就不可能会把自己改成外星人。言归正传：简单介绍一下做帖子用到的编程语言 JavaScript，简称 JS：JS是地地道道的编程语言，它写出的东西能够在浏览器中直接执行，从而使得网页更为丰富多彩，如可以交互、内容可以动态变化等等。JS以特定的HTML标签出现在页面代码中，像这样：

<script>
//JS代码第一行
//JS代码第二行
//JS代码第N行
</script>

script 标签将JS代码包裹起来，JS所有的代码都将放在该标签之内，这和 CSS代码 放在 style 标签里是一个道理。这样，一个拥有CSS、HTML、JS的音画帖，代码结构将如下所示：

<!-- css代码 -->
<style>
	/*这里是CSS代码*/
</style>

<!-- html代码 -->
<div id="papa"></div>

<!--js代码 -->
<script>
	//这里是JavaScript代码
</script>

一般就按这样的顺序组织帖子的三种类型的代码：CSS+HTML+JS，注意CSS和JS都有各自独特的标签，HTML代码则是一个帖子容器包裹一系列的子元素。

下面我们来学习如何使用JS控制音频的播放与暂停。audio标签在JS中有独立的API（接口），我们根据audio控件接口提供的 puased 属性即暂停属性来判断当下audio控件是否处于暂停状态，如果暂停，那么，点击四叶草时（四叶草的 click 即点击事件被触发），音乐暂停，反之，如果音频暂停状态为假，音乐播放。看代码加以理解：

//JS代码
mypic.onclick = () => aud.paused ? aud.play() : aud.pause();

mypic 沿用我们上一节的img图片标签的id，它指向四叶草，左上角的那个旋转的图片。. 是JS特有的链式表达方法，这个点表示后面的 onclick 这个事件即点击事件属于 mypic ，意思就是 mypic 被点击的时候，其中，click 是点击，前面有个 on 即 onclick 表示被点击，所有的元素都拥有被点击的权益，比如帖子容器被点击，写成 mama.onclick，假设 mama 是帖子容器div的id标识。被点击后干嘛？我们用这样的结构引出要干的事情，= () =>，这叫箭头函数，可以先不理解它，知道是这么用就行，它后面的语句通过它和前面表达的四叶草被点击的语句建立起关系，就是呢，四叶草被点击了，就执行箭头组合指向的后面的语句所描述的一切。后面部分我们先发出询问，aud.paused ?，音频（aud是audio标签的id标识）是否处于暂停状态。紧跟问号后面的语句，aud.play()，是直接作出应答：如果音频暂停中，则令其播放，play 是audio的播放动作，后面要加一对小括号，play()，前面的 aud 则是audio控件的id标识，合起来写成 aud.play()，其意为音频控件播放。接着有一个冒号，表示转折应答前面的询问，即音频是否暂停中，冒号表示“如果不是”，则执行 aud.pause() 指令，pause() 表示音频的暂停动作（注意暂停动作与暂停状态的区别）。整句代码连起来的意思就是：mypic(四叶草)被点击时，问当前aud(音频))是不是暂停中，如果是，给老子播放，如果不是，给老子暂停。就酱，四叶草的点击，可以控制音频的播放与暂停了。

但是这时候，四叶草却总在不停地转动中！道理上，音乐停止，它也应该停止，音乐播放，它才转动，这才达到是四叶草“控制”音乐的目的。这个，我们需要在CSS引入一个变量，--state，用来描述CSS关键帧动画的播放状态：

//CSS #mypic选择器 animation 属性代码 : 添加一个 --state 变量
animation: rot 8s linear infinite var(--state);
--state: running;

--state 变量是自命名变量，它用来表示动画的运行或停止状态，共两个值：running 表示运行，paused 表示暂停。我们希望一开始四叶草是旋转的，所以在第三行代码给它赋值 running，而在第二行代码 animation 属性中使用 var() 将变量名称包含起来，var 是声明的意思，这表示，animation是否运行动画依赖于 --state 这个变量值。有了这个 --state 变量，我们可以使用 JS 的 setProperty() 方法来动态设置 --state 变量值，该方法隶属于 CSS 相关接口，所以使用时要使用链式方式指明 style 属性（style就是CSS代码的标签）以及是那个元素的 style 属性，看例子，我们将 mypic 四叶草的点击事件改装一下：

//JS代码 : 四叶草点击事件
mypic.onclick = () => {
	aud.paused ? aud.play() : aud.pause();
	mypic.style.setProperty('--state', aud.paused ? 'paused' : 'running');
};

上面代码，四叶草点击事件要做两件事情，所以箭头函数符号的后面，我们用一组花括号将多行代码组织起来。第三行代码是我们前面写好的控制音频播放暂停的代码，这里不重复解释。第四行是新添加的，控制四叶草的旋转与暂停：针对 mydiv 的 style 属性，使用 setProperty() 方法设置某个CSS属性，该方法需要两个参数，参数一是CSS属性名称，这里是 --state 变量、它是指向动画运行状态的一个CSS动画属性，用小角引号包裹起来，参数二是--state 属性值，这个值的确定方法也是通过询问：音乐是否暂停中，如果是，则 --state 变量值为 'paused'(暂停)，否则值为 'running'(运行)。酱紫，点击四叶草，就可以联动控制四叶草的旋转与暂停、音乐的播放与暂停，达到四叶草可以“控制”音乐播放暂停状态的预期目的。以下是整合好的完整代码，大家可以在线查看效果，但重要的是先理解代码的意思：

<!-- 第一部分 ：css代码 -->
<style>
#mama {
	position: relative;
	margin: 20px auto;
	width: 800px;
	height: 450px;
	background: url('https://638183.freep.cn/638183/t22/webp/jyiu.webp') no-repeat center/cover;
}
#mypic {
	position: absolute;
	left: 20px;
	top: 10px;
	width: 120px;
	height: 120px;
	cursor: pointer; /* 指针图标设置 ：指针移动其上时呈现手型图标 */
	animation: rot 8s linear infinite var(--state);
	--state: running;
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<!-- 第二部分 ：html代码 -->
<div id="mama">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=523696075" autoplay loop></audio>
	<img id="mypic" alt="" src="https://638183.freep.cn/638183/small/4yc.png" />
</div>

<!-- 第三部分 ：JS代码 -->
<script>
//JS代码 : 四叶草点击事件
mypic.onclick = () => {
	aud.paused ? aud.play() : aud.pause();
	mypic.style.setProperty('--state', aud.paused ? 'paused' : 'running');
};
</script>

点击运行以上代码

本节，我们硬生生地将JavaScript（JS）拖出来，这是没有办法的办法，做音画帖无法绕开JS编程！JS是很难的，大家如有能力学会自己编写JS代码那是最好不过的，若学不会也没有关系，做到我讲到的基本能看得懂、将来能够根据需要修改一部分JS代码即可。随后的示例我们还会用到JS代码，我都会一一做解释、让大家尽量明白这些JS代码的作用。本节的JS功能代码严格来讲就两句，但每一句都信息量巨大，同时富含逻辑处理，建议多看几遍我的解释，力求弄懂弄通，了解JS编程的思路与实现手段。CSS代码中我们则加入了一个自动以变量 --state，该变量事实上指向动画的运行状态（动画的运行状态是一个属性），值为 paused 时表示暂停，值为 running 时表示运行，在CSS中赋值时不需要引号，在JS中动态改变 --state 值时需要引号，至于为什么，以后有机会再做了解。本节内容艰涩，所以不留作业，大家多多地去理解本节的内容就好。

返回目录