保姆级range进度条音频播放器开发教程（二）

马黑黑 · 发表于 2024-1-27 08:07

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

保姆级range进度条音频播放器开发教程（二）

上一节，保姆级range进度条音频播放器开发教程（一），我们通过音频播放时的 timeupdate 事件成功地驱动了滑杆进度条的运行，美中不足的是音频的播放还依赖于 audio 界面按钮来控制。本节，我们将创建自己的按钮，用下面这张图片，可以更换为其他的：

代码如下：

<p><img id="btnplay" src="图片地址" alt="" title="播放/暂停" /><p>

img 标签是行内标签，所以给它加一个p标签，以确保它独立占领一行。图片尺寸需要一个规范（宽高正比、不要太大、背景透明等等），否则可能不协调，同时图片要和 range 滑杆整合在一起，所以到这里，我们需要设置一下 CSS 层叠样式，用一个容器元素装载进度条和按钮，以便播放器将来用到帖子之时可以把它们当做一个整体随意安置在特定的地方。以下代码，我们设置一个 id 选择器 #mplayer，它是容器，其对应的 html 标签将装载 #btnplay（按钮）、#mprog（input range即进度条）,按钮和进度条对应的标签都是 inline-block（行内块）级别的，它们还要套上 p 标签，因此 CSS 代码还需要规范一下 p 标签的样式。此外，按钮要运行一个关键帧动画，我们为此还需要设置一个 @keyframes 动画。下面是代码和简要的注释说明：

/* css代码 */

/* 播放控制器容器样式 */
#mplayer {
	position: absolute;
	text-align: center; /* 文本居中属性 : 令行内元素水平居中 */
	color: white;
}
/* 容器里的p标签样式 */
#mplayer p {
	margin: 0;
	padding: 0;
}
/* 进度条样式 */
#mprog {
	width: 240px;
	accent-color: darkgreen; /* input相关控件强调色 : 改变range默认配色 */
	outline: none;
	cursor: pointer;
}
/* 图片按钮样式 ：宽高一致 */
#btnplay {
	width: 80px;
	height: 80px;
	cursor: pointer;
	animation: rotating 6s infinite linear var(--state);
}
/* 关键帧动画 ：旋转一周 */
@keyframes rotating { to { transform: rotate(360deg); } }

下面就是html代码了，注意我们去掉了上一节 audio 标签的 controls 属性，这样 audio 播放界面就不会出现了，我们将要完全通过图片按钮的点击操作来控制音乐的播放与暂停：

<audio id="aud" src="音频地址"></audio>
<div id="mplayer">
	<p><img id="btnplay" src="图片地址" title="播放/暂停" alt="" /></p>
	<p><input id="mprog" type="range" min="0" step="1" max="100" value="0" title="调节进度" /></p>
</div>

接下来，需要介绍 audio 控件的两个方法、一个对象属性，以及元素的单击事件、控制CSS变量值方法，这些都是基于JS的，以下是说明和代码举例：

/*① play 和 pause 方法 ：播放和暂停 */
aud.play(); /* id 为 aud 的 audio 控件播放音乐 */
aud.pause(); /* aud 暂停播放 */

/*② paused 属性 ：audio控件是否暂停中 */
let flag = aud.paused; /* 这将返回 true 或 false，是稍后判断按钮单击是播放还是暂停的依据 */

/*③ onclick 事件 ：元素的左键单击事件 */
btnplay.onclick = () => { /*这里做点什么*/ }; /* 操作标识为 btnplay 的元素被左键单击 */

/*④ element.style.setProperty 方法 ：改变CSS属性和变量值 */
papa.style.setProperty('width', '800px'); /* 设置 papa 元素的宽度 */
btnplay.style.setProperty('--state','paused'); /* 改变 btnplay 元素CSS变量值 ：paused 为动画暂停，running 为动画运行 */

/**** 以下是 btnplay 可以运行的单击事件代码，依据 aud.pause 返回值做判断 ****/
btnplay.onclick = () => {
	if (aud.paused) { /* 返回 true 时，亦即如果是暂停状态 */
		aud.play(); /* 那就播放 */
		btnplay.style.setProperty('--state', 'running'); /* 并让按钮转动 */
	} else { /* 否则，返回 false 时，亦即如果是播放状态  */
		aud.pause(); /* 那就暂停 */
		btnplay.style.setProperty('--state', 'paused'); /* 并让按钮停下 */
	}
};

好，内容有点多，但是实在绕不过去，要能往下继续，就得把上述介绍的知识点消化掉。至此，我们可以整合CSS、html和JS代码，使之成为一个完整的组合，整合的内容包含上一节的JS部分：

<style>
#mplayer {
	position: absolute;
	text-align: center;
	color: white;
}
#mplayer p {
	margin: 0;
	padding: 0;
}
#mprog {
	width: 240px;
	accent-color: darkgreen;
	outline: none;
	cursor: pointer;
}
#btnplay {
	width: 80px;
	height: 80px;
	cursor: pointer;
	animation: rotating 6s infinite linear var(--state);
}
@keyframes rotating { to { transform: rotate(360deg); } }
</style>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2113720220"></audio>
<div id="mplayer">
	<p><img id="btnplay" src="https://638183.freep.cn/638183/small/002_133507167677724892.png" title="播放/暂停" alt="" /></p>
	<p><input id="mprog" type="range" min="0" step="1" max="100" value="0" title="调节进度" /></p>
</div>

<script>

aud.addEventListener('timeupdate', () => {
	mprog.value = aud.currentTime / aud.duration * mprog.max;
});

btnplay.onclick = () => {
	if (aud.paused) {
		aud.play();
		btnplay.style.setProperty('--state', 'running');
	} else {
		aud.pause();
		btnplay.style.setProperty('--state', 'paused');
	}
};

</script>

查看效果，可以到这里 pencil code运行以上完整代码，或者将代码存为本地文件后运行。音乐没有设置为自动播放，运行后点击一下播放按钮。