svg自定义路径进度条播放器（预览版）

马黑黑 · 发表于 2023-9-24 20:17

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 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>

复制代码

马黑黑 · 发表于 2023-9-24 20:29

相关解释：

这是用 svg 做的播放器，svg 代码在第 09 至 17 行之间。第 10 行是播放器路径，这里使用昨天介绍的 svg path 之 M H V L 中的前三个指令 MHV 做成，比较简单。可以做更复杂的路径，不限于MHVL 指令。

第 12 至 15 行，用 g 标签分组，里面包含两个文本（text）标签，分别用于显示播放音乐的当前时间、音乐总时间，还有一个按钮标签，用 image 标签装载图片。g 标签的宽度由里面的元素决定，本例占用 130 px 的宽度，布局用 g 标签的转换属性 transform="translate(x,y)" 来实现，本例令其水平居中，所以 x 为（200-130）÷ 2，y 则根据需要给出数值。

JS代码中，涉及一些算法，以及基于 audio 控件的监听与控制，以前的相关帖子都有过探讨，这里暂不做详细说明。