张晓明梅花泪等合集欣赏（顺祝大家元宵快乐）
<style type="text/css">#waiDiv { margin:10px; float:right; padding:8px; width:400px; background:#696969; border-radius:10px; box-shadow:2px 2px 4px #000; display:flex; flex-direction:column; position:relative; }
#audDiv { width:100%; display:flex; flex-direction:row; align-items:center; font-size:10px; position: relative; }
#add1 { margin-left: 10px; background:#eee; text-align:center; width:20px; height:20px; line-height:20px; border-radius:50%; cursor:pointer; }
#add1:hover { color: red; }
#mLiDiv { margin-top: 10px; background:#eee; color:#000; min-height:100px; padding:10px; border:1px solid olive; font-size:14px; column-count: 2;}
#mLiDiv a { text-decoration: none; cursor:pointer; }
#mLiDiv a:hover { color:red; }
#prompt { position:absolute; left:200px; top:50px; width:400px; padding:6px 12px; background:silver; font-size:12px; display:none; box-shadow:1px 1px 1px #666; border-radius:2px; }
#prompt input { outline:none; }
#prompt input { margin:4px;padding:4px; width:392px; }
#prompt input { border-radius:4px; cursor:pointer;border:1px solid gray; border-radius:3px; box-shadow: 1px 1px 2px #444; }
#audDiv input { cursor:pointer; }
#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; position: relative; }
#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 style="position:relative;width:1000px;height:750px; left:-204px; background:#eee url('/data/attachment/forum/202202/15/172524qhlsdzl25dnooev5.jpg') no-repeat; border:2px solid tan;">
<div id="waiDiv">
<div id="audDiv">
<div id="paDiv">
<div id="btn-ro">·</div>
<div id="jindu">
<div id="jd-go"></div>
</div>
</div>
<input id="dqxh" type="radio" name="rad" checked="checked" onclick="howplay()" />单曲
<input id="lhbf" type="radio" name="rad" onclick="howplay()" />轮播
<div id="add1">+</div>
</div>
<div id="mLiDiv"></div>
<div id="prompt">
<div>添歌</div>
<input type="text" id="mName" placeholder="歌曲名称" /><br />
<input type="text" id="mUrl" placeholder="歌曲地址" /><br />
<div style="text-align:center;">
<input id="subMe" type="button" value=" 添加 " />
<input id="cancelMe" type="button" value=" 算了 " />
</div>
</div>
</div>
</div>
<script>
var muAr = [
["http://www.kumeiwp.com/sub/filestores/2021/01/31/7341dcedf43c11dd16d22800f7097204.mp3","梅花泪"],
["http://www.kumeiwp.com/sub/filestores/2021/01/31/9d1f8a6e5f8171b2a1b7bd3effc36b0e.mp3","雪中情"],
["http://www.kumeiwp.com/sub/filestores/2021/01/31/221e902c0841fade7d57ae35b70ad94a.mp3","枉凝眉"],
["http://www.kumeiwp.com/sub/filestores/2021/01/29/7f2828d2faf8f710b285fffc3818b984.mp3","拈花一笑"],
["http://www.kumeiwp.com/sub/filestores/2021/01/31/3d9d17edd08bb95ef71ba6c580cc45ca.mp3","烟雨蒙蒙"],
["http://www.kumeiwp.com/sub/filestores/2021/01/31/2d87e1011fc22e326aed9b8436405f48.mp3","一世红颜（发行版）"],
["http://www.kumeiwp.com/sub/filestores/2021/01/31/d753d2f30d5aa1a0a61ad850822acc18.mp3","相见时难别亦难"],
["http://www.kumeiwp.com/sub/filestores/2021/01/31/fe7298c44bd037f53bec503f8cb01b87.mp3","牧羊曲"],
["http://www.kumeiwp.com/sub/filestores/2021/01/31/313d903820b57279a077127a4f505c60.mp3","风往哪里吹"],
["http://www.kumeiwp.com/sub/filestores/2021/01/31/8c35f4ec78625a58e7f2e763278dfded.mp3","春花秋月"],
["http://www.kumeiwp.com/sub/filestores/2021/01/31/298692fcf28214e68c7a8a3668f12fdc.mp3","女儿情"]
];
var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var aud = document.getElementById('myPlayer');
var mLi = document.getElementById('mLiDiv');
var mAdd = document.getElementById('add1');
var prom = document.getElementById('prompt');
var cancelMe = document.getElementById('cancelMe');
var subMe = document.getElementById('subMe');
var dqxh = document.getElementById('dqxh');
var lhbf = document.getElementById('lhbf');
var aud = document.createElement('audio');
aud.loop = true;
var playIdx = 0; //当前曲索引
if(aud.paused) btn.style.animationPlayState="paused";
//写歌单
var str = "";
for(i=0;i<muAr.length; i++) {
str += (i+1) + ".<a id='list" + i + "' onclick='iPlay(" + i + ")' >" + muAr + "</a><br />";
}
mLi.innerHTML += str;
function iPlay(idx){ //播放函数
playIdx = idx;
aud.src = muAr;
aud.play();
aud.addEventListener('timeupdate', tmMsg, true);
aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
btn.style.animationPlayState="running";
nameRed(playIdx);
}
function howplay(){ //单曲&轮播处理
dqxh.checked ? aud.loop = true : (aud.loop = false,playNext(),aud.addEventListener('ended',playNext,false));
prom.style.display = "none";
}
function playNext(){ //处理下一首
iPlay(playIdx);
playIdx += 1;
if(playIdx >= muAr.length) playIdx = 0;
}
function nameRed(){ //歌单着色
for(k=0;k<muAr.length;k++){
let listId = "list" + k;
document.getElementById(listId).style.removeProperty("color");
}
listId = "list" + playIdx;
document.getElementById(listId).style.color = "red";
}
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;
let jd = (100*aud.currentTime)/aud.duration;
if(jd>0) {
jindu.innerHTML = "- " + auMs +":" + auSs;
jindu.style.backgroundSize = jd+ "% 8px";
}
}
jindu.onclick = function(){ //进度控制
let w = offset(jindu,"left");
let 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");
}
mAdd.onclick = function(){ prom.style.display = "block"; } //呼出加歌界面
cancelMe.onclick = function(){ prom.style.display = "none"; } //放弃加歌
subMe.onclick = function(){ //加歌并播放新歌
let uri = document.getElementById('mUrl');
let name = document.getElementById('mName');
let tnum = muAr.length;
let str1 = uri.value.trim();
let str2 = name.value.trim();
if(str1 !="" && str2 != ""){
muAr = ;
mLi.innerHTML += (tnum+1) + ".<a id='list" + tnum + "' onclick='iPlay(" + tnum + ")' >" + str2 + "</a><br />";
iPlay(tnum);
uri.value = "";
name.value = "";
}
prom.style.display = "none";
}
//自动播放（默认播放第一首）
iPlay(playIdx);
</script>
真漂亮的制作{:4_187:} 可以添加歌曲，还可以自动播放，这个是这个播放器的完美运用{:4_187:} 红影 发表于 2022-2-15 19:17
可以添加歌曲，还可以自动播放，这个是这个播放器的完美运用
这是支持多首连放，还可扩展 这个播放器颜色喜欢，制作漂亮{:4_204:}
元宵节快乐 绿叶清舟 发表于 2022-2-15 22:10
这个播放器颜色喜欢，制作漂亮
元宵节快乐
谢谢，同祝 马黑黑 发表于 2022-2-15 22:21
谢谢，同祝
这样自己可以组合专辑了，一直想把常静的离弦给找出来 绿叶清舟 发表于 2022-2-15 22:23
这样自己可以组合专辑了，一直想把常静的离弦给找出来
里面还有几个细节没处理好：点击歌单列表某一曲和添加新歌时，是单曲循环还是轮回播放，忽略了。 黑黑，这个播放器上去更加精美了{:4_178:} 比前面那个专辑播放器精致了许多 我到现在都感觉太神奇了，居然css可以直接写出专辑播放器代码，而且不用上传，直接论坛可以发，真的又美观又方便，黑黑你太厉害了{:4_187:} 小辣椒 发表于 2022-2-15 22:55
我到现在都感觉太神奇了，居然css可以直接写出专辑播放器代码，而且不用上传，直接论坛可以发，真的又美观 ...
确切地说，这是CSS+JS厉害：前者绘制界面，后者实现功能。只要环境支持CSS和JS，这些就可以融合在一起的 马黑黑 发表于 2022-2-15 23:12
确切地说，这是CSS+JS厉害：前者绘制界面，后者实现功能。只要环境支持CSS和JS，这些就可以融合在一起的
感觉这些对我去来说很难了，我只能按你的分享制作，玩玩了 小辣椒 发表于 2022-2-15 23:28
感觉这些对我去来说很难了，我只能按你的分享制作，玩玩了
可以的。这些CSS和JS，没有系统地学习，能看懂并能修改为己用，就很不错了 马黑黑 发表于 2022-2-15 23:12
确切地说，这是CSS+JS厉害：前者绘制界面，后者实现功能。只要环境支持CSS和JS，这些就可以融合在一起的
每次你分享了代码我要看很久，捣鼓了许多时间还是看不懂，想自己加一点东西进去也是怕会代码很乱了 小辣椒 发表于 2022-2-15 23:30
每次你分享了代码我要看很久，捣鼓了许多时间还是看不懂，想自己加一点东西进去也是怕会代码很乱了
确定哪一部分是自己可以修改的，就大胆动刀，没关系的，乱了再来 马黑黑 发表于 2022-2-15 23:31
确定哪一部分是自己可以修改的，就大胆动刀，没关系的，乱了再来
以前我就老这样乱改的，现在好像css我不理解可以怎么改 马黑黑 发表于 2022-2-15 23:29
可以的。这些CSS和JS，没有系统地学习，能看懂并能修改为己用，就很不错了
我自己改会乱七八糟的，而且特别花时间，所以就玩你分享的也是不错的{:4_173:} 小辣椒 发表于 2022-2-15 23:38
我自己改会乱七八糟的，而且特别花时间，所以就玩你分享的也是不错的
修改能修改的，就像你刚刚做的那样 马黑黑 发表于 2022-2-15 23:39
修改能修改的，就像你刚刚做的那样
反正我一边学习，一边玩，也是不错的，现在花潮有你在我会每天上来看看的
黑黑我下了，今天太迟了
晚安