《梦里水乡》张玮伽

焱鑫磊 发表于 2023-6-8 23:10

本帖最后由焱鑫磊于 2023-6-8 23:47 编辑 <style type="text/css">
#outer{
 left: -200px;top:100px;
 width: 1000px;
 height:600px;
 box-shadow: 0px 0px 0px 0px #cccccc, 0px 0px 0px 0px #880000; overflow:
hidden;transform:rotate(0deg);background: url('https://pic.imgdb.cn/item/6481f5e91ddac507cc549d97.png')0 0/100%100%;
 position: relative;
 display: grid;
 --opt: .85;
}
#outer::before { position: absolute; content: ''; background: url('https://pic.imgdb.cn/item/6412e67aebf10e5d530a990b.gif') repeat; width:100%; height: 100%; mix-blend-mode: screen; opacity: var(--opt); animation: opa linear 20s infinite alternate; }
#mLiDiv {position: relative; margin-top: 200px;margin-left: 200px; color:#000; width:280px;height:200px; font-size:16px; font-family:微软雅黑;z-index: 10;}
#mLiDiv a { text-decoration: none; cursor:pointer; }
#mLiDiv a:hover { color:blue; }
#tmsg {
 position: absolute;
 font: normal 16px sans-serif;
 color: #000;
 top:568px;
 left:860px;
}

#prog {
 position: absolute;
 width: 780px;
 height: 3px;
 cursor: pointer;
 top:577px;
 left:17px;
box-shadow:0px 0px 0px 0.5px #fff
}

</style>
 <div id="outer">
 <div id="mLiDiv"></div>
 <divid="prog"></div>
 00:00 | 00:00

</div>
<script>
var muAr = [["https://mp3.wf/uploap/file/20230608223049.mp3","莫斯科郊外的晚上"],
["https://mp3.wf/uploap/file/20230608223307.mp3","映山红"],
["https://mp3.wf/uploap/file/20230608223536.mp3","我的祖国"],
["https://mp3.wf/uploap/file/20230608223829.mp3","浏阳河"],
["https://mp3.wf/uploap/file/20230608223942.mp3","茉莉花"],
["https://mp3.wf/uploap/file/20230608224039.mp3","南泥湾"],
["https://mp3.wf/uploap/file/20230608224137.mp3","洪湖水浪打浪"],
["https://mp3.wf/uploap/file/20230608224237.mp3","雁南飞"],
["https://mp3.wf/uploap/file/20230608224332.mp3","梦里水乡"],
["https://mp3.wf/uploap/file/20230608224438.mp3","阿里山的姑娘"],
["https://mp3.wf/uploap/file/20230608224534.mp3","大海啊，故乡"]
];

var mLi = document.getElementById('mLiDiv');
var aud = document.createElement('audio');
var playIdx = 0;
var str = "";
for(j=0; j<muAr.length; j++) {
 str += (j+1) + ".<a id='list" + j + "' onclick='iPlay(" + j + ")' >" + muAr + "</a> ";
}
mLi.innerHTML += str;

function iPlay(idx){
 playIdx = idx;
 aud.src = muAr;
 aud.play();
 nameRed(playIdx);
}
aud.onended = function() {
 playIdx ++;
 if(playIdx >= muAr.length) playIdx = 0;
aud.src = muAr;
aud.play();
nameRed(playIdx);
}

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";
}

 prog.onclick = (e) => {
 aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
 }

 aud.addEventListener('timeupdate', () => {
 prog.style.background= 'linear-gradient(90deg, rgba(0,0,255,1)' + aud.currentTime / aud.duration * 100 + '%, transparent 0)';
 tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);

 });

 let toMin = (val) => {
 if (!val) return '00:00';
 val = Math.floor(val);
 let min = parseInt(val / 60),
 sec = parseFloat(val % 60);
 if (min < 10) min = '0' + min;
 if (sec < 10) sec = '0' + sec;
 return min + ':' + sec;
 };

iPlay(playIdx);
</script>

 

 

 

 

 

 

寻梦花园<a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=69260">https://www.huachaowang.com/forum.php?mod=viewthread&tid=69260</a>
 
原地址：http://“花潮论坛”不支持，上传至https://网站，播放正常。
 
http://fs.ringop.kugou.com/KGTX/CLTX001/8b7ab226dadc5d9a4e8db0535f2f4496.mp3莫斯科郊外的晚上
http://fs.ringop.kugou.com/KGTX/CLTX003/cfcb0ef87b4a5e9c394fcf3c39d64701.mp3映山红
http://fs.ringop.kugou.com/KGTX/CLTX001/98d87e66c7ff2733937cfa4966a93fe9.mp3我的祖国
http://fs.ringop.kugou.com/KGTX/CLTX001/a93b81c06c677fb595fa006a0ee6d855.mp3浏阳河
http://fs.ringop.kugou.com/KGTX/CLTX001/f3137dec0959c0431e0cf316322670cd.mp3茉莉花
http://fs.ringop.kugou.com/KGTX/CLTX001/fd529d332732bd57e904fa3fc3a8542f.mp3南泥湾
http://fs.ringop.kugou.com/KGTX/CLTX001/00eb872747c3446c71450d988832ace4.mp3洪湖水浪打浪
http://fs.ringop.kugou.com/KGTX/CLTX001/fb2c7fa7e270172920b9a22c0e6c491d.mp3雁南飞
http://fs.ringop.kugou.com/KGTX/CLTX003/f5d87c3653afd7e92134c2907c92ee95.mp3梦里水乡
http://fs.ringop.kugou.com/KGTX/CLTX001/667ed3704dcbb47c7da574a27bdb0e12.mp3阿里山的姑娘
http://fs.ringop.kugou.com/KGTX/CLTX001/5136cac0efddf0c7349ea992a3071b5a.mp3大海啊，故乡
 
将以上歌曲下载，再上传至https://网站，重新获取https://歌曲地址：
 
https://mp3.wf/uploap/file/20230608223049.mp3 莫斯科郊外的晚上
https://mp3.wf/uploap/file/20230608223307.mp3 映山红
https://mp3.wf/uploap/file/20230608223536.mp3 我的祖国
https://mp3.wf/uploap/file/20230608223829.mp3 浏阳河
https://mp3.wf/uploap/file/20230608223942.mp3 茉莉花
https://mp3.wf/uploap/file/20230608224039.mp3 南泥湾
https://mp3.wf/uploap/file/20230608224137.mp3 洪湖水浪打浪
https://mp3.wf/uploap/file/20230608224237.mp3 雁南飞
https://mp3.wf/uploap/file/20230608224332.mp3 梦里水乡
https://mp3.wf/uploap/file/20230608224438.mp3 阿里山的姑娘
https://mp3.wf/uploap/file/20230608224534.mp3 大海啊，故乡

樵歌发表于 2023-6-9 06:29

都是耳熟能详的老歌，喜欢{:4_204:}

焱鑫磊 发表于 2023-6-9 06:46

樵歌发表于 2023-6-9 06:29
都是耳熟能详的老歌，喜欢

这是“寻梦花园”的帖子，图片、歌曲重新换地址。否则不播放。{:4_205:}

红影发表于 2023-6-9 09:13

焱鑫磊辛苦了，帮着上传了这么多歌曲，太不容易了。真是个热心的人{:4_199:}

红影发表于 2023-6-9 09:14

现在都能听到了{:4_187:}

红影发表于 2023-6-9 09:16

@寻梦花园焱鑫磊帮你的歌曲都重新上传了{:4_204:}

焱鑫磊 发表于 2023-6-9 09:30

红影发表于 2023-6-9 09:13
焱鑫磊辛苦了，帮着上传了这么多歌曲，太不容易了。真是个热心的人

相互学习吗，应该的。也免得在“花潮论坛”用http://素材，

焱鑫磊 发表于 2023-6-9 09:31

红影发表于 2023-6-9 09:14
现在都能听到了

是的，找到问题所在就好办了。{:4_187:}

焱鑫磊 发表于 2023-6-9 09:33

红影发表于 2023-6-9 09:16
@寻梦花园焱鑫磊帮你的歌曲都重新上传了

应该的。{:4_204:}

红影发表于 2023-6-9 13:50

焱鑫磊发表于 2023-6-9 09:30
相互学习吗，应该的。也免得在“花潮论坛”用http://素材，

主要是免得这么多好听的歌儿听不到呢{:4_173:}

红影发表于 2023-6-9 13:51

焱鑫磊发表于 2023-6-9 09:31
是的，找到问题所在就好办了。

传到那么晚，太不容易了{:4_199:}

红影发表于 2023-6-9 13:52

焱鑫磊发表于 2023-6-9 09:33
应该的。

谢谢焱鑫磊的辛苦付出{:4_179:}

梦缘发表于 2023-6-9 17:18

感谢老师的分享，问好！{:4_180:}

焱鑫磊 发表于 2023-6-9 20:47

梦缘发表于 2023-6-9 17:18
感谢老师的分享，问好！

问好梦缘！{:4_204:}

页: [1]

花潮论坛's Archiver

《梦里水乡》张玮伽