《西海情歌》完成黑黑老师布置的作业
<style>
#papa { margin: auto; width: 700px; height: 420px; background: gray url('https://pic.imgdb.cn/item/6389f9f016f2c2beb145c4a3.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }
</style>
<div id="papa">
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=436514068.mp3" autoplay loop></audio>
<script>
(function() {
(function(mkPlayer) {let defaults = {player_css: 'bottom: 0px; left: calc(30% - 30px);',playerCode: `<style>#mplayer { position: absolute; --track: hsla(100,30%,80%,.65); --prog: hsla(100,60%,40%,.55); }#btnwrap { display: block; fill: var(--track); opacity: .95; cursor: pointer; }#btnwrap:hover { opacity: 1; }#track { fill: none; stroke: var(--track); }#prog { fill: none; stroke: var(--prog); }</style><svg id="mplayer" width="100" height="100"><g id="circle_wrap" transform="rotate(-90, 50, 50)" style="cursor: pointer;"><circle id="track" cx="50" cy="50" r="40" stroke-width="10" /><circle id="prog" cx="50" cy="50" r="40" stroke-width="10" /></g><g id="btnwrap"><path id="btnplay" d="M 40 40,40 60,60, 50 z"></path><path id="btnpause" d="M 42 40,42 60,47 60,47 40,42 40 z M 50 40,50 60,55 60,55 40,50 40 z" style="display: none;"></path><path d="M 47 50,50 40,50 60,47 60 z" fill="transparent" /></g></svg>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;let cc = { x: 1 * track.getAttribute('cx'), y: 1 * track.getAttribute('cy'), len: track.getTotalLength(), };prog.style.strokeDasharray = prog.style.strokeDashoffset = cc.len;btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();circle_wrap.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;};aud.addEventListener('timeupdate', () => {prog.style.strokeDashoffset = cc.len - cc.len * aud.currentTime / aud.duration;});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => aud.play());let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');};mkPlayer.HCPlayer = playCode;})(this);
HCPlayer({});
})();
</script> 看了影儿的代码……俺老实交代{:4_173:} 千羽晚上好，今天都完成作业了{:4_199:} 都速度的，老头也是刚发了，黑黑知道你们都是高手，瞬间就完成了{:4_199:} 小辣椒 发表于 2022-12-2 21:40
都速度的，老头也是刚发了，黑黑知道你们都是高手，瞬间就完成了
看了影儿的代码，中午做的，现在才有时间发{:4_173:} 千羽 发表于 2022-12-2 21:42
看了影儿的代码，中午做的，现在才有时间发
黑黑给你们专门音画制作套用的 小辣椒 发表于 2022-12-2 21:39
千羽晚上好，今天都完成作业了
嗯，今晚是差点来不了了{:4_173:} 千羽 发表于 2022-12-2 21:50
嗯，今晚是差点来不了了
每天上来是比较花时间的 小辣椒 发表于 2022-12-2 21:40
都速度的，老头也是刚发了，黑黑知道你们都是高手，瞬间就完成了
小辣椒，俺真的是啥也不懂呢{:4_181:} 醉美水芙蓉 发表于 2022-12-2 21:47
千羽可以把图图放大点的！
嗯，好的下次哈{:4_173:} 千羽 发表于 2022-12-2 21:54
小辣椒，俺真的是啥也不懂呢
就套用，不要太动脑子{:4_189:}轻松的玩 小辣椒 发表于 2022-12-2 21:52
每天上来是比较花时间的
有事就没时间来玩{:4_173:} 千羽 发表于 2022-12-2 21:57
有的没时间来玩
不要有负担，轻松玩，没有时间就少玩，有时间就玩玩，也是不错的
去看看送冬雨的帖{:4_189:} 小辣椒 发表于 2022-12-2 21:56
就套用，不要太动脑子轻松的玩
嗯，复杂的我就不会了。这个背景图是刚学图时做的 小辣椒 发表于 2022-12-2 21:58
不要有负担，轻松玩，没有时间就少玩，有时间就玩玩，也是不错的
去看看送冬雨的帖
好啊，我去找 千羽 发表于 2022-12-2 21:59
嗯，复杂的我就不会了。这个背景图是刚学图时做的
这个一次做过就会了 小辣椒 发表于 2022-12-2 21:47
黑黑给你们专门音画制作套用的
嗯{:4_181:} 千羽通过修改插件代码设置播放器的位置，不错。但建议用配置方法：
HCPlayer({
player_css: 'left:100px; top: 300px;',
});
还可以根据帖子背景的情况配置圆环底轨和进度指示的颜色：
HCPlayer({
player_css: 'left:100px; top: 300px; --track: tan; --prog: ffcc00;',
}); 今后的羽图，可以选一款插件当播放器