论坛 › 欢乐水吧 › 願桜

马黑黑 发表于 2022-8-30 13:06

願桜

<style>
#papa { left: -214px; width: 1024px; height: 640px; box-shadow: 3px 3px 20px #000; background: lightblue url('/data/attachment/forum/202208/30/130502upatha2oe8owmpm8.jpg') no-repeat center/cover; user-select: none; position: relative; z-index: 2; }
#btnwrap { position: absolute; left: calc(50% - 80px); bottom: 20px; width: 100px; height: 100px; display: grid; place-items: center; }
#btnwrap span { position: absolute; transition: all 1.2s; }
#h5player { width: 100px; height: 100px; border-radius: 50%; background: tan conic-gradient(from 0deg, red, green, red 1%, snow 0); mask: radial-gradient(transparent 60%, red 61%, red 0); -webkit-mask: radial-gradient(transparent 60%, red 61%, red 0); }
#btnplay { left: 15px; width: 20px; height: 20px; background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); cursor: pointer; }
#btnplay:hover { background: tomato; }
#btnpause { left: 20px; width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; cursor: pointer; }
#btnpause:hover{ border-color: transparent tomato; }
#tmsg { left: 40px; font: normal 16px sans-serif; color: #ddd; }
#lrctext { position: absolute; left: calc(50% + 30px); 140px; bottom: 50px; font: bold 1.5em sans-serif; color: snow; text-shadow: 1px 1px 1px #000; transition: 1.2s; }
#lrctext:hover, #tmsg:hover { color: orange; }
</style>

<div id="papa">
        <div id="btnwrap">
                <span id="h5player"></span><span id="btnplay"></span><span id="btnpause"></span>
                <span id="tmsg">00:00<br>00:00</span>
        </div>
        <div id="lrctext">lrc歌词</div>
</div>

<script>
let aud = new Audio();
let lrcAr = [
        ['0.00','天空之城 - 願桜'],
        ['270.00','山河岁月天地远']
];
aud.src = 'https://music.163.com/song/media/outer/url?id=454578197.mp3';
aud.autoplay = true;
aud.loop = true;
btnplay.onclick = () => aud.play();
btnpause.onclick = () => aud.pause();
h5player.onmousemove = (e) => h5player.style.cursor =isHover(e.offsetX, e.offsetY) ? 'pointer' : 'default';
h5player.onclick = (e) => {
        if (isHover(e.offsetX, e.offsetY)) {
                let deg = Math.atan2(e.offsetY - 50, e.offsetX - 50) * 180 / Math.PI;
                deg += (e.offsetX < 50 && e.offsetY < 50) ?450 : 90;
                aud.currentTime = aud.duration * deg / 360;
        }
}
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
        tmsg.innerHTML = toMin(aud.currentTime) + '<br>' + toMin(aud.duration);
        h5player.style.background = 'conic-gradient(from 0deg, red, green, red ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';
        for (j = 0; j < lrcAr.length;j ++) {
                if (aud.currentTime >= lrcAr) lrctext.innerHTML = lrcAr;
        }
});
let isHover = (x,y) => Math.pow(x - 50, 2) + Math.pow(y - 50, 2) >= Math.pow(40, 2);
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-8-30 13:10

源码分享（全）
<style>
#papa { left: -214px; width: 1024px; height: 640px; box-shadow: 3px 3px 20px #000; background: lightblue url('/data/attachment/forum/202208/30/130502upatha2oe8owmpm8.jpg') no-repeat center/cover; user-select: none; position: relative; z-index: 2; }
#btnwrap { position: absolute; left: calc(50% - 80px); bottom: 20px; width: 100px; height: 100px; display: grid; place-items: center; }
#btnwrap span { position: absolute; transition: all 1.2s; }
#h5player { width: 100px; height: 100px; border-radius: 50%; background: tan conic-gradient(from 0deg, red, green, red 1%, snow 0); mask: radial-gradient(transparent 60%, red 61%, red 0); -webkit-mask: radial-gradient(transparent 60%, red 61%, red 0); }
#btnplay { left: 15px; width: 20px; height: 20px; background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); cursor: pointer; }
#btnplay:hover { background: tomato; }
#btnpause { left: 20px; width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; cursor: pointer; }
#btnpause:hover{ border-color: transparent tomato; }
#tmsg { left: 40px; font: normal 16px sans-serif; color: #ddd; }
#lrctext { position: absolute; left: calc(50% + 30px); 140px; bottom: 50px; font: bold 1.5em sans-serif; color: snow; text-shadow: 1px 1px 1px #000; transition: 1.2s; }
#lrctext:hover, #tmsg:hover { color: orange; }
</style>

<div id="papa">
        <div id="btnwrap">
                <span id="h5player"></span><span id="btnplay"></span><span id="btnpause"></span>
                <span id="tmsg">00:00<br>00:00</span>
        </div>
        <div id="lrctext">lrc歌词</div>
</div>

<script>
let aud = new Audio();
let lrcAr = [
        ['0.00','天空之城 - 願桜'],
        ['270.00','山河岁月天地远']
];
aud.src = 'https://music.163.com/song/media/outer/url?id=454578197.mp3';
aud.autoplay = true;
aud.loop = true;
btnplay.onclick = () => aud.play();
btnpause.onclick = () => aud.pause();
h5player.onmousemove = (e) => h5player.style.cursor =isHover(e.offsetX, e.offsetY) ? 'pointer' : 'default';
h5player.onclick = (e) => {
        if (isHover(e.offsetX, e.offsetY)) {
                let deg = Math.atan2(e.offsetY - 50, e.offsetX - 50) * 180 / Math.PI;
                deg += (e.offsetX < 50 && e.offsetY < 50) ?450 : 90;
                aud.currentTime = aud.duration * deg / 360;
        }
}
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
        tmsg.innerHTML = toMin(aud.currentTime) + '<br>' + toMin(aud.duration);
        h5player.style.background = 'conic-gradient(from 0deg, red, green, red ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';
        for (j = 0; j < lrcAr.length;j ++) {
                if (aud.currentTime >= lrcAr) lrctext.innerHTML = lrcAr;
        }
});
let isHover = (x,y) => Math.pow(x - 50, 2) + Math.pow(y - 50, 2) >= Math.pow(40, 2);
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-8-30 13:45

老黑又出新教程。我今天又有玩的了。谢谢哦！{:4_190:}

加林森 发表于 2022-8-30 13:47

这个播放器可以控制的。挺好玩的。辛苦老黑了！{:4_199:}

红影 发表于 2022-8-30 14:44

这个应该是最后优化过的圆环播放器了吧，这个制作真漂亮{:4_187:}

醉美水芙蓉 发表于 2022-8-30 17:57

马黑黑 发表于 2022-8-30 18:43

醉美水芙蓉 发表于 2022-8-30 17:57
黑黑老师又改进了播放器！真漂亮！

手机上也做了此时，chromium内核的浏览器表现正常

马黑黑 发表于 2022-8-30 18:44

加林森 发表于 2022-8-30 13:45
老黑又出新教程。我今天又有玩的了。谢谢哦！

{:4_190:}

马黑黑 发表于 2022-8-30 18:44

红影 发表于 2022-8-30 14:44
这个应该是最后优化过的圆环播放器了吧，这个制作真漂亮

和音乐版那边是一样的

马黑黑 发表于 2022-8-30 18:44

加林森 发表于 2022-8-30 13:47
这个播放器可以控制的。挺好玩的。辛苦老黑了！

嗯，播放进度可以调节

加林森 发表于 2022-8-30 18:48

马黑黑 发表于 2022-8-30 18:44
嗯，播放进度可以调节

就是。这样就容易修改歌词了。

加林森 发表于 2022-8-30 18:49

马黑黑 发表于 2022-8-30 18:44


{:4_191:}

马黑黑 发表于 2022-8-30 18:54

加林森 发表于 2022-8-30 18:49


{:4_191:}{:4_191:}{:4_191:}

马黑黑 发表于 2022-8-30 18:55

加林森 发表于 2022-8-30 18:48
就是。这样就容易修改歌词了。

额，你是指验证歌词同步方面

加林森 发表于 2022-8-30 18:59

马黑黑 发表于 2022-8-30 18:55
额，你是指验证歌词同步方面

是的。我今天试了的。挺好用的。

加林森 发表于 2022-8-30 19:00

马黑黑 发表于 2022-8-30 18:54


要整醉。。。。{:4_170:}

红影 发表于 2022-8-30 19:16

马黑黑 发表于 2022-8-30 18:44
和音乐版那边是一样的

感觉播放按钮放在里面有点挤，放在歌词前面会不会更好点？

小辣椒 发表于 2022-8-30 19:36

黑黑这个白的颜色特别存托，好清晰{:4_199:}

马黑黑 发表于 2022-8-30 20:20

小辣椒 发表于 2022-8-30 19:36
黑黑这个白的颜色特别存托，好清晰

还行吧

马黑黑 发表于 2022-8-30 20:27

红影 发表于 2022-8-30 19:16
感觉播放按钮放在里面有点挤，放在歌词前面会不会更好点？
不好再分离了，除非不要按钮

查看完整版本: 願桜