转载自：https://blog.csdn.net/Dandelion_drq/article/details/77645659
以下是我修改的代码：
html代码:
<div class="courseInfo">
<p class="picTeacher">
<img src="../img/Group 8 Copy.png" />
<span class="teacherDetial">课程详情</span>
</p>
<p class="audioC">音频课程</p>
<div class="audio-wrapper">
<audio>
<source src="http://m10.music.126.net/20180330105747/bfabe9fca0e227d4b70dc2d9dd3f5fc8/ymusic/edc1/769a/2222/a338ca5b70cd1ca3bb7d06b2edbe70a9.mp3" type="audio/mp3">
</audio>
<div class="audio-left"><img id="audioPlayer" src="../img/Group 4 Copy.png"></div>
<div class="audio-right">
<p class="teacherName"><span>上帝视角看民宿产业 - 马化腾</span><span class="tryListen">试听三分钟</span></p>
<div class="progress-bar-bg" id="progressBarBg"><span id="progressDot"></span>
<div class="progress-bar" id="progressBar"></div>
</div>
<div class="audio-time"><span class="audio-length-current" id="audioCurTime">00:00</span><span class="audio-length-total"></span></div>
</div>
</div>
</div>
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代码：
<script>
$(document).ready(function () {
// 控制音频文件名显示宽度
var maxW = $('.audio-right').width();
$('.audio-right p').css({
"max-width": maxW
});
initAudioEvent();
});
/**
* 初始化音频控制事件
*/
function initAudioEvent() {
var audio = $('audio')[0];
console.log(audio.duration)
// 点击播放/暂停图片时，控制音乐的播放与暂停
$('#audioPlayer').click(function () {
if(audio.currentTime >=180){
return false;
}
// 监听音频播放时间并更新进度条
audio.addEventListener('timeupdate', function () {
updateProgress(audio);
console.log(updateProgress(audio))
}, false);
// 监听播放完成事件
audio.addEventListener('ended', function () {
audioEnded();
}, false);
// 改变播放/暂停图片
if (audio.paused) {
// 开始播放当前点击的音频
audio.play();
$('#audioPlayer').attr('src', '../img/Group 33 Copy 6.png');
} else {
audio.pause();
$('#audioPlayer').attr('src', '../img/Group 4 Copy.png');
}
console.log(audio.currentTime);
//试听三分钟
if(audio.currentTime >=180){
audio.pause();
$('#audioPlayer').attr('src', '../img/Group 4 Copy.png');
}
});
// 点击进度条跳到指定点播放
// PS：此处不要用click，否则下面的拖动进度点事件有可能在此处触发，此时e.offsetX的值非常小，会导致进度条弹回开始处（简直不能忍！！）
$('#progressBarBg').on('mousedown', function (e) {
// 只有音乐开始播放后才可以调节，已经播放过但暂停了的也可以
audio.currentTime = 10;
if (!audio.paused || audio.currentTime != 0) { //音频播放，且播放时间不为0. 如果音频暂停，则audio.paused为true
var pgsWidth = $('.progress-bar-bg').width();
var rate = e.offsetX / pgsWidth;
audio.currentTime = audio.duration * rate; //在火狐、IE浏览器中设置成功，但是在chrome中失败。解决方案：将src把音频/视频放到服务器，使用http://的播放地址
console.log(audio.currentTime)
//试听三分钟
if(audio.currentTime >=180){
audio.pause();
$('#audioPlayer').attr('src', '../img/Group 4 Copy.png');
}
updateProgress(audio);
}
});
var dot = document.getElementById('progressDot');
// 鼠标拖动进度点时可以调节进度
// 只有音乐开始播放后才可以调节，已经播放过但暂停了的也可以
// 鼠标按下时
dot.onmousedown = function (e) {
if (!audio.paused || audio.currentTime != 0) {
var oriLeft = dot.offsetLeft;
var mouseX = e.clientX;
var maxLeft = oriLeft; // 向左最大可拖动距离
var maxRight = document.getElementById('progressBarBg').offsetWidth - oriLeft; // 向右最大可拖动距离
// 禁止默认的选中事件（避免鼠标拖拽进度点的时候选中文字）
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
// 禁止事件冒泡
if (e && e.stopPropagation) {
e.stopPropagation();
} else {
window.event.cancelBubble = true;
}
// 开始拖动
document.onmousemove = function (e) {
var length = e.clientX - mouseX;
if (length > maxRight) {
length = maxRight;
} else if (length < -maxLeft) {
length = -maxLeft;
}
var pgsWidth = $('.progress-bar-bg').width();
var rate = (oriLeft + length) / pgsWidth;
audio.currentTime = audio.duration * rate;
updateProgress(audio);
};
// 拖动结束
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
};
}
};
}
/**
* 更新进度条与当前播放时间
* @param audio - audio对象
*/
function updateProgress(audio) {
var value = audio.currentTime / audio.duration;
$('#progressBar').css('width', value * 100 + '%');
$('#progressDot').css('left', value * 100 + '%');
$('#audioCurTime').html(transTime(audio.currentTime));
$('.audio-length-total').text(transTime(audio.duration));
if(audio.currentTime >= 180){
audio.pause();
$('#audioPlayer').attr('src', '../img/Group 4 Copy.png');
}
}
/**
* 播放完成时把进度调回开始的位置
*/
function audioEnded() {
$('#progressBar').css('width', 0);
$('#progressDot').css('left', 0);
$('#audioPlayer').attr('src', '../img/Group 4 Copy.png');
}
/**
* 音频播放时间换算
* @param {number} value - 音频当前播放时间，单位秒
*/
function transTime(value) {
var time = "";
var h = parseInt(value / 3600);
value %= 3600;
var m = parseInt(value / 60);
var s = parseInt(value % 60);
if (h > 0) {
time = formatTime(h + ":" + m + ":" + s);
} else {
time = formatTime(m + ":" + s);
}
return time;
}
/**
* 格式化时间显示，补零对齐
* eg：2:4 --> 02:04
* @param {string} value - 形如 h:m:s 的字符串
*/
function formatTime(value) {
var time = "";
var s = value.split(':');
var i = 0;
for (; i < s.length - 1; i++) {
time += s[i].length == 1 ? ("0" + s[i]) : s[i];
time += ":";
}
time += s[i].length == 1 ? ("0" + s[i]) : s[i];
return time;
}
</script>