本讲将是本系列教程的完结篇。事实上，在上一讲，《range进度条播放器+LRC歌词同步教程（四）》，播放器的核心功能都已实现，可以作为终结篇看待，不过我们还想略作扩展，主要是两方面的内容：一是响应键盘操作，二是一些细节优化、完善与扩充。
input 组件的 type="range" 滑杆元素具备获得焦点功能，当它获得焦点，键盘的方向键可以调节range滑杆进度，对播放器而言，按任意方向键都会使得音频或视频快进和快退，如果不为之做编程处理也无伤大雅，就是体验上有所欠缺，例如连续快进、快退时出现的倒带破音，故此还是处理一下为好。JS针对键盘键位编程提供三个事件：onkeydown（键位按下）、keyup（键位弹起）和 keypress（有输入值的键位正常按下松开），我们只需使用前两个就好。按下弹起的是哪一个键，JS能做出判断，看例子和解释就能明白：
<p id="msg">请输入：</p>
<p><input id="mybox" type="text" value=""/></p>
<script>
mybox.onkeydown = (e) => msg.innerText = e.code;
/* [说明] e.code 获得键位码的明文值，e.key 获得另外一种键位码的明文值；e.repeat 还能检测是否长按某一个键。 */
</script>
运行以上代码，令文本框获得焦点后，敲击键盘上任意一个键，消息框都会显示该键位的键位码。比如敲个空格，显示 Space，左方向键，显示 ArrowLeft，右方向键，显示 ArrowRight，它甚至能区分左右上档键、主键盘数字和小键盘数字。除了用 e.code 这样的关键字获取键位码，还可以用 e.key 和 e.keyCode 获得数字类型的键位码（keyCode将被废弃），这里我们决定使用 e.code。
由于键位按下允许长按，按下不放的过程会反复触发 range 进度条的 onchange 事件，而本讲以前的代码我们用 onchange 事件来实现进度条手动变更后的播放出播放进度调节，这样，方向键被长按时播放器就会出现快进快退的破音，所以 onchange 事件的代码交给一个函数：
/* 原来的 mprog onchange 事件 */
mprog.onchange = () => aud.currentTime = aud.currentTime = mprog.value / mprog.max * aud.duration;
/* 改为函数 setChange */
var setChange = () => {
aud.currentTime = mprog.value / mprog.max * aud.duration;
mseek = false; /* 进度条控制权交还audio控件 */
}
/* 然后鼠标、键盘松开事件分别调用上述函数 */
mprog.onmouseup = () => setChange();
mprog.onkeyup = (e) => { if(e.code.toLowerCase().includes('arrow')) setChange(); };
/* 键位按下事件 ：令 mseek 为真（和鼠标按下一样道理） */
mprog.onkeydown = (e) => { if(e.code.toLowerCase().includes('arrow')) mseek = true; }
/*[注意] 键位按下、弹起事件只针对方向键，所以有一个if语句 */
/* 此外，使用 oninput 事件替代 onchange 用于实时显示手动改变进度条的数据，前者在此兼容鼠标键盘的性能更好 */
mprog.oninput = () => mplayer.dataset.tt = toMin(mprog.value / mprog.max * aud.duration) + ' ' + toMin(aud.duration);
这样处理以后，短按、长按方向键的操作效果，和用鼠标拖曳滑杆滑块的操作效果一致。按键相应功能至此解决，但为了提供更为友好的操作体验，我们还应提供进度条获得焦点的样式，这在 CSS 中处理，加一个伪类 :focus 即可：
#mprog:focus { accent-color: gold; } /* 进度条获得焦点强调色 */
那如何让进度条获得焦点？鼠标点击，以及，页面处于活动中时按键盘上的 Tab 键，都能让拥有焦点能力的元素获得焦点，鼠标点击马上获得，按 Tab键 则根据元素的 tabindex 属性值依次获得。获得焦点后，元素将按 :focus 伪类渲染。
[提示]如果不想让进度条获得焦点，简单的做法是在HTML代码中的对应元素加入一个JS语句，onfocus="blur()"，意思是一旦获得焦点就立马失去焦点，这样的话，上面基于键位事件的编程就没有必要了。
下来谈谈细节完善与扩展问题。
教程此前的代码，均设定父元素为 id="papa"，很多时候我们可能想使用别的，甚至可能不想在帖子元素上使用id，那我们需要处理一下传递CSS变量 --state 由谁来承载和传递的问题。CSS变量具备继承性，只有处理得当，继承性还可以渗透到子孙元素的伪元素，所以，如果没有了 papa，我们可以找个更大的靠山，body，页面舞台的顶级父元素（但不是HTML顶级元素，就是说比body大的还有，只是它们不是能呈现样貌的元素）。看代码：
var pa = document.querySelector('body'); /* 声明pa变量 → body */
/* mState 函数修改为 */
var mState = () => aud.paused ?
(pa.style.setProperty('--state', 'paused'), btnplay.title = '点击播放') :
(pa.style.setProperty('--state', 'running'), btnplay.title = '点击暂停');
/* 这样，凡依赖于 --state 变量运行关键帧动画的元素，均被管到（除非在不合适的地方额外设置了 --state 值） */
此外，我们可能希望修饰帖子的视频也能随音频而播放或暂停，若此，我们可以设计一个函数：
/* 控制视频函数 */
var ctrVids = (stop) => {
let vids = document.querySelectorAll('video'); /* 获得所有视频操作句柄 */
vids.forEach(vid => stop ? vid.pause() : vid.play()); /* 根据stop参数（布尔）控制视频 */
};
/* 完善 mState 函数 : 调用上述函数 */
var mState = () => aud.paused ?
(pa.style.setProperty('--state', 'paused'), btnplay.title = '点击播放', ctrVids(true)) :
(pa.style.setProperty('--state', 'running'), btnplay.title = '点击暂停', ctrVids(false));
整理全部代码如下：
<!-- CSS代码 -->
<style>
.papa {
margin: auto;
width: 800px;
height: 360px;
background: linear-gradient(tan,gray);
box-shadow: 3px 3px 20px #000;
position: relative;
display: grid;
place-items: center;
}
#lrc {
position: absolute;
top: 10px;
font: bold 2.4em sans-serif;
color: lightblue;
text-shadow: 1px 1px 1px rgba(0,0,0,.45);
--ani: lrcGo1;
--duration: 1s;
}
#lrc::before {
position: absolute;
content: attr(data-lrc);
width: 100%;
height: 100%;
color: transparent;
background: linear-gradient(rgba(250,0,0,.7),rgba(0,0,180,.8));
background-clip: text;
-webkit-background-clip: text;
clip-path: inset(0 100% 0 0);
animation: var(--ani) var(--duration) linear forwards var(--state);
border-bottom: 1px solid navy;
}
#mplayer {
position: absolute;
bottom: 10px;
text-align: center;
}
#mplayer::before {
position: absolute;
content: attr(data-tt);
left: 0;
bottom: 25px;
width: 100%;
text-align-last: justify;
}
#mprog {
width: 240px;
accent-color: darkgreen;
outline: none;
cursor: pointer;
}
#mprog:focus {
accent-color: gold;
}
#btnplay {
width: 80px;
height: 80px;
cursor: pointer;
animation: rotating 6s infinite linear var(--state);
}
@keyframes rotating { to { transform: rotate(360deg); } }
@keyframes lrcGo0 { to { clip-path: inset(0 0 0 0); } }
@keyframes lrcGo1 { to { clip-path: inset(0 0 0 0); } }
</style>
<!-- HTML代码 -->
<div class="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=212524" autoplay loop></audio>
<div id="mplayer" data-tt="0:00 0:00">
<img id="btnplay" src="https://638183.freep.cn/638183/small/002_133507167677724892.png" title="播放/暂停" alt="" /><br>
<input id="mprog" type="range" min="0" max="100" step="any" value="0" title="调节进度" />
</div>
<div id="lrc" data-lrc="HuaChao LRC">HuaChao LRC</div>
</div>
<!-- JS代码 -->
<script>
/* mseek 手动调节 ：初始为假；aniIdx 动画名索引；lrcKey 当前处理的歌词索引 */
var mseek = false, aniIdx = 0, lrcKey = 0;
var pa = document.querySelector('body'); /* --state变量交由 body 传递 */
/* 函数 - 格式化分 → 分:秒 */
var toMin = (val) => {
if(!val) return '0:00';
var min = parseInt(val / 60), sec = Math.floor(val) % 60;
if(sec < 10) sec = '0' + sec;
return min + ':' + sec;
};
/* 函数 - 状态控制，含依赖 --state 的CSS动画、视频、播放按钮标题 */
var mState = () => aud.paused ?
(pa.style.setProperty('--state', 'paused'), btnplay.title = '点击播放', ctrVids(true)) :
(pa.style.setProperty('--state', 'running'), btnplay.title = '点击暂停', ctrVids(false));
/* 函数 - lrc歌词同步 */
var showLrc = (time) => {
lrc.textContent = lrc.dataset.lrc = geci[lrcKey][1].replace(/<br>/, '\n');
lrc.style.setProperty('--ani', ['lrcGo0','lrcGo1'][aniIdx]);
lrc.style.setProperty('--duration', time + 's');
pa.style.setProperty('--state', 'running');
aniIdx = aniIdx === 0 ? 1 : 0;
lrcKey ++;
};
/* 函数 - 计算 lrcKey 值 */
var calcKey = () => {
for (let j = 0; j < geci.length; j++) {
if (aud.currentTime <= geci[j][0]) {
lrcKey = j - 1;
break;
}
}
if (lrcKey < 0) lrcKey = 0;
if (lrcKey > geci.length - 1) lrcKey = geci.length - 1;
let time = geci[lrcKey][2] - (aud.currentTime - geci[lrcKey][0]);
showLrc(time);
pa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
};
/* 函数 - 手动改变进度 */
var setChange = () => {
aud.currentTime = mprog.value / mprog.max * aud.duration;
mseek = false; /* 进度条控制权交还audio控件 */
}
/* 函数 - 控制视频播放/暂停 */
var ctrVids = (stop) => {
let vids = document.querySelectorAll('video'); /* 获得所有视频操作句柄 */
vids.forEach(vid => stop ? vid.pause() : vid.play()); /* 根据stop参数（布尔）控制视频 */
};
/* audio 相关监听事件 */
aud.addEventListener('pause', () => mState()); /* onpause */
aud.addEventListener('playing', () => mState()); /* onplaying */
aud.addEventListener('seeked', () => calcKey()); /* onseeked */
/* ontimeupdate */
aud.addEventListener('timeupdate', () => {
/* 非手动调节进度时驱动进度变化 */
if(!mseek) mprog.value = aud.currentTime / aud.duration * mprog.max;
mplayer.dataset.tt = toMin(aud.currentTime) + ' ' + toMin(aud.duration);
for(var j = 0; j < geci.length; j ++) {
if (aud.currentTime >= geci[j][0]) {
if (j === lrcKey ) showLrc(geci[j][2]);
}
}
});
/* 进度条上的鼠标与键位事件 */
mprog.onmousedown = () => mseek = true;
mprog.onmouseup = () => setChange();
mprog.onkeydown = (e) => { if(e.code.toLowerCase().includes('arrow')) mseek = true; }
mprog.onkeyup = (e) => { if(e.code.toLowerCase().includes('arrow')) setChange(); };
/* 进度条输入事件 - 实时显示手动改变进度数据 */
mprog.oninput = () => mplayer.dataset.tt = toMin(mprog.value / mprog.max * aud.duration) + ' ' + toMin(aud.duration);
/* 播放按钮点击事件 */
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
/* 歌词数组 ：注意，这里必须使用 geci 变量名 */
var geci = [ [2,"陈瑞 - 雨巷",4], [8,'诗 ：戴望舒',6], [35.01,"撑着油纸伞",2.4], [38.31,"独自",1.9], [42.64,"彷徨在悠长 悠长",5.1], [49.9,"又寂寥的雨巷 我希望逢着",6.3], [57.11,"一个丁香一样地结着",3.1], [60.17,"愁怨的姑娘 撑着油纸伞",7.2], [68.36,"独自",2.0], [72.68,"彷徨在悠长 悠长",5.1], [79.94,"又寂寥的雨巷 我希望逢着",6.4], [87.23,"一个丁香一样地结着",2.8], [90.14,"愁怨的姑娘",3.2], [94.32,"她是有 丁香一样的颜色",5.4], [101.03,"丁香一样的芬芳 丁香一样的忧愁",6.5], [108.93,"在雨中哀怨 哀怨又彷徨",6.4], [116.95,"她彷徨在这寂寥的雨巷",6.5], [154.9,"撑着油纸伞",2.2], [158.37,"独自",1.8], [162.6,"彷徨在悠长 悠长",5.2], [169.45,"又寂寥的雨巷 我希望逢着",6.9], [177.04,"一个丁香一样地结着",3.0], [180.11,"愁怨的姑娘",3.0], [184.26,"她是有 丁香一样的颜色",5.8], [191.16,"丁香一样的芬芳 丁香一样的忧愁",7.2], [198.9,"在雨中哀怨 哀怨又彷徨",6.5], [206.94,"她彷徨在这寂寥的雨巷",6.2], [214.11,"她是有 丁香一样的颜色",5.8], [221.05,"丁香一样的芬芳 丁香一样的忧愁",7.0], [228.8,"在雨中哀怨 哀怨又彷徨",6.8], [236.59,"她彷徨在这寂寥的雨巷",7.7] ];
</script>
发表于 2024-2-5 08:42
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2024-2-5 09:04
楼主
