月牙泉（audio player for html5测试)
本帖最后由 马黑黑 于 2022-6-10 23:02 编辑 <br /><br /><style>.mama { position: relative; left: -202px; width: 1000px; height: 600px; background: #ccc url('/data/attachment/forum/202206/10/193911lsstrj9qs9s8tcet.jpg') no-repeat; box-shadow: 2px 2px 2px #444; }
.lrcWrap { position: absolute; right: 10px; top: 10px; padding: 20px; width: fit-content; height: fit-content; text-align: center; background: rgba(20,20,20,.6) 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="https://music.163.com/song/media/outer/url?id=1432843317.mp3" 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.15;
let lrcAr = [
['0.00','月牙泉 - 原唱 田震'],
['3.84','月牙泉童声版 - 翻唱 史筱璇'],
['6.79','词：杨海潮'],
['10.28','曲：杨海潮'],
['13.82','就在天的那边 很远很远'],
['18.01','有美丽的月牙泉'],
['22.84','它是天的镜子 沙漠的眼'],
['27.43','星星沐浴的乐园'],
['32.04','从那年我月牙泉边走过'],
['37.06','从此以后魂儿绕梦牵'],
['41.83','也许你们不懂得这种爱恋'],
['46.39','除非也去那里看看'],
['50.55','看那 看那 月牙泉'],
['59.72','想那 念那 月牙泉'],
['78.90','看那 看那 月牙泉'],
['88.19','想那 念那 月牙泉'],
['98.10','看那 看那 月牙泉'],
['107.10','想那 念那 月牙泉'],
['117.15','就在天的那边 很远很远'],
['121.70','有美丽的月牙泉'],
['126.40','它是天的镜子 沙漠的眼'],
['131.05','星星沐浴的乐园']
];
for(j=0; j<lrcAr.length; j++){
lrcUl.innerHTML += '<li style="list-style-type: none" id="li' + lrcAr + '">' + 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');
function 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;
}
btn.value = aud.paused ? '\u25BA' : '||';
</script>
支持播放进度控制，操作方法： 鼠标单击进度条相应处
完整帖子代码：
<style>
.mama { position: relative; left: -202px; width: 1000px; height: 600px; background: #ccc url('/data/attachment/forum/202206/10/193911lsstrj9qs9s8tcet.jpg') no-repeat; box-shadow: 2px 2px 2px #444; }
.lrcWrap { position: absolute; right: 10px; top: 10px; padding: 20px; width: fit-content; height: fit-content; text-align: center; background: rgba(20,20,20,.6) 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="https://music.163.com/song/media/outer/url?id=1432843317.mp3" 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.25;
let lrcAr = [
['0.00','月牙泉 - 原唱 田震'],
['3.84','月牙泉童声版 - 翻唱 史筱璇'],
['6.79','词：杨海潮'],
['10.28','曲：杨海潮'],
['13.82','就在天的那边 很远很远'],
['18.01','有美丽的月牙泉'],
['22.84','它是天的镜子 沙漠的眼'],
['27.43','星星沐浴的乐园'],
['32.04','从那年我月牙泉边走过'],
['37.06','从此以后魂儿绕梦牵'],
['41.83','也许你们不懂得这种爱恋'],
['46.39','除非也去那里看看'],
['50.55','看那 看那 月牙泉'],
['59.72','想那 念那 月牙泉'],
['78.90','看那 看那 月牙泉'],
['88.19','想那 念那 月牙泉'],
['98.10','看那 看那 月牙泉'],
['107.10','想那 念那 月牙泉'],
['117.15','就在天的那边 很远很远'],
['121.70','有美丽的月牙泉'],
['126.40','它是天的镜子 沙漠的眼'],
['131.05','星星沐浴的乐园']
];
for(j=0; j<lrcAr.length; j++){
lrcUl.innerHTML += '<li id="li' + lrcAr + '">' + 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 = '▷');
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 = '▷');
function 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;
}
btn.value = aud.paused ? '▷' : '||';
</script>
三角形字符：▷▶◁◀ 这是一个好地方啊！{:5_116:} 马黑黑 发表于 2022-6-10 19:44
支持播放进度控制，操作方法： 鼠标单击进度条相应处
没啥反应。。。{:5_103:} 黑黑又带来新的玩法，可以调整歌曲进度了，真好{:4_199:} 红影 发表于 2022-6-10 20:57
黑黑又带来新的玩法，可以调整歌曲进度了，真好
对播放进度的控制之前也做过的 每天都有新样式，黑黑太棒了{:4_199:} 红影 发表于 2022-6-10 20:58
每天都有新样式，黑黑太棒了
不是每天，这几天的每天而已 东篱闲人 发表于 2022-6-10 20:12
没啥反应。。。
不会呀，真的可以调整进度的，提前或后退 东篱闲人 发表于 2022-6-10 20:10
这是一个好地方啊！
地方不错，不过现在得人工养护了 马黑黑 发表于 2022-6-10 21:00
不会呀，真的可以调整进度的，提前或后退
嗯嗯，现在好用了。。 东篱闲人 发表于 2022-6-10 21:01
嗯嗯，现在好用了。。
估计前面你没能理解我的意思，点错地方？ 马黑黑 发表于 2022-6-10 21:06
估计前面你没能理解我的意思，点错地方？
没有。点的完全正确，就是不动。。。。 东篱闲人 发表于 2022-6-10 21:08
没有。点的完全正确，就是不动。。。。
那估计是评分后点的 马黑黑 发表于 2022-6-10 20:57
对播放进度的控制之前也做过的
放在歌词里还是第一次呀{:4_173:} 马黑黑 发表于 2022-6-10 20:59
不是每天，这几天的每天而已
为什么后面的几个都觉得歌词前面有小点点，看了代码，也没找出来为什么。 红影 发表于 2022-6-10 21:40
放在歌词里还是第一次呀
没有呀，我记得都放过的 红影 发表于 2022-6-10 21:41
为什么后面的几个都觉得歌词前面有小点点，看了代码，也没找出来为什么。
那是图片的点