Audio Player for HTML5帖子模板（歌词同步+进度可控）
代码：<style>.mama { position: relative; margin: auto; width: 1000px; height: 600px; background: transparent linear-gradient(to right bottom, darkgreen, snow); box-shadow: 2px 2px 2px #444; }
.lrcWrap { position: absolute; top: 10px; left: 10px; padding: 20px; width: fit-content; height: fit-content; text-align: center; background: transparent linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.15)); box-shadow: 2px 2px 4px #eee; display: flex; flex-direction: column;align-items: center; }
.meterWrap { position: relative; display: flex; align-items: center; width: fit-content; height: 50px; }
.btn { width: 24px; height: 24px; background: olive; color: #ccc; border: none; font-size: 14px; outline: none; cursor: pointer; }
.btn:hover { color: red; }
.meter { position: relative; width:300px; height: 11px; cursor: pointer; background: linear-gradient(transparent 5px, snow 6px,transparent 0); }
.slider { display: block; position: absolute; width: 4px; height: 100%; background: olive; }
.lrcWrap p { margin: 0 0 12px 0; padding: 0px; color: #ccc; font: normal 1.2em sans-serif; text-shadow: 1px 1px 1px #333; }
.lrcBox { margin: 0; padding: 0; width: 400px; height: 72px; overflow: hidden; user-select: none; position: relative; }
.lrcUl { position: relative; top: 0; margin: 0; padding: 0; }
.lrcUl li { margin: 0; padding: 0; height: 24px; font: normal 18px / 24px sans-serif; color: gray; text-shadow: 1px 1px 1px black; list-style-type: none; }
</style>
<div class="mama">
<div class="lrcWrap">
<p>Audio Player for HTML5</p>
<div class="lrcBox"><ul class="lrcUl"></ul></div>
<div class="meterWrap">
<input class="btn" type="button" value="||" />
<div class="meter"><span class="slider"></span></div>
</div>
</div>
</div>
<audio class="aud" src="音频地址" autoplay="autoplay" loop="loop"></audio>
<script>
let aud = document.querySelector('.aud'),
btn = document.querySelector('.btn');
meter = document.querySelector('.meter'),
slider = document.querySelector('.slider'),
lrcUl = document.querySelector('.lrcUl');
let slip = 0; //误差修正
let lrcAr = [
['0.00','第一句'],
['3.84','第二句'],
//...第N句
['331.05','最后一句']
];
for(j=0; j<lrcAr.length; j++){
lrcUl.innerHTML += '<li id="li' + lrcAr + '" style="list-style-type: none">' + lrcAr + '</li>';
}
aud.addEventListener('timeupdate', () => {
let prog = (meter.clientWidth - slider.clientWidth) * aud.currentTime / aud.duration;
slider.style.transform = 'translate(' + prog + 'px)';
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr - slip){
if(j > 0){
let idxLast = lrcAr;
document.getElementById('li' + idxLast).style.color = 'gray';
lrcUl.style.top = '-' + (j * 24 - 24) + 'px';
}
let idx = lrcAr;
document.getElementById('li' + idx).style.color = 'ghostwhite';
}
}
})
aud.addEventListener('ended', () => {
document.getElementById("li" + lrcAr).style.color = 'gray';
lrcUl.style.top = 0;
})
aud.addEventListener('pause', () => btn.value = '\u25BA');
aud.addEventListener('play',() => btn.value = '||');
meter.onclick = (e) => {
e = e || event;
aud.currentTime = (e.clientX - offset(meter,"left")) * aud.duration / meter.clientWidth;
}
btn.onclick = () => aud.paused ? (aud.play(),btn.value = '||') : (aud.pause(),btn.value = '\u25BA');
btn.value = aud.paused ? '\u25BA' : '||';
let offset = (obj,direction) => {//位移量
let offsetDir = "offset" + direction.toUpperCase() + direction.substring(1);
let realNum = obj;
let positionParent = obj.offsetParent;
while(positionParent != null){
realNum += positionParent;
positionParent = positionParent.offsetParent;
}
return realNum;
}
</script>
本帖最后由 马黑黑 于 2022-6-11 09:49 编辑
做帖子时：
一、第02行是帖子最外层盒子样式，margin: auto; 是本地测试居中之用，发帖时请用 left 属性取代之。其他属性可加可减可修改；
二、第03行是歌词同步面板+播放控制的组织者样式，定位播放器请操作它的定位值（left和top）。当帖子背景偏淡色时，可以考虑将其 background 的透明颜色值 transparent 替换为rgba或#等颜色，当需要与背景融为一体是，则可保留透明值并将其后 linear-gradient 各颜色的alpha值（即 rgba 颜色的最后一个值改为更小，比如 .01 甚至是 0）；
三、播放器按钮选择器是 .btn，它有一个hover属性，用于设置鼠标指针滑过时的效果；
四、播放器的进度条，滑轨由 .meter 选择器设定，滑块则由 .slider 选择器控制；
五、歌词显示面板的文本相关设置由 .lrcUl li 选择器控制，文本颜色则在其设定的基础上，JS也会动态参与，请在 54、58、64行修改相应颜色值；
六、帖子中可以将音画标题放在歌词面板，它的CSS样式由 09行 的 .lrcWrap p 选择器控制，HTML在 17 行；
七、JS中，行34 是lrc歌词时差修正值，默认为0，可根据需要给它赋值，如 0.2 或 -0.2，当为负值时，表明歌词lrc时间信息比实际快了N秒。
八、特别说明：HTML代码结构可以修改相应内容，但请维护其结构的完整性，以确保播放器保持正常的工作界面与状态。 九、特别说明之二
.lrcUl 和 .lrcUl li 两个选择器是lrc歌词显示的直接执行者，.lrcUl 的定位不可更改，.lrcUl li 的 height 不能更改（除非JS能跟进），font 属性中，
font: normal 18px / 24px sans-serif;
红紫色部分是字体大小，它不能大于红色部分的值，红色部分的值规定的是行高，其值应当与该选择器的 height 值一致（确保文本垂直居中）。
这个说得真清楚，黑黑辛苦了{:4_187:} 马黑黑 发表于 2022-6-11 08:23
九、特别说明之二
.lrcUl 和 .lrcUl li 两个选择器是lrc歌词显示的直接执行者，.lrcUl 的定位不可更改， ...
嗯嗯，不能单独改某个数值，需要考虑相关因素{:4_204:} 红影 发表于 2022-6-11 08:38
嗯嗯，不能单独改某个数值，需要考虑相关因素
它们是配套的 红影 发表于 2022-6-11 08:37
这个说得真清楚，黑黑辛苦了
重要的都说了 这个内容也是重要的，我往往没有注意这里的重点。。。。 小辣椒 发表于 2022-6-11 11:43
这个内容也是重要的，我往往没有注意这里的重点。。。。
{:5_108:} 马黑黑 发表于 2022-6-11 11:59
谢谢黑黑，准备午睡后起来做，先下了 小辣椒 发表于 2022-6-11 12:03
谢谢黑黑，准备午睡后起来做，先下了
88
马黑黑 发表于 2022-6-11 08:51
它们是配套的
如果改出问题了，在本地预览时能看出来的{:4_173:} 马黑黑 发表于 2022-6-11 08:52
重要的都说了
嗯嗯，很受启发{:4_187:} 红影 发表于 2022-6-11 13:42
嗯嗯，很受启发
一起学习 红影 发表于 2022-6-11 13:41
如果改出问题了，在本地预览时能看出来的
对。但本地预览的效果和论坛的不尽一致。原因是论坛有全局性设定。 本帖最后由 加林森 于 2022-6-11 19:59 编辑
老黑，我准备用这个代码去试着制作一个出来，看效果吧！谢谢啦。{:5_108:} 加林森 发表于 2022-6-11 19:57
老黑，我准备这个代码去试着制作一个出来，看效果吧！谢谢啦。
期待中 马黑黑 发表于 2022-6-11 19:59
期待中
嗯嗯！感谢你！好兄弟！ 马黑黑 发表于 2022-6-11 14:33
对。但本地预览的效果和论坛的不尽一致。原因是论坛有全局性设定。
大的问题不存在就好，细节然后再调{:4_173:} 红影 发表于 2022-6-12 10:36
大的问题不存在就好，细节然后再调
只能如此
页:
[1]