也曾年轻《16首 荷花古诗词》
<style>#oBlk {
width:40vw;min-height:400px;text-align:center;margin:auto;background-color:hsl(60, 30%, 80%);position:relative;
overflow:hidden;border-top-left-radius:24px;border-top-right-radius:24px;font-size:20px;box-shadow:4px 4px 10px black;
video {width:114%; object-fit:cover;
}
#container {
width:100%;min-height:200px;text-align:center;
span {
display:block;margin-bottom:6px;
&:nth-of-type(1) {font-size:1.25em;color:brown;}
&:nth-of-type(2) {font-size:0.8em;color:gray;}
}
p {
text-align:left;text-indent:2em; font-weight:600;margin:12px;
}
}
#ctrlObj {width:50px;height:50px;overflow:hidden;border-radius:50%;position:absolute;animation: rot 5s linear infinite;box-shadow:2px 2px 5px black;z-index:99;visibility:hidden;}
}
#ctrlBox {width:100%;margin:16px auto;text-align:center;font-size:2em;color:skyblue;}
#ctrlBox button {cursor:pointer;}
#selIdx {width:32px;text-align:right;border:thin gray dotted;}
@keyframes rot {to {transform:rotate(1turn)}}
</style>
<div id="oBlk">
<video src="https://img2.tukuppt.com/video_show/2475824/00/02/16/5b53fec979d9e.mp4" autoplay loop muted id="vid"></video>
<div id="container"></div>
<img src="http://p2.music.126.net/wETVBkw7xEn7MBjcKrHq0g==/109951169642554367.jpg" id="ctrlObj" />
<audio src="https://music.163.com/song/media/outer/url?id=2162008755.mp3" loop autoplay id="aud"/>
</div>
<div id="ctrlBox">
<button id="backward">⇦ 上一首</button> <input id='selIdx' min='1' value=''/> <button id="forward">下一首 ⇨</button></div>
</div>
<script>
// https://mp.weixin.qq.com/s/H34lRWGMDEnyy8sNenJaSQ
aud.volume= 0.2;
const poems = [
[`《江南》`,
`汉·汉乐府`,
`江南可采莲，莲叶何田田。`,
`鱼戏莲叶间。`,
`鱼戏莲叶东，鱼戏莲叶西，`,
`鱼戏莲叶南，鱼戏莲叶北。`,
`——写荷花最老的一首。荷叶底下鱼在游，采莲的人在唱。是夏天的声音。`],
[`《小池》`,
`宋·杨万里`,
`泉眼无声惜细流，树阴照水爱晴柔。`,
`小荷才露尖尖角，早有蜻蜓立上头。`,
`——小荷刚冒出来，蜻蜓就站上去了。夏天的开场白。`],
[`《采桑子》`,
`宋·欧阳修`,
`荷花开后西湖好，载酒来时。`,
`不用旌旗，前后红幢绿盖随。`,
`画船撑入花深处，香泛金卮。`,
`烟雨微微，一片笙歌醉里归。`,
`——初夏荷花刚开，红幢绿盖跟着船走。花深处喝酒，醉着回去。热闹。`],
[`《昭君怨·咏荷上雨》`,
`宋·杨万里`,
`午梦扁舟花底，香满西湖烟水。`,
`急雨打篷声，梦初惊。`,
`却是池荷跳雨，散了真珠还聚。`,
`聚作水银窝，泻清波。`,
`——做梦在西湖荷花底下划船，被雨惊醒，睁眼是自家荷叶在接雨。雨珠跳上跳下，又滚回水里。梦里梦外都是荷。`],
[`《夏日南亭怀辛大》`,
`唐·孟浩然`,
`山光忽西落，池月渐东上。`,
`散发乘夕凉，开轩卧闲敞。`,
`荷风送香气，竹露滴清响。`,
`欲取鸣琴弹，恨无知音赏。`,
`感此怀故人，中宵劳梦想。`,
`——夏天傍晚躺院子里，荷花的香味飘过来。这日子，值了。`],
[`《赠荷花》`,
`唐·李商隐`,
`世间花叶不相伦，花入金盆叶作尘。`,
`惟有绿荷红菡萏，卷舒开合任天真。`,
`此花此叶长相映，翠减红衰愁杀人。`,
`——别的花开的时候叶子就烂了，只有荷花红花绿叶一起开一起合。天然的。`],
[`《晓出净慈寺送林子方》`,
`宋·杨万里`,
`毕竟西湖六月中，风光不与四时同。`,
`接天莲叶无穷碧，映日荷花别样红。`,
`——荷叶铺到天边，荷花红得不像真的。颜色写出声音来。`],
[`《采莲曲》`,
`唐·王昌龄`,
`荷叶罗裙一色裁，芙蓉向脸两边开。`,
`乱入池中看不见，闻歌始觉有人来。`,
`——荷叶和裙子一个颜色，人躲在荷花里找不到，听到歌才反应过来。太灵动。`],
[`《采莲曲》`,
`唐·白居易`,
`菱叶萦波荷飐风，荷花深处小船通。`,
`逢郎欲语低头笑，碧玉搔头落水中。`,
`——碰到心上人，想说话又不好意思，低着头笑，玉簪掉水里了。荷花深处的小心思，比花好看。`],
[`《渌水曲》`,
`唐·李白`,
`渌水明秋月，南湖采白蘋。`,
`荷花娇欲语，愁杀荡舟人。`,
`——湖水清，月亮明，荷花娇滴滴像要说话。荡舟的人被勾得心里乱糟糟。`],
[`《苏幕遮》`,
`宋·周邦彦`,
`燎沉香，消溽暑。鸟雀呼晴，侵晓窥檐语。`,
`叶上初阳干宿雨，水面清圆，一一风荷举。`,
`故乡遥，何日去？家住吴门，久作长安旅。`,
`五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。`,
`——雨后荷叶，清晨阳光，一团一团举起来。周邦彦写荷像活的。`],
[`《怨诗》`,
`唐·孟郊`,
`试妾与君泪，两处滴池水。`,
`看取芙蓉花，今年为谁死。`,
`——两人各流一滴泪到池子里，看谁的泪能把芙蓉花浸死。花没死，说明深情对深情，谁也没压过谁。`],
[`《宿骆氏亭寄怀崔雍崔衮》`,
`唐·李商隐`,
`竹坞无尘水槛清，相思迢递隔重城。`,
`秋阴不散霜飞晚，留得枯荷听雨声。`,
`——荷叶枯了还在，下雨天被打的声音，比花开还好听。`],
[`《莲叶》`,
`唐·郑谷`,
`移舟水溅差差绿，倚槛风摇柄柄香。`,
`多谢浣纱人未折，雨中留得盖鸳鸯。`,
`——荷叶被打湿了，多谢没人把它折走，留下给鸳鸯挡雨。角度很少见。`],
[`《暮秋独游曲江》`,
`唐·李商隐`,
`荷叶生时春恨生，荷叶枯时秋恨成。`,
`深知身在情长在，怅望江头江水声。`,
`——李商隐悼念亡妻的。荷叶年年都在，人不在了。曲江的水声还在响，听的人只剩自己。`],
[`《甘草子》`,
`宋·柳永`,
`秋暮，乱洒衰荷，颗颗真珠雨。`,
`雨过月华生，冷彻鸳鸯浦。`,
`池上凭阑愁无侣，奈此个、单栖情绪。`,
`却傍金笼共鹦鹉，念粉郎言语。`,
`——雨打在残荷上，一颗一颗像珍珠。月亮出来，鸳鸯浦冷透了。没伴，只能跟鹦鹉说话。比花开的时候还冷清。`],
];
var synth = window.speechSynthesis
var poemIdx = 0;
var utterance = null;
var timeoutID = null;
const pStart = 2, eStart = [-2, -1];
selIdx.max = poems.length;
selIdx.title = `选择有效值：1 到 ${poems.length}`;
function recitationPoem(idx, pIdx) {
if(typeof synth === 'undefined') {
backward.disabled = false;
forward.disabled = false;
selIdx.disabled = false;
timeoutID = setTimeout(function(){
forward.click();
}, 30000);
}
else {
if(pIdx < poems.length - 3) {
utterance = new SpeechSynthesisUtterance(poems);
utterance.lang = 'zh-CN'; // 设置语言为中文
utterance.rate = 1; // 设置语速
utterance.pitch = 1; // 设置音调
synth.speak(utterance); // 播放语音
}
utterance.onend = () => {
if(pIdx < poems.length - 4) {
recitationPoem(idx,++pIdx)
}
else {
synth.cancel();
backward.disabled = false;
forward.disabled = false;
selIdx.disabled = false;
timeoutID = setTimeout(function(){
forward.click();
}, 5000);
}
};
}
}
function showPoem(idx) {
if(timeoutID) clearTimeout(timeoutID);
selIdx.value = idx + 1;
while (container.firstChild) {
container.removeChild(container.firstChild);
}
backward.disabled = true;
forward.disabled = true;
selIdx.disabled = true;
for(sIdx = 0; sIdx < poems.length - 1; sIdx++) {
let sObj = document.createElement('span');
sObj.innerHTML = poems;
if(sIdx > 1 ) sObj.style.cssText = `font-size:1.3em;color:red;font-family:楷体;`;
//else if(sIdx == poems.length - 2) sObj.style.cssText = 'text-align:left; margin-left:1em;';
container.appendChild(sObj);
}
let pObj = document.createElement('p');
pObj.innerHTML = poems.length - 1];
container.appendChild(pObj);
ctrlObj.style.cssText = `left:${oBlk.offsetWidth - 60}px;top:${oBlk.offsetWidth * 1.14 * 9 / 16 - 60}px;`;
recitationPoem(idx,0);
}
backward.onclick = () => {
poemIdx--; if(poemIdx < 0) poemIdx = poems.length - 1;
showPoem(poemIdx);
}
forward.onclick = () => {
poemIdx++; poemIdx %= poems.length;
showPoem(poemIdx);
}
const vMin = parseInt(selIdx.min);
const vMax = parseInt(selIdx.max);
selIdx.onchange = () => {
if(parseInt(selIdx.value) < vMin) selIdx.value = vMin;
if(parseInt(selIdx.value) > vMax) selIdx.value = vMax;
poemIdx = parseInt(selIdx.value) - 1;
showPoem(poemIdx);
}
let runState = () => {
aud.paused
? ctrlObj.style.animationPlayState = 'paused'
: ctrlObj.style.animationPlayState = 'running';
}
// 歌曲、歌词 及 动态元素 启/停控制
ctrlObj.onclick = () => {
aud.paused ? (aud.play(),synth.resume()) : (aud.pause(),synth.pause());
}
aud.addEventListener('play', () => runState());
aud.addEventListener('pause', () => runState());
aud.play().catch(_ = () => runState());
vid.onmouseenter = () => {ctrlObj.style.visibility = 'visible';}
vid.onmouseout = () => {
setTimeout(function() {
ctrlObj.style.visibility = 'hidden';}, 3000);
}
showPoem(poemIdx);
</script>
欣赏芙蓉老师精彩作品！
页:
[1]