论坛 › 欢乐水吧 › 《星月之舞》 十二首音乐！

加林森 发表于 2022-3-5 13:37

《星月之舞》 十二首音乐！

本帖最后由 加林森 于 2022-3-5 21:41 编辑 <br /><br /><style type="text/css">/*2022*/
#waiDiv{ margin:10px; float:right; padding:8px; width:400px; background:#ADD8E6; border-radius:10px; box-shadow:2px 2px 4px #ADD8E6; 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:#ADD8E6; 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 #00BFFF; border-radius:2px; }
#prompt input { outline:none; }
#prompt mpt 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:(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;left:-203px;width:1000px;height:750px;background:#eee url('https://pic.imgdb.cn/item/6222f5fc5baa1a80ab3325d3.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="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>/*2022*/
var muAr = [
        ["http://www.kumeiwp.com/sub/filestores/2022/03/05/4a8e887ecaa89af596d0dcab9d69f210.mp3","星月之舞"],
        ["http://www.kumeiwp.com/sub/filestores/2022/03/05/4269273d0543b5b82c89967aaf8d9f4f.mp3","此情可待"],
        ["http://www.kumeiwp.com/sub/filestores/2022/03/05/8c2870a515f204f64ead1b1effba7b47.mp3","此生不再"],
        ["http://www.kumeiwp.com/sub/filestores/2022/03/05/5a165eb31c5dca5ad0e1b504d40c04b2.mp3","月亮代表我的心"],
        ["http://www.kumeiwp.com/sub/filestores/2022/03/04/f05e172a2bfe8b75c63ea2a9f73b77aa.mp3","花僮 - 笑纳(粤语沈念DJ版)"],
        ["http://www.kumeiwp.com/sub/filestores/2022/03/04/ecfb090099819c89f066e72c1035e2d4.mp3","花僮 - 花间一壶酒(Dj沈念版)"],
        ["http://www.kumeiwp.com/sub/filestores/2022/03/04/62dd38d4e6af112b104bb9c6e8840dd8.mp3","花僮 - 浪子闲话(DJ沈念版)."],
        ["http://www.kumeiwp.com/sub/filestores/2022/03/04/033a754834f93554c051fb158ea720e8.mp3","花僮 - 只要平凡"],
        ["http://www.kumeiwp.com/sub/filestores/2022/03/04/8f57a453e1ced6707d81805f4991cf72.mp3","花僮 - 公子向北走"],
        ["http://www.kumeiwp.com/sub/filestores/2022/03/04/4c48d09315af2bace7eb1f6cbd60aa04.mp3","花僮 - 盗将行"],
        ["http://www.kumeiwp.com/sub/filestores/2022/03/04/d7b84c5af95b8b03cf71a1060e687b81.mp3","花僮 - 最天使"],
      ["http://www.kumeiwp.com/sub/filestores/2022/03/04/f179f30fa24a9ddf59c21007182977a1.mp3","花僮 - 笑纳(DJ沈念版)"]
];

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 + ");howplay();' >" + 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 + ");howplay();' >" + str2 + "</a><br />";
                iPlay(tnum);
                howplay();
                uri.value = "";
                name.value = "";
        }
        prom.style.display = "none";
}
//自动播放（默认播放第一首）
iPlay(playIdx);

</script>

红影 发表于 2022-3-5 14:01

这么多，有乐曲也有歌曲，队长真漂亮的帖子{:4_187:}

红影 发表于 2022-3-5 14:11

休息天听听歌曲，真不错{:4_187:}

加林森 发表于 2022-3-5 16:55

红影 发表于 2022-3-5 14:01
这么多，有乐曲也有歌曲，队长真漂亮的帖子

中午刚制作的。{:4_187:}

加林森 发表于 2022-3-5 16:56

红影 发表于 2022-3-5 14:11
休息天听听歌曲，真不错

就是，这样才是生活嘛。{:4_204:}{:4_190:}

加林森 发表于 2022-3-5 20:55

@小辣椒

小辣椒 发表于 2022-3-5 21:00

队长这个黑黑的专辑分享播放器，你点击加号看看，出来的对话框是不是对的

小辣椒 发表于 2022-3-5 21:01

队长很认真的，每天都有几个新的东西出来{:4_178:}

加林森 发表于 2022-3-5 21:03

小辣椒 发表于 2022-3-5 21:00
队长这个黑黑的专辑分享播放器，你点击加号看看，出来的对话框是不是对的

我又忘记了，应该吧歌曲与调整也复制进去就对了。{:5_102:}

小辣椒 发表于 2022-3-5 21:14

加林森 发表于 2022-3-5 21:03
我又忘记了，应该吧歌曲与调整也复制进去就对了。

不要急，以后在自己电脑预览一下看看做的效果再发论坛。

加林森 发表于 2022-3-5 21:17

小辣椒 发表于 2022-3-5 21:14
不要急，以后在自己电脑预览一下看看做的效果再发论坛。

好的好的。

红影 发表于 2022-3-5 22:04

加林森 发表于 2022-3-5 16:55
中午刚制作的。

队长的帖子现在做的很棒{:4_187:}

红影 发表于 2022-3-5 22:04

加林森 发表于 2022-3-5 21:17
好的好的。

这些音乐都很不错的。

加林森 发表于 2022-3-5 22:20

红影 发表于 2022-3-5 22:04
队长的帖子现在做的很棒

你制作的也挺好的啊。{:4_204:}

加林森 发表于 2022-3-5 22:21

红影 发表于 2022-3-5 22:04
这些音乐都很不错的。

前四首是纯音乐，后面的全部是歌曲。

红影 发表于 2022-3-5 23:02

加林森 发表于 2022-3-5 22:20
你制作的也挺好的啊。

我都挺长时间没做了{:4_173:}

加林森 发表于 2022-3-5 23:08

红影 发表于 2022-3-5 23:02
我都挺长时间没做了

制作点出来玩吧。{:4_189:}

红影 发表于 2022-3-6 10:51

加林森 发表于 2022-3-5 23:08
制作点出来玩吧。

等消寒消完，做点帖子玩{:4_173:}

加林森 发表于 2022-3-6 10:54

红影 发表于 2022-3-6 10:51
等消寒消完，做点帖子玩

嗯嗯。

大猫咪 发表于 2022-3-6 10:57

队长制作越来越棒了，音乐也经典，真棒， 周末快乐！

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

查看完整版本: 《星月之舞》 十二首音乐！