寻梦花园 发表于 2023-6-8 17:05

张玮伽-《梦里水乡》




<style type="text/css">
#outer{
      left: -200px;top:30px;
      width: 1000px;
      height:600px;
       box-shadow: 0px 0px 0px 0px #cccccc, 0px 0px 0px 0px #880000; overflow:
hidden;transform:rotate(0deg);background: url('http://storage.live.com/items/1965B2B1656C2AF6!16389?')0 0/100%100%;
      position: relative;
       display: grid;
       --opt: .85;
}
#outer::before { position: absolute; content: ''; background: url('http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.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>
                <span id="tmsg">00:00 | 00:00</span>
            
</div>
<script>
var muAr = [["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","大海啊，故乡"]
];

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

红影 发表于 2023-6-8 19:15

制作很漂亮，我这里歌曲收听不了。单独打开链接能听到，在帖子里却听不到{:4_187:}

寻梦花园 发表于 2023-6-8 19:22

红影 发表于 2023-6-8 19:15
制作很漂亮，我这里歌曲收听不了。单独打开链接能听到，在帖子里却听不到

问好红影
酷狗音乐应该没有问题吧

焱鑫磊 发表于 2023-6-8 19:25

朋友：此网站不支持http://的图片、MP3、MP4。必须上传https://网站。所以没声音。

红影 发表于 2023-6-8 21:41

寻梦花园 发表于 2023-6-8 19:22
问好红影
酷狗音乐应该没有问题吧

不知道啊，跟着地址能听到，帖子里的听不到呢。

焱鑫磊 发表于 2023-6-8 22:16

红影 发表于 2023-6-8 21:41
不知道啊，跟着地址能听到，帖子里的听不到呢。

据我测试：“花潮论坛”不支持http://网站的素材；必须使用https://网站的。

红影 发表于 2023-6-8 22:54

焱鑫磊 发表于 2023-6-8 22:16
据我测试：“花潮论坛”不支持http://网站的素材；必须使用https://网站的。

很多地方还没升级吧，将来应该都是https://网站了。

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

本帖最后由 焱鑫磊 于 2023-6-8 23:54 编辑

红影 发表于 2023-6-8 22:54
很多地方还没升级吧，将来应该都是https://网站了。
使用http://网站多多，与升级无关。此帖有两张图片，分别为JPG、GIF图片，都是http://网站的，在缓存的情况下，目前能看到。过几天恐怕图片也看不到了。

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

焱鑫磊 发表于 2023-6-8 23:04
使用http://网站多多，与升级无关。此帖有两张图片，分别为JPG、GIF图片，都是http://网站的，在缓存的情 ...

有的时候图片看不到是被上传的地方给删了{:4_173:}
页: [1]
查看完整版本: 张玮伽-《梦里水乡》