我的点歌台

绿叶清舟 发表于 2022-2-28 19:39

本帖最后由绿叶清舟于 2022-2-28 20:34 编辑 <br /><br /><DIV align=center color=#ff0000 >
<tablestyle="position: relative;LEFT: -320px; width:1200px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=718 background=https://pic.imgdb.cn/item/621cb2a32ab3f51d91ac54cc.jpg>
</TD></TR>
</table></DIV><BR><BR><BR><BR><BR><BR><BR>

<style type="text/css">
#waiDiv { margin:10px; 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: 12px; 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:-550px; 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, #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>
<DIVstyle="position: relative;LEFT: 110px; TOP: -550px">
<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="muted" type="checkbox" onclick="aud.muted = this.checked ? true : false">静音
            <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://music.163.com/song/media/outer/url?id=5252288.mp3","夜夜夜夜"],
   ["http://music.163.com/song/media/outer/url?id=212430.mp3","飘雪"],
   ["http://music.163.com/song/media/outer/url?id=212652.mp3","夜机"],
   ["http://music.163.com/song/media/outer/url?id=4876355.mp3","至少还有你"],
   ["http://music.163.com/song/media/outer/url?id=103778.mp3","爱我你怕了吗"],
   ["http://music.163.com/song/media/outer/url?id=308490.mp3","走过"],
   ["http://music.163.com/song/media/outer/url?id=1920287954.mp3","叶子"],
   ["https://www.kumeiwp.com/sub/filestores/2022/02/27/e927fdfcf8c44afb713a2b56272ffc62.mp3","如果爱下去"],
   ["http://music.163.com/song/media/outer/url?id=255894.mp3","伤痕"],
   ["http://music.163.com/song/media/outer/url?id=308494.mp3","味道"],
   ["http://music.163.com/song/media/outer/url?id=28781062.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(j=0; j<muAr.length; j++) {
   str += (j+1) + ".<a id='list" + j + "' onclick='iPlay(" + j + ")' >" + 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(){ //处理下一首
   if(aud.paused) 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>

千羽发表于 2022-2-28 20:20

感觉清舟的点歌台挺高端的，技艺非凡啊{:4_199:}{:4_187:}

千羽发表于 2022-2-28 20:22

小碟播放器美美哒。问好清舟{:4_187:}

红影发表于 2022-2-28 20:24

清舟小脑袋灵活，竟然吧这个功能做成了点歌台，太会玩了{:4_189:}

绿叶清舟 发表于 2022-2-28 20:35

千羽发表于 2022-2-28 20:20
感觉清舟的点歌台挺高端的，技艺非凡啊

千羽晚上好，那就是K歌的屏幕啊，网上找来的

绿叶清舟 发表于 2022-2-28 20:36

红影发表于 2022-2-28 20:24
清舟小脑袋灵活，竟然吧这个功能做成了点歌台，太会玩了

这个可以随便组合了，就把自己爱唱的都整来了{:4_189:}

千羽发表于 2022-2-28 20:40

绿叶清舟发表于 2022-2-28 20:35
千羽晚上好，那就是K歌的屏幕啊，网上找来的

你编辑到你的图里了，感觉就挺高大上的{:4_173:}

小辣椒 发表于 2022-2-28 20:50

清舟这个点歌台图片背景，我还真蒙了一下{:4_172:}

小辣椒 发表于 2022-2-28 20:52

找了一下+的歌曲清舟放最上面去了

红影发表于 2022-2-28 21:11

绿叶清舟发表于 2022-2-28 20:36
这个可以随便组合了，就把自己爱唱的都整来了

清舟居然能想到点歌台这样的玩法，太灵活了{:4_199:}

樵歌发表于 2022-2-28 21:12

这啥设备，好高端大气上档次！{:4_187:}

绿叶清舟 发表于 2022-2-28 21:26

樵歌发表于 2022-2-28 21:12
这啥设备，好高端大气上档次！

樵歌晚上好，KTV点歌的屏幕了{:4_173:}

绿叶清舟 发表于 2022-2-28 21:27

小辣椒发表于 2022-2-28 20:50
清舟这个点歌台图片背景，我还真蒙了一下

是不是真想拿手去点了啊{:4_189:}

绿叶清舟 发表于 2022-2-28 21:29

千羽发表于 2022-2-28 20:40
你编辑到你的图里了，感觉就挺高大上的

把KTV搬来了{:4_189:}

樵歌发表于 2022-3-2 13:50

绿叶清舟发表于 2022-2-28 21:26
樵歌晚上好，KTV点歌的屏幕了

比那好多了。不过我也好多年没去K过了。{:4_170:}就这土，哈哈

大猫咪 发表于 2022-3-2 20:15

这制作真棒啊，开头独白还以为是清舟呢{:5_117:} 以后是不是可以点歌了啊 {:5_117:}

晚上好！

{:4_204:}{:4_190:}

冬天的雨 发表于 2022-3-2 21:43

音乐重叠，我关了所有网页还是有2个音乐

绿叶清舟 发表于 2022-3-3 18:55

樵歌发表于 2022-3-2 13:50
比那好多了。不过我也好多年没去K过了。就这土，哈哈

樵歌就是去也不用亲自点歌的吧

绿叶清舟 发表于 2022-3-3 18:55

大猫咪发表于 2022-3-2 20:15
这制作真棒啊，开头独白还以为是清舟呢以后是不是可以点歌了啊

晚上好！

猫好，想点啥就点啥了

绿叶清舟 发表于 2022-3-3 18:57

冬天的雨发表于 2022-3-2 21:43
音乐重叠，我关了所有网页还是有2个音乐

是不是就第一首这样？

页: [1] 2

花潮论坛's Archiver

我的点歌台