H5移动端音频播放器

转载自：https://blog.csdn.net/Dandelion_drq/article/details/77645659

以下是我修改的代码：
html代码:

课程详情

音频课程

上帝视角看民宿产业 - 马化腾试听三分钟

00:00

css代码：
.audio-wrapper {
width: 90%;
margin-left: 5%;
margin: 1.2rem auto;
height: 7.357rem;
border: 1px solid #e0e0e0;
background: #FFFFFF;
box-shadow: 0 2px 0.857rem 0 rgba(0,0,0,0.07);
border-radius: 0.571rem;
}
.audio-left {
float: left;
text-align: center;
width: 16%;
height: 100%;
}
.audio-left img {
width: 2.285rem;
position: relative;
top: 2.785rem;
margin: 0;
display: initial; /* 解除与app的样式冲突 /
cursor: pointer;
}
.audio-right {
margin-right: 2%;
float: right;
width: 82%;
height: 100%;
}
.audio-right p {
height: 35%;
margin: 1.142rem 0;
/ 歌曲名称只显示在一行，超出部分显示为省略号 */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-family: PingFang-SC-Medium;
font-size: 0.928rem;
color: #333333;
}
.progress-bar-bg {
position: relative;
height: 0.428rem;
width: 94%;
margin-top: -1.3rem;
margin-left: .5rem;
cursor: pointer;
background: #F6F5F8;
border-radius: 0.571rem;
}
.progress-bar {
width: 0;
height: 0.428rem;
background: #3D7ADE;
border-radius: 0.571rem;
}
.progress-bar-bg span {
content: " ";
width: 0.714rem;
height: 0.714rem;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background-color: #3e87e8;
position: absolute;
left: 0;
top: 50%;
margin-top: -0.357rem;
margin-left: -0.357rem;
cursor: pointer;
}
.audio-time {
overflow: hidden;
margin-top: 0.629rem;
margin-left: 0.3rem;
font-family: PingFangSC-Regular;
font-size: 0.857rem;
color: #999999;
}
.audio-length-total {
float: right;
font-size: 0.857rem;
}
.audio-length-current {
float: left;
font-size: 0.857rem;
}
.teacherName{
width: 100%;
position: relative;
font-family: PingFang-SC-Medium;
font-size: 0.928rem;
color: #333333;
}
.teacherName .tryListen{
position: absolute;
right: 0.2rem;
border: 0.5px solid #FF7200;
border-radius: 0.714rem;
padding: 0.1rem 0.4rem;
font-family: PingFang-SC-Regular;
font-size: 0.785rem;
color: #FF7200;
letter-spacing: 0;
text-align: center;
}
.teacherDetial{
font-family: PingFangSC-Semibold;
font-size: 1.214rem;
color: #333333;
letter-spacing: 0;
}

js代码：