|
|

楼主 |
发表于 2023-9-24 20:18
|
显示全部楼层
代码
- <style>
- #mplayer { width: 200px; height: 80px; }
- #mplayer text { user-select: none; }
- #sPath { cursor: pointer; }
- #progress { pointer-events: none; }
- #btnPlay:hover { cursor: pointer; filter: brightness(1.2); }
- </style>
- <svg id="mplayer">
- <path id="sPath" d="M10,10 V70 H190 V10" fill="none" stroke="lightgreen" stroke-width="4"></path>
- <circle id="progress" cx="10" cy="10" r="5" fill="green" />
- <g transform="translate(35,40)" fill="green">
- <text id="cu" x="0" y="0">00:00</text>
- <image id="btnPlay" x="50" y="-22" width="32" height="32" xlink:href="https://638183.freep.cn/638183/t23/btn/play.png"></image>
- <text id="du" x="90" y="0">00:00</text>
- </g>
- </svg>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1891331204" loop autoplay></audio>
- <script>
- let posAr = [];
- let len = sPath.getTotalLength();
- let playImg = 'https://638183.freep.cn/638183/t23/btn/play.png',
- pauseImg = 'https://638183.freep.cn/638183/t23/btn/pause.png';
- 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; };
- let mState = () => aud.paused ? btnPlay.setAttribute('xlink:href',playImg) : btnPlay.setAttribute('xlink:href',pauseImg);
- let getMinItem = (ar) => {
- ar.sort((a,b) => a[0] - b[0]);
- return ar[0][1];
- };
-
- for(i = 0; i < len; i ++) {
- posAr.push(sPath.getPointAtLength(i));
- }
- sPath.onclick = (e) => {
- let ex = Math.round(e.offsetX), ey = Math.round(e.offsetY), yAr = [];
- for(i = 0; i < len; i ++) {
- let px = Math.round(posAr[i].x), py = Math.round(posAr[i].y);
- if(Math.abs(ex-px) <= 4) {
- yAr.push([Math.abs(ey-py), i]);
- }
- }
- aud.currentTime = getMinItem(yAr) * aud.duration / len;
- };
- aud.addEventListener('timeupdate', () => {
- let idx = Math.round(aud.currentTime * len / aud.duration);
- progress.setAttribute('cx',posAr[idx].x);
- progress.setAttribute('cy',posAr[idx].y);
- cu.textContent = toMin(aud.currentTime);
- du.textContent = toMin(aud.duration);
- });
- aud.addEventListener('pause', () => mState());
- aud.addEventListener('play', () => mState());
- btnPlay.onclick = () => aud.paused ? aud.play() : aud.pause();
- </script>
复制代码
|
|