单曲播放器定稿版
单曲web页播放器：<br><br>功能：实现基于 audio 控件的单曲播放器，无audio界面，自动播放，循环播放，可暂停&播放、可控制进度。CSS、JS与HTML融合在一个web页，无需剥离（当然也可加工剥离）。能适应各种复杂web页环境。<br><br>代码：<br><br><style type="text/css"><br>#paDiv { margin: auto; width: 220px; display: flex; align-items: center; border: 1px solid olive; border-radius: 8px 0px 8px 0px; background: rgba(0,0,0,.8); box-shadow: 1px 1px 2px #000; }<br>#jindu { position: relative; width: 200px; height: 8px; line-height: 8px; font-size: 10px; color: #eee; text-align: center; background: linear-gradient(90deg, olive, green) no-repeat; background-size: 8px 0px; cursor: pointer; }<br>#btn-ro { width: 20px; height: 20px; line-height: 20px; font-size: 12px; background: linear-gradient(blue, silver, red); outline:none; color: white; border-radius: 50%; text-align: center; cursor: pointer; animation: rol linear 2s infinite; }<br>#btn-ro:hover { opacity: 0.8; }<br>#btn-ro:active { opacity: 1; }<br>@keyframes rol { to { transform:rotate(360deg); } }<br></style><br><br><div id="paDiv"><br> <div id="btn-ro">·</div><br> <div id="jindu"><br> <div id="jd-go"></div><br> </div><br></div><br><br><script language="javascript"><br><br>var btn = document.getElementById('btn-ro');<br>var jindu = document.getElementById('jindu');<br>var aud = document.createElement('audio');<br>aud.loop = true;<br>// 音乐地址放在下行引号内<br>aud.src = "http://www.kumeiwp.com/sub/filestores/2022/02/08/c4598a328b0b6a04000fc461e69737d5.mp3";<br>aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);<br>aud.addEventListener('timeupdate', tmMsg, true);<br>aud.play();<br><br>function tmMsg(){ //进度条<br> let auT = Math.floor(aud.duration - aud.currentTime);<br> let auM = auT / 60;<br> let auMs = parseInt(auM);<br> if (auMs <10) auMs = "0" + auMs;<br> let auS = auT % 60;<br> let auSs = Math.round(auS);<br> if (auSs < 10) auSs = "0" + auSs;<br> jindu.innerHTML = "- " + auMs +":" + auSs;<br> let jd = (100*aud.currentTime)/aud.duration;<br> jindu.style.backgroundSize = jd+ "% 8px";<br>}<br><br>jindu.onclick = function(){ //进度控制<br> let w = offset(jindu,"left");<br> var x = (event.clientX - w) * aud.duration / jindu.clientWidth;<br> aud.currentTime = x;<br>}<br><br>function offset(obj,direction){//获取父级元素偏移总量<br> let offsetDir = "offset" + direction.toUpperCase()+direction.substring(1);<br> let realNum = obj;<br> let positionParent = obj.offsetParent;<br> while(positionParent != null){<br> realNum += positionParent;<br> positionParent = positionParent.offsetParent;<br> }<br> return realNum;<br>}<br><br>btn.onclick = function(){ // 暂停&播放<br> aud.paused ? (aud.play(), btn.style.animationPlayState="running") : (aud.pause(), btn.style.animationPlayState="paused");<br>}<br><br></script><br><br><br>样式演示：<br><br><br><style type="text/css">
#paDiv { margin: auto; width: 220px; display: flex; align-items: center; border: 1px solid olive; border-radius: 8px 0px 8px 0px; background: rgba(0,0,0,.8); box-shadow: 1px 1px 2px #000; }
#jindu { position: relative; width: 200px; height: 8px; line-height: 8px; font-size: 10px; color: #eee; text-align: center; background: linear-gradient(90deg, olive, green) no-repeat; background-size: 8px 0px; cursor: pointer; }
#btn-ro { width: 20px; height: 20px; line-height: 20px; font-size: 12px; background: linear-gradient(blue, silver, red); outline:none; color: white; border-radius: 50%; text-align: center; cursor: pointer; animation: rol linear 2s infinite; }
#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }
</style>
<div id="paDiv">
<div id="btn-ro">·</div>
<div id="jindu">
<div id="jd-go"></div>
</div>
</div>
<script language="javascript">
var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var aud = document.createElement('audio');
aud.loop = true;
// 音乐地址放在下行引号内
aud.src = "http://www.kumeiwp.com/sub/filestores/2022/02/08/c4598a328b0b6a04000fc461e69737d5.mp3";
aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
aud.addEventListener('timeupdate', tmMsg, true);
aud.play();
function tmMsg(){ //进度条
let auT = Math.floor(aud.duration - aud.currentTime);
let auM = auT / 60;
let auMs = parseInt(auM);
if (auMs <10) auMs = "0" + auMs;
let auS = auT % 60;
let auSs = Math.round(auS);
if (auSs < 10) auSs = "0" + auSs;
jindu.innerHTML = "- " + auMs +":" + auSs;
let jd = (100*aud.currentTime)/aud.duration;
jindu.style.backgroundSize = jd+ "% 8px";
}
jindu.onclick = function(){ //进度控制
let w = offset(jindu,"left");
var x = (event.clientX - w) * aud.duration / jindu.clientWidth;
aud.currentTime = x;
}
function offset(obj,direction){//获取父级元素偏移总量
let offsetDir = "offset" + direction.toUpperCase()+direction.substring(1);
let realNum = obj;
let positionParent = obj.offsetParent;
while(positionParent != null){
realNum += positionParent;
positionParent = positionParent.offsetParent;
}
return realNum;
}
btn.onclick = function(){ // 暂停&播放
aud.paused ? (aud.play(), btn.style.animationPlayState="running") : (aud.pause(), btn.style.animationPlayState="paused");
}
</script> 播放器默认水平居中。不需要水平居中时，将 #paDiv 的 margin: auto 去掉 代码与样式演示还可以移步：
http://gxblk.byethost11.com/art/show.php?st=4&sd=jsphp&art=hm_1644807222 黑黑真棒，恭喜黑黑牌播放器横空出世{:4_199:} 厉害厉害，佩服佩服。{:4_199:}
这个可以调颜色吗？ 加林森 发表于 2022-2-14 12:19
厉害厉害，佩服佩服。
这个可以调颜色吗？
能了解代码就可以调色 红影 发表于 2022-2-14 12:05
黑黑真棒，恭喜黑黑牌播放器横空出世
黑黑牌，好名字{:4_170:} 马黑黑 发表于 2022-2-14 12:25
能了解代码就可以调色
嗯嗯。 马黑黑 发表于 2022-2-14 12:26
黑黑牌，好名字
又有好东西可以玩了{:4_187:} 红影 发表于 2022-2-14 14:04
又有好东西可以玩了
黑芝麻糊{:4_170:} 马黑黑 发表于 2022-2-14 17:20
黑芝麻糊
芝麻汤团，元宵节的最爱{:4_173:} 红影 发表于 2022-2-14 20:36
芝麻汤团，元宵节的最爱
元宵节是中国传统的情人节 马黑黑 发表于 2022-2-15 08:40
元宵节是中国传统的情人节
不对吧，七夕才是啊{:4_173:} 红影 发表于 2022-2-15 09:51
不对吧，七夕才是啊
你去查查 马黑黑 发表于 2022-2-15 10:37
你去查查
不用查的啊，只要有情，天天都可以是情人节{:4_173:} 红影 发表于 2022-2-15 13:58
不用查的啊，只要有情，天天都可以是情人节
百度没这么说 马黑黑 发表于 2022-2-15 15:44
百度没这么说
百度的答案多死板，要灵活变通啊。 红影 发表于 2022-2-16 09:27
百度的答案多死板，要灵活变通啊。
不过我也不用百度 马黑黑 发表于 2022-2-16 13:27
不过我也不用百度
其实，我还是经常用的，尤其碰到不明白的。 红影 发表于 2022-2-16 14:06
其实，我还是经常用的，尤其碰到不明白的。
我偶尔用
页:
[1]
2