东篱闲人 发表于 2022-12-2 21:33

二泉映月

本帖最后由 东篱闲人 于 2022-12-2 21:38 编辑 <br /><br /><style>
#papa { margin: auto; width: 836px; height: 669px; background: gray url('https://pic.imgdb.cn/item/6389fe2f16f2c2beb14b96b6.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=5246301.mp3" autoplay loop></audio>
<script>
(function() {
      (function(mkPlayer) {let defaults = {player_css: 'bottom: 10px; left: calc(50% - 50px);',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>

小辣椒 发表于 2022-12-2 21:35

老头标题是阿炳2只眼睛？

小辣椒 发表于 2022-12-2 21:35

老头就是聪明，一看就会了{:4_178:}

东篱闲人 发表于 2022-12-2 21:36

小辣椒 发表于 2022-12-2 21:35
老头标题是阿炳2只眼睛？

{:4_170:}

东篱闲人 发表于 2022-12-2 21:36

小辣椒 发表于 2022-12-2 21:35
老头就是聪明，一看就会了

试试。。。{:5_117:}

小辣椒 发表于 2022-12-2 21:36

东篱闲人 发表于 2022-12-2 21:36


不是？00 就是2只瞎的眼睛

小辣椒 发表于 2022-12-2 21:37

东篱闲人 发表于 2022-12-2 21:36
试试。。。

这个可以做音画的单曲播放器，直接套用就可以了

东篱闲人 发表于 2022-12-2 21:37

小辣椒 发表于 2022-12-2 21:36
不是？00 就是2只瞎的眼睛

师傅你今天特逗。。。{:5_106:}

东篱闲人 发表于 2022-12-2 21:38

小辣椒 发表于 2022-12-2 21:37
这个可以做音画的单曲播放器，直接套用就可以了

{:4_181:}

小辣椒 发表于 2022-12-2 21:38

东篱闲人 发表于 2022-12-2 21:37
师傅你今天特逗。。。

是你标题用的太让人赋予想象力了{:4_189:}

小辣椒 发表于 2022-12-2 21:42

东篱闲人 发表于 2022-12-2 21:38


老头你们都厉害，千羽也是做出来了

东篱闲人 发表于 2022-12-2 21:42

小辣椒 发表于 2022-12-2 21:42
老头你们都厉害，千羽也是做出来了

这个没有做，直接套的。。。。

千羽 发表于 2022-12-2 21:44

东篱老师出手不凡{:4_187:}

小辣椒 发表于 2022-12-2 21:46

东篱闲人 发表于 2022-12-2 21:42
这个没有做，直接套的。。。。

就是让你们套用的

东篱闲人 发表于 2022-12-2 21:47

千羽 发表于 2022-12-2 21:44
东篱老师出手不凡

嗯嗯，是一首绝美的音乐。。。。

醉美水芙蓉 发表于 2022-12-2 21:49

东篱闲人 发表于 2022-12-2 21:50

醉美水芙蓉 发表于 2022-12-2 21:49
东篱老师神速呀！做图好快！

不是做的，直接搬来的。。。。{:5_117:}

马黑黑 发表于 2022-12-2 22:37

永远的经典，帖子也一样

红影 发表于 2022-12-2 22:50

东篱大哥的这个好，非常经典的一首二胡曲，音符里流露了无尽的悲怆和抗争，百听不厌{:4_199:}

梦油 发表于 2022-12-3 09:51

阿炳的二胡演奏苍劲，刚健，浑厚，深沉。谢谢东篱闲人朋友给俺机会，再次欣赏阿炳的《二泉映月》。
页: [1] 2
查看完整版本: 二泉映月