<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>我的音乐播放器</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css" />
<link rel="stylesheet" type="text/css" href="css/reset.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<section class="body">
<!--歌曲名称-->
<header class="head">
<h1>-----歌曲欣赏-----</h1>
<h2>红昭愿 - 音阙诗听</h2>
</header>
<!--播放器主体-->
<section class="wapper">
<!--歌曲图片-->
<!--播放源-->
<audio id="audio">
<source type="audio/mpeg" src="http://sc1.111ttt.cn/2018/1/03/13/396131227447.mp3"></source>
</audio>
<!--播放器主体-->
<article class="player">
<!--进度条-->
<section id="progress" class="progress">
<!--以缓存的进度-->
<section class="cache-bar">
<!--已播放进度条-->
<section class="progress-bar"></section>
</section>
<!--按钮-->
<section class="progress-btn"></section>
</section>
<!--播放时间-->
<section class="time">
<!--开始时间-->
<section class="beginTime">00:00</section>
<!--结束时间-->
<section class="endTime">00:00</section>
</section>
<!--播放按钮-->
<section class="playBtn iconfont" onclick="togglePlayBtn(this)"></section>
</article>
</section>
</section>
<!--js-->
<script type="text/javascript">
//获取播放源
var me_audio = document.getElementById("audio");
//获取音频进度条的总宽度，宽度只能通过id取，通过className取不到
var w = document.getElementById("progress");
//获得进度条的宽度
var p_width = w.clientWidth || w.offsetWidth;
//声明触摸和拖动进度条变量 开始触摸点、滑动的长度，手指松开的点
var startX, moveX, endX;
//点击切换播放按钮样式
var btn_class = true;
//点击切换播放按钮样式
function togglePlayBtn(obj) {
if(btn_class) {
//开始播放音频
me_audio.play();
obj.innerHTML = ""
btn_class = false;
} else {
//暂停音频文件
me_audio.pause();
obj.innerHTML = ""
btn_class = true;
}
}
//监听音频播放
me_audio.ontimeupdate = () => {
//获得已播放的长度 = 已播放的时间 / 总时长再 * 进度条的宽度
var play_bar = me_audio.currentTime / me_audio.duration * p_width;
document.getElementsByClassName("beginTime")[0].innerHTML = formatDuraton(me_audio.currentTime);
document.getElementsByClassName("progress-bar")[0].style.width = play_bar + "px";
document.getElementsByClassName("progress-btn")[0].style.left = (play_bar - 5) + "px";
var loaded;
// 获取已缓冲部分的 TimeRanges 对象
var timeRanges = me_audio.buffered;
// 获取以缓存的时间
var timeBuffered = timeRanges.end(timeRanges.length - 1);
// 获取缓存进度，值为0到1
var bufferPercent = timeBuffered / me_audio.duration;
loaded = Math.round(100 * timeRanges.end(0) / me_audio.duration) + "%";
document.getElementsByClassName("cache-bar")[0].style.width = loaded;
if(bufferPercent == 1) {
document.getElementsByClassName("cache-bar")[0].style.width = "100%";
}
document.getElementsByTagName("h2").innerHTML = txt;
}
//页面加载完成后设置播放时间
me_audio.oncanplay = function() {
//设置已播放时间me_audio.currentTime和总时长me_audio.duration
document.getElementsByClassName("beginTime")[0].innerHTML = formatDuraton(me_audio.currentTime);
document.getElementsByClassName("endTime")[0].innerHTML = formatDuraton(me_audio.duration);
}
//监控音频是否播放完毕
me_audio.addEventListener("ended", function() {
//播放完毕让进度条回到起点并设置播放按钮的Class
document.getElementsByClassName("progress-bar")[0].style.width = 0 + "px";
document.getElementsByClassName("progress-btn")[0].style.left = -9 + "px";
document.getElementsByClassName("playBtn")[0].innerHTML = "";
}, false);
//监控手指触摸
document.getElementsByClassName("progress-btn")[0].addEventListener("touchstart", function(e) {
e.preventDefault();
//pageX:触摸目标在页面中的x坐标
startX = e.touches[0].pageX;
me_audio.pause();
}, false);
//监控手指滑动
document.getElementsByClassName("progress-btn")[0].addEventListener("touchmove", function(e) {
e.preventDefault();
//pageX:触摸目标在页面中的x坐标
moveX = e.touches[0].pageX - startX;
//获得已播放的长度再加上拖动的距离
var m_width = me_audio.currentTime / me_audio.duration * p_width + moveX;
if(m_width <= p_width && m_width >= 0) {
document.getElementsByClassName("progress-bar")[0].style.width = m_width + "px";
document.getElementsByClassName("progress-btn")[0].style.left = (m_width - 9) + "px";
}
var bt = parseInt(formatDuraton(m_width / p_width * me_audio.duration));
if(bt < 0) {
document.getElementsByClassName("beginTime")[0].innerHTML = '00:00:00';
} else {
document.getElementsByClassName("beginTime")[0].innerHTML = formatDuraton(m_width / p_width * me_audio.duration);
var loaded;
// 获取已缓冲部分的 TimeRanges 对象
var timeRanges = me_audio.buffered;
// 获取以缓存的时间
var timeBuffered = timeRanges.end(timeRanges.length - 1);
// 获取缓存进度，值为0到1
var bufferPercent = timeBuffered / me_audio.duration;
loaded = Math.round(100 * timeRanges.end(0) / me_audio.duration) + "%";
document.getElementsByClassName("cache-bar")[0].style.width = loaded;
}
if(bufferPercent == 1) {
document.getElementsByClassName("cache-bar")[0].style.width = "100%";
}
}, false);
//监控手指松开
document.getElementsByClassName("progress-btn")[0].addEventListener("touchend", function(e) {
e.preventDefault();
//获得按钮的左边局计算出播放时间
endX = document.getElementsByClassName("progress-bar")[0].style.width;
//去除获得边距单位然后转为整数
var change = parseInt(endX.replace("px", ""));
var currentTime = change / (p_width) * me_audio.duration;
//在移动端下需要线播放
me_audio.play();
//设置播放按钮图标样式
document.getElementsByClassName("playBtn")[0].innerHTML = "";
btn_class = false;
me_audio.currentTime = currentTime;
}, false);
//音频时长转换
function formatDuraton(time) {
if(time > -1) {
var hour = Math.floor(time / 3600);
var min = Math.floor(time / 60) % 60;
var sec = time % 60;
//去除小数点
sec = Math.round(sec);
if(hour < 10) {
time = '0' + hour + ":";
} else {
time = hour + ":";
}
if(min < 10) {
time += "0";
}
time += min + ":";
if(sec < 10) {
time += "0";
}
time += sec;
}
return time;
}
</script>
</body>
</html>
3355
06-16
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
