基于HTML5实现音乐播放暂停及快进后退功能

最新推荐文章于 2024-07-31 09:18:16 发布

置顶

changeie

最新推荐文章于 2024-07-31 09:18:16 发布

阅读量1.2w

点赞数

本文链接：https://blog.csdn.net/changeie/article/details/79660272

版权

本文介绍了如何利用HTML5的audio标签创建音乐播放器，包括播放、暂停、快进和后退功能。虽然没有实现歌曲循环播放等高级功能，但提供了基础的音乐控制代码，适合H5初学者学习。

摘要由CSDN通过智能技术生成

近年来，H5的流行，加入许多标签，导致一些新手看起来有些懵，有点不太会用新标签，今天，举一个H5里比较常用的标签，audio标签，这个标签的作用在于添加一个音乐标签，可以实现它的样式，暂停，播放，快进及后退功能。其他功能比如播完一首歌，自动回到起点，或者播完一首歌，到下一首歌自动播放等功能暂未实现。以下代码仅供初学H5学习和交流，大佬请忽略。代码健壮性考虑的不周到，实现后前进后退滑动不顺畅，还请大佬提出好的解决方法。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.relative{
position: relative;
/* 根据自身定位并且自身的位置保留不变 */
}
.absolute{
position: absolute;
/* 根据最近的有定位的父元素自身位置被顶替*/
}
.top10{
top: 10px;
}
.left10{
left: 10px;
}
.top50{
top: 50px;
}
.left50{
left: 50px;
}
.display-none{
display: none;
}
.h100{
height: 100px;
}
.l120{
left: 120px;
}
.process-background{