论坛 › 马黑黑教程专版 › 小白也做音频播放控制器

马黑黑 发表于 2023-2-9 11:07

小白也做音频播放控制器

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

首先，布置好自己的帖子，包含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>

马黑黑 发表于 2023-2-9 11:08

<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>

马黑黑 发表于 2023-2-9 11:08

@雨中悄然

醉美水芙蓉 发表于 2023-2-9 11:43

马黑黑 发表于 2023-2-9 12:25

醉美水芙蓉 发表于 2023-2-9 11:43
我就来看看老师的作品吧！

还是学一下好，努力一把，花40分钟吃透这个帖子，就可以自己做了

小辣椒 发表于 2023-2-9 12:30

黑黑又开始重新教了{:4_178:}

小辣椒 发表于 2023-2-9 12:30

小辣椒欣赏加学习{:4_187:}

马黑黑 发表于 2023-2-9 12:46

小辣椒 发表于 2023-2-9 12:30
黑黑又开始重新教了

我看大家还不能透彻理解，再弄一回{:4_170:}

马黑黑 发表于 2023-2-9 12:47

小辣椒 发表于 2023-2-9 12:30
小辣椒欣赏加学习

中午好

小辣椒 发表于 2023-2-9 13:06

马黑黑 发表于 2023-2-9 12:47
中午好
黑黑好，以为你不在的。{:4_189:}

小辣椒 发表于 2023-2-9 13:06

马黑黑 发表于 2023-2-9 12:46
我看大家还不能透彻理解，再弄一回

就黑黑最无私奉献{:4_187:}

庶民 发表于 2023-2-9 14:13

引领我们玩美美。

红影 发表于 2023-2-9 15:50

有了这个标注，各个语句的含义就更清晰了。谢谢黑黑的那行讲解{:4_187:}

红影 发表于 2023-2-9 15:52

还是对JS最迷糊，比如添加的其他控制语句怎么添的，举个例子呗{:4_173:}

马黑黑 发表于 2023-2-9 17:30

红影 发表于 2023-2-9 15:52
还是对JS最迷糊，比如添加的其他控制语句怎么添的，举个例子呗

首先你要知道你想控制帖子里的什么。如果是相同性质的keyframes动画，就是说音乐停它也应该停下来的，就不用加控制语句，而是在CSS代码里给相应元素使用相同的CSS变量（var(--state)），这样示例中的语句就能同时控制它；如果是其他性质的，但也需要同步停下，才考虑在这里加。

加法语句结构是，用一对括号将两个控制语句括起来，问号后面是一对，冒号后面是一对。每一对圆括号里的控制语句，用逗号隔开。举例如下：

aud.paused ? (控制语句一, 控制语句二) : (控制语句A, 控制语句B);

马黑黑 发表于 2023-2-9 17:32

红影 发表于 2023-2-9 15:50
有了这个标注，各个语句的含义就更清晰了。谢谢黑黑的那行讲解

如果能理解，那么，自己动手也是可以了，JS部分可以慢慢在领会

马黑黑 发表于 2023-2-9 17:32

庶民 发表于 2023-2-9 14:13
引领我们玩美美。

感谢支持

马黑黑 发表于 2023-2-9 17:33

小辣椒 发表于 2023-2-9 13:06
黑黑好，以前你不在的。

我去哪了

马黑黑 发表于 2023-2-9 17:35

小辣椒 发表于 2023-2-9 13:06
就黑黑最无私奉献

{:4_190:}

雨中悄然 发表于 2023-2-9 18:20

马黑黑 发表于 2023-2-9 11:08
@雨中悄然

黑老师辛苦了，太会因材施教了。小白正需要这样一个贴子结构说明。

查看完整版本: 小白也做音频播放控制器