加林森 发表于 2022-8-27 16:48

《心の跳動》- FRESH_ye

本帖最后由 加林森 于 2022-8-27 17:44 编辑 <br /><br /><style>
      #papa { left: -214px; width: 1024px; height: 682px; box-shadow: 3px 3px 20px #000; background: gray url('https://pic.imgdb.cn/item/6309b64f16f2c2beb1754d30.jpg') no-repeat center/cover; position: relative; z-index: 1; }
      #mypic { position: absolute; top: 125px; right: 100px; width: 260px; transform: rotate(30deg); cursor: pointer; transition: all 2s; }
      #mypic:hover { box-shadow: -10px -10px 40px 10px rgba(255,255,255,.45); transform: scale(1.5); }
      #player { margin: auto; display: block; position: absolute; }
</style>

<div id="papa">
      <canvas id="player"></canvas>
      <div id="wrapper"><img id="ball" src="https://pic.imgdb.cn/item/6235d74f5baa1a80ab9d74a0.gif" alt="" /></div>
</div>

<script>
let ctx = player.getContext('2d'),
      w = player.width = 350, h = player.height = 100,
      startX = 30, startY = 70, radius = 16,
      flag = false,
      color = { lrc: '#F0FFF0', time: '#FFFFFF', track: '#FFFFFF', prg: '#2E8B57', circle: 'lightblue', btn: '#FFFFFF', btnhover: '#FFFFFF' };
      aud = new Audio();
let lrcAr = [
      ['00.90','心の跳動'],
        ['40.66','歌手：FRESH_ye'],
        ['70.00','所属专辑：心の跳動'],
        ['74.00','谢谢欣赏'],
       
];


aud.src = 'https://music.163.com/song/media/outer/url?id=1876206196.mp3';
aud.autoplay = true;
aud.loop = true;

drawBtn(aud.paused);
drawProgress(2, '00:00');
drawLrc('等待播放 ...');

let isHover = (x, y, cx, cy) => Math.pow(x - cx, 2) + Math.pow(y - cy, 2) <= Math.pow(radius, 2); //鼠标经过检测

player.addEventListener('mousemove', (e) => { //监听鼠标经过
      flag = isHover(e.offsetX, e.offsetY, startX, startY);
      if(flag) {
                player.style.cursor = 'pointer';
                drawBtn(aud.paused);
      } else {
                player.style.cursor = 'default';
                drawBtn(aud.paused);
      }
});

player.addEventListener('click', (e) => { if(flag) aud.paused ? aud.play() : aud.pause(); });

aud.addEventListener('playing',()=> drawBtn(false));
aud.addEventListener('pause',()=> drawBtn(true));

aud.addEventListener('timeupdate', () => { //进度监听
      let prg = 100 * aud.currentTime / aud.duration;
      drawProgress(2*prg, toMin(aud.duration) + ' | ' + toMin(aud.currentTime));
      for(j = 0; j < lrcAr.length;j ++) {
                if(aud.currentTime >= lrcAr) drawLrc(lrcAr);
      }
});

function drawLrc(text) { //lrc同步
      ctx.clearRect(0, 0, w, 50);
      ctx.save();
      ctx.fillStyle = color.lrc;
      ctx.textAlign = 'center';
      ctx.beginPath();
      ctx.font = '1.2em sans-serif';
      ctx.fillText(text, w/2, 30);
      ctx.fill();
      ctx.restore();
}

function drawProgress(prog, text) { //进度
      ctx.clearRect(startX + radius + 202, startY - 10, startX + radius + 206 + ctx.measureText(text).width, 40);
      ctx.beginPath();
      ctx.font = '14px sans-serif';
      ctx.textBaseline = 'middle';
      ctx.strokeStyle = color.track;
      ctx.moveTo(startX + radius + 4, startY);
      ctx.lineTo(startX + radius + 204, startY); //底线
      ctx.stroke();
      ctx.beginPath();
      ctx.strokeStyle = color.prg;
      ctx.moveTo(startX + radius + 4, startY);
      ctx.lineTo(startX + radius + 4 + prog, startY); //进度线
      ctx.stroke();
      ctx.fillStyle = color.time;
      ctx.fillText(text, startX + radius + 208, startY); //数字进度
      ctx.fill();
}

function drawBtn(id) { //绘制播放+暂停按钮
      ctx.clearRect(startX - radius, startY - radius, radius *2, radius*2);
      ctx.fillStyle = color.circle;
      ctx.beginPath();
      ctx.arc(startX, startY, radius, 0, 2*Math.PI);
      ctx.fill();
      ctx.fillStyle = flag ? color.btnhover : color.btn;
      ctx.beginPath();
      if (id) { //播放图标
                ctx.lineWidth = 1;
                ctx.moveTo(startX-radius / 2 + 1, startY - radius / 2);
                ctx.lineTo(startX - radius / 2 + 1, startY + radius / 2);
                ctx.lineTo(startX + radius / 2 + 1, startY);
                ctx.fill();
      } else { //暂停图标
                ctx.fillRect(startX - radius / 2 + 5, startY - radius / 2, 2, radius);
                ctx.fillRect(startX - radius / 2 + 10, startY - radius / 2, 2, radius);
      }
}

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

小辣椒 发表于 2022-8-27 17:35

队长按钮颜色加错了，现在打开停止按钮看不见了

加林森 发表于 2022-8-27 17:38

小辣椒 发表于 2022-8-27 17:35
队长按钮颜色加错了，现在打开停止按钮看不见了

点击就停止了啊。

加林森 发表于 2022-8-27 17:45

小辣椒 发表于 2022-8-27 17:35
队长按钮颜色加错了，现在打开停止按钮看不见了

现在修改过来了。你再看看。

红影 发表于 2022-8-27 18:23

这个是进度条不能调节的，队长怎么不做黑黑那个进度可调的？

加林森 发表于 2022-8-27 18:26

红影 发表于 2022-8-27 18:23
这个是进度条不能调节的，队长怎么不做黑黑那个进度可调的？

我还没有去试呢。

上海朝阳 发表于 2022-8-27 19:08

小辣椒 发表于 2022-8-27 17:35
队长按钮颜色加错了，现在打开停止按钮看不见了

咦？我刚刚点开看见播放器按钮，在蝴蝶飞的地方，还想说小辣椒安排的位置很好，乍一看播放器不见了。

红影 发表于 2022-8-27 20:14

加林森 发表于 2022-8-27 18:26
我还没有去试呢。

那个可以直接调整进度，比这个好。

加林森 发表于 2022-8-27 20:17

红影 发表于 2022-8-27 20:14
那个可以直接调整进度，比这个好。

好的好的，我去试一试。

小辣椒 发表于 2022-8-27 20:59

加林森 发表于 2022-8-27 17:45
现在修改过来了。你再看看。

现在完美，打开停止都有出来了{:4_199:}

加林森 发表于 2022-8-27 21:01

小辣椒 发表于 2022-8-27 20:59
现在完美，打开停止都有出来了

嗯嗯。你再去看看我送老兄的那个帖。就是用PS制作的。

小辣椒 发表于 2022-8-27 21:02

加林森 发表于 2022-8-27 21:01
嗯嗯。你再去看看我送老兄的那个帖。就是用PS制作的。
好的，是视频那个吧

加林森 发表于 2022-8-27 21:03

小辣椒 发表于 2022-8-27 21:02
好的，是视频那个吧

是的。
页: [1]
查看完整版本: 《心の跳動》- FRESH_ye