论坛 › 欢乐水吧 › 满园争春 （学习老黑“梦驼铃”制作）

加林森 发表于 2022-9-7 10:30

满园争春 （学习老黑“梦驼铃”制作）

本帖最后由 加林森 于 2022-9-7 15:23 编辑 <br /><br /><style>
      #papa { left: -214px; width: 1024px; height: 600px; background: silver url('https://pic.imgdb.cn/item/631801d516f2c2beb18b4ae2.jpg') no-repeat center/cover; box-shadow: 2px 2px 10px #000; user-select: none; z-index: 1; position: relative; }
      #mplayer { position: absolute; right: 20px; bottom: 20px; }
      #lrc {position: absolute; left: 20px; top: 20px; }
      #lrctext { font: bold 2em sans-serif; text-shadow: 4px 4px 0 #000; stroke-width: 0.5px; stroke: #EEE8AA; fill: none; letter-spacing: 4px; }
      #tmsg { fill: transparent; stroke: #EEE8AA; stroke-width: 1px; font: bold 1em sans-serif; }
      #btnplay, #btnpause { fill: #ccc; cursor: pointer; display: block; }
      #btnpause { display: none; }
      #btnplay:hover, #btnpause:hover { fill: orange; }
</style>

<div id="papa">
      <svg id="mplayer" width="120" height="120">
                <g id="mama" transform="rotate(-90, 60, 60)" style="cursor: pointer;">
                        <circle id="track" cx="60" cy="60" r="50" fill="none" stroke-width="10" stroke="rgba(255,255,255,0.65)" />
                        <circle id="prog" cx="60" cy="60" r="50" fill="none" stroke-width="6" stroke="rgba(57,54,81,0.85)" />
                </g>
                <polygon id="btnplay" points="50 50, 50 70, 70 60" />
                <g id="btnpause" fill="tranparent">
                        <rect x="52" y="50" width="5" height="20" />
                        <rect x="62" y="50" width="5" height="20" />
                </g>
                <path id="curPath" d="M 20 70 Q 60 0 100 70" fill="none" stroke="none"/>
                <path id="durPath" d="M 20 55 Q 60 110 100 55" fill="none" stroke="none"/>
                <g id="tmsg">
                        <text x="34" y="0"><textPath id="curMsg" xlink:href="#curPath" dominant-baseline="text-after-edge">00:00</textPath></text>
                        <text x="29" y="0"><textPath id="durMsg" xlink:href="#durPath" dominant-baseline="text-before-edge">00:00</textPath></text>
                </g>
      </svg>
      <svg id="lrc" width="600" height="50">
                <text id="lrctext" x="0" y="40">满园争春-王俊雄</text>
      </svg>
</div>

<script>
let aud = new Audio();
let lrcAr = [
      ['0.00', '纯音乐 - 满园争春'],
      ['240.00', '谢谢欣赏']
];
let cc = {
      x: 1*track.getAttribute('cx'),
      y: 1*track.getAttribute('cy'),
      r: 1*track.getAttribute('r'),
      sw: 1*track.getAttribute('stroke-width'),
      len: track.getTotalLength(),
};

aud.src = 'https://music.163.com/song/media/outer/url?id=158161.mp3';
aud.autoplay = true;
aud.loop = true;
prog.style.strokeDasharray = prog.style.strokeDashoffset =cc.len;

aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());

aud.addEventListener('timeupdate', () => {
      prog.style.strokeDashoffset = cc.len - cc.len * aud.currentTime / aud.duration;
      curMsg.textContent = toMin(aud.currentTime);
      durMsg.textContent = toMin(aud.duration);
      for(j=0; j<lrcAr.length; j++) {
                if(aud.currentTime >= lrcAr) lrctext.textContent = lrcAr;
      }
});

btnplay.onclick = btnpause.onclick = () => aud.paused ? aud.play() : aud.pause();

mama.onclick = (e) => {
      let deg = Math.atan2(e.offsetY - cc.y, e.offsetX - cc.x) * 180 / Math.PI;
      deg += (e.offsetX < cc.x && e.offsetY < cc.y) ? 450 : 90;
      aud.currentTime = aud.duration * deg / 360;
};

let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');

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-7 10:31

@马黑黑跟到学习制作了一个。谢谢老黑！

加林森 发表于 2022-9-7 10:36

本帖最后由 加林森 于 2022-9-7 11:10 编辑

这个是红楼梦贾母寿宴的音乐。

马黑黑 发表于 2022-9-7 12:14

这个是照套了，圆环播放器的位置固定了，在帖子中就显得不合适。照你这底图，播放器设在右上方最合适，svg里要挪动这个播放器，你要动三个地方：

一、播放时间信息的文本路径（可能还有文本的xy值）

二、两个圆环的圆心

三、两个圆环的分组 g 标签的旋转基点

这个有一定的难度，我说过的。我会封装一个可以简单且随意挪动的模板，快了。

加林森 发表于 2022-9-7 12:17

马黑黑 发表于 2022-9-7 12:14
这个是照套了，圆环播放器的位置固定了，在帖子中就显得不合适。照你这底图，播放器设在右上方最合适，svg ...

好的。等你写出来我再去学习。

马黑黑 发表于 2022-9-7 12:21

加林森 发表于 2022-9-7 12:17
好的。等你写出来我再去学习。

发出来了，在我的花园

加林森 发表于 2022-9-7 12:23

马黑黑 发表于 2022-9-7 12:21
发出来了，在我的花园

好的，我去学习！

梦油 发表于 2022-9-7 13:13

红楼梦贾母寿宴的音乐真好听，它为你的帖子增色不少。

加林森 发表于 2022-9-7 13:25

马黑黑 发表于 2022-9-7 12:21
发出来了，在我的花园

老黑，我这个是根据你的教程重新制作的。你帮着看看。谢谢！{:4_190:}

加林森 发表于 2022-9-7 13:25

梦油 发表于 2022-9-7 13:13
红楼梦贾母寿宴的音乐真好听，它为你的帖子增色不少。

是啊。

红影 发表于 2022-9-7 14:08

漂亮的制作，给队长点赞{:4_187:}

加林森 发表于 2022-9-7 15:11

红影 发表于 2022-9-7 14:08
漂亮的制作，给队长点赞

嗯嗯，谢谢！

白开水 发表于 2022-9-7 16:55

学习的好看好听。。

加林森 发表于 2022-9-7 17:05

白开水 发表于 2022-9-7 16:55
学习的好看好听。。

谢谢啦。你也去制作一个出来玩玩。

小辣椒 发表于 2022-9-7 17:50

队长这个还是刚才那个图图相配，这个播放器背景图图太花俏了{:4_173:}

加林森 发表于 2022-9-7 17:57

小辣椒 发表于 2022-9-7 17:50
队长这个还是刚才那个图图相配，这个播放器背景图图太花俏了

这个是第一个作品。今天修改过的。{:4_170:}

小辣椒 发表于 2022-9-7 18:02

加林森 发表于 2022-9-7 17:57
这个是第一个作品。今天修改过的。

队长不要做套用，自己修改

加林森 发表于 2022-9-7 18:04

小辣椒 发表于 2022-9-7 18:02
队长不要做套用，自己修改

这个是自己修改过来的。原来不是这样的。

红影 发表于 2022-9-7 20:45

加林森 发表于 2022-9-7 15:11
嗯嗯，谢谢！

在单位时听不到音乐，这个音乐很喜悦呢。

加林森 发表于 2022-9-7 20:47

红影 发表于 2022-9-7 20:45
在单位时听不到音乐，这个音乐很喜悦呢。

给贾母做寿的音乐。

查看完整版本: 满园争春 （学习老黑“梦驼铃”制作）