绿叶清舟 发表于 2022-9-5 21:04

伐木·柳莺嘤 - 常静


<style>
#papa { left: -214px; width: 1024px; height: 640px; display: grid; place-items: center; background: gray url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F11447087%2F22790c120981414c90ac1dc4a1cad1ca.jpeg%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvMTE0NDcwODcvMjI3OTBjMTIwOTgxNDE0YzkwYWMxZGM0YTFjYWQxY2EuanBlZw%3D%3D%2Fsign%2F93225c5fdb9b8a99dfd3e832dca26939.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664974051&t=83ef22f05a47728f591afd40fa5cf226') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }
#player { padding: 10px; position: absolute; bottom: 20px; width: fit-content; height: fit-content; display: flex; gap: 10px; flex-direction: column; }
#lrctext { font: bold 1.5em sans-serif; color: #5588AA; text-shadow: 1px 1px 2px #000; text-align: center; }
#btnwrap { width: fit-content; height: fit-content; display: flex; gap: 8px; align-items: center; }
#btnplay { width: 26px; height: 26px; background: url('/data/attachment/forum/202208/27/103714x7jnns4sll7hwxxl.png') -31px -24.5px no-repeat; border-radius: 50%; cursor: pointer; }
#btnplay:hover { border: 1px solid transparent; }
#prgline { width: 200px; height: 2px; background: #ccc linear-gradient(red,red) no-repeat ; background-size: 1px 2px; display: block; cursor: pointer;}
#tmsg { width: auto; color: snow; }
</style>

<div id="papa">
      <div id="player">
                <div id="lrctext">伐木·柳莺嘤 - 常静</div>
                <div id="btnwrap">
                        <span id="btnplay"></span>
                        <span id="prgline"></span>
                        <span id="tmsg">00:00 | 00:00</span>
                </div>
      </div>
</div>

<script>
let lrcAr = [
      ['0.00','伐木·柳莺嘤 - 常静']
      
];
let aud = new Audio(), lw = prgline.offsetWidth, bgpic = '/data/attachment/forum/202208/27/103714x7jnns4sll7hwxxl.png';
aud.src = 'http://music.163.com/song/media/outer/url?id=1931548669.mp3';
aud.autoplay = true;
aud.loop = true;

prgline.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prgline.offsetWidth;

btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', ()=> btnplay.style.background = 'url(' + bgpic +') -62px -24.5px no-repeat');
aud.addEventListener('pause', ()=> btnplay.style.background = 'url(' + bgpic + ') -31px -24.5px no-repeat');
aud.addEventListener('timeupdate', () => {
      prgline.style.backgroundSize = lw * aud.currentTime / aud.duration + 'px 2px';
      tmsg.innerText = toMin(aud.duration) + ' | ' + toMin(aud.currentTime);
      for(j = 0; j < lrcAr.length;j ++) {
                if(aud.currentTime >= lrcAr) lrctext.innerText = lrcAr;
      }
});

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;
}
</script>

大猫咪 发表于 2022-9-5 21:10

图片意境真美，和音乐融合的真棒！ 清舟好创意，赞！

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

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

大猫咪 发表于 2022-9-5 21:10
图片意境真美，和音乐融合的真棒！ 清舟好创意，赞！

猫猫也是学习做一个

大猫咪 发表于 2022-9-5 21:17

小辣椒 发表于 2022-9-5 21:14
猫猫也是学习做一个

好，等空了就学习，{:4_187:}

小辣椒 发表于 2022-9-5 21:18

大猫咪 发表于 2022-9-5 21:17
好，等空了就学习，

好的，清舟玩的非常好，我们一起向清舟学习

梦缘 发表于 2022-9-5 21:21

图片好有意境，欣赏问好老师！{:4_204:}

红影 发表于 2022-9-5 21:21

空山鸟语，还有伐木声。很幽静的场景，这里出家非常不错啊，约了{:4_173:}

绿叶清舟 发表于 2022-9-5 21:28

红影 发表于 2022-9-5 21:21
空山鸟语，还有伐木声。很幽静的场景，这里出家非常不错啊，约了

就上那个山上去了{:4_189:}

绿叶清舟 发表于 2022-9-5 21:28

梦缘 发表于 2022-9-5 21:21
图片好有意境，欣赏问好老师！

谢谢梦缘晚上好

绿叶清舟 发表于 2022-9-5 21:29

大猫咪 发表于 2022-9-5 21:10
图片意境真美，和音乐融合的真棒！ 清舟好创意，赞！

看音乐介绍说是诗经音乐的那个太深奥了{:4_189:}

绿叶清舟 发表于 2022-9-5 21:30

小辣椒 发表于 2022-9-5 21:18
好的，清舟玩的非常好，我们一起向清舟学习

瞎玩的啊，很多要向你学习的了

大猫咪 发表于 2022-9-5 21:30

绿叶清舟 发表于 2022-9-5 21:29
看音乐介绍说是诗经音乐的那个太深奥了

感觉就是这场景

绿叶清舟 发表于 2022-9-5 21:37

大猫咪 发表于 2022-9-5 21:30
感觉就是这场景

回到三千年前的大地了{:4_189:}

醉美水芙蓉 发表于 2022-9-5 22:04

绿叶清舟 发表于 2022-9-7 16:54

醉美水芙蓉 发表于 2022-9-5 22:04
欣赏清舟好作品！

谢谢芙蓉
页: [1]
查看完整版本: 伐木·柳莺嘤 - 常静