本讲将是本系列教程的完结篇。事实上，在上一讲，《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>