【散文】《山居暮年》——学习使用浏览器自带朗读API-文字转语音功能
<style>
#bj {position:relative; --offsetX: 10%; margin:10px auto 245px calc(50% - var(--offsetX)); transform:translateX(-50%); width: 1280px; height:1350px; box-shadow:3px 3px 6px gray; z-index:1; border-radius:32px; padding:32px; background-color:#ccc }
#bt{position:absolute; font:bold 66px sans-serif; text-align:center; padding: 0; color:#ff0000; line-height:1.5; top:780px;width:100%; height:70px; }
.content {position:absolute; font:bold 26px sans-serif; text-align:left; padding: 20px 46px 100px 10px; color: #8b0000; line-height:1.5; top:890px; }
#myVideo {position:absolute; width:95%; height:720px; object-fit: cover; opacity: 1; z-index: 0; margin-top: 0%; }
</style>
<div id="bj">
<video id="myVideo" src="http://txmov2.a.kwimgs.com/ksc1/WyE3PyFAuSgBdurOQgT5I0G4XBB6ox2XVI2LplfM6mF_4claPkt0DynIxX8AjGnTOJ6uDk6YMqOKvIUypmfvd2cUPSnp2gb-hJktiJtQA_XF5uaz6bRhCeu2FdJn2nFTXXzXMqkTClfHHsMOu_t3vL77hijWsH3Ko6WMw-5cbKcv48lx3tut_0vcoWOBJzYq.mp4" autoplay="autoplay" loop="loop"preload="metadata" controlsList="nodownload" muted></video>
<div id="bt">《山居暮年》</div>
<div id="content" class="content"></div>
<script>
let arr = [
" 晚岁栖身山野茅庐，屋舍朴拙无华，恰合平生疏拙心性。闲时日伴书卷笔墨，忙时躬耕菜圃、饲养鸡禽，日常清淡，自有安然意趣。",
" 流年辗转，早已抛却伤老之叹、卑位之愁，反倒庆幸暮年得守闲光，静待朝夕缓行。远隔市井喧嚣，抛开名利奔忙，朝夕伴青山草木，心神与山野相融。",
" 半生奔波求外物，到老方知简素珍。这般清贫恬淡的暮日光阴，便是此生难得的至宝，安守本心，岁岁从容。"
];
document.getElementById("content").innerHTML = arr.join("<br><br>");
const synth = window.speechSynthesis;
let index = 0;
function startRead(){
if(index >= arr.length){
index = 0;
setTimeout(startRead,3000);
return;
}
let msg = new SpeechSynthesisUtterance(arr);
msg.lang = 'zh-CN';
msg.rate = 0.6;
msg.pitch = 1.5;
msg.onend = function(){
index++;
startRead();
}
synth.speak(msg);
}
startRead();
</script>
看了曾经年轻老师的帖子学会的知识{:5_106:}，在此感谢老师！ 本帖最后由 也曾年轻 于 2026-6-5 15:56 编辑 <br /><br /><meta name="referrer" content="never" />
<style>
#txtHold {position:absolute;left:60px;top:10px;text-indent:2em;letter-spacing:4px; margin:12px auto;height:auto;line-height:150%; font:bold 2em 楷体;width:1080px;}
#oBlk {width:1280px;height:720px;position:relative;margin:30px auto 30px calc(50% - 721px);box-shadow:4px 4px 10px black; }
.tSty {
font-weight:bold;
color:white;
text-shadow:
1px 1px #368171,
-1px 1px #368171,
-1px -1px #368171,
1px -1px #368171;
}
</style>
<div id="oBlk">
<video width=`100%` src="http://txmov2.a.kwimgs.com/ksc1/WyE3PyFAuSgBdurOQgT5I0G4XBB6ox2XVI2LplfM6mF_4claPkt0DynIxX8AjGnTOJ6uDk6YMqOKvIUypmfvd2cUPSnp2gb-hJktiJtQA_XF5uaz6bRhCeu2FdJn2nFTXXzXMqkTClfHHsMOu_t3vL77hijWsH3Ko6WMw-5cbKcv48lx3tut_0vcoWOBJzYq.mp4" autoplay="autoplay" loop="loop"preload="metadata" controlsList="nodownload" muted></video>
<p id="txtHold" class="tSty"></p>
</div>
<script>
const descStr = [
`晚岁栖身山野茅庐，屋舍朴拙无华，恰合平生疏拙心性。闲时日伴书卷笔墨，忙时躬耕菜圃、饲养鸡禽，日常清淡，自有安然意趣。`,
`流年辗转，早已抛却伤老之叹、卑位之愁，反倒庆幸暮年得守闲光，静待朝夕缓行。远隔市井喧嚣，抛开名利奔忙，朝夕伴青山草木，心神与山野相融。`,
`半生奔波求外物，到老方知简素珍。这般清贫恬淡的暮日光阴，便是此生难得的至宝，安守本心，岁岁从容。`
];
txtHold.innerHTML = '';
var cIdx = 0, sentenceIdx = 0;
var strlen = descStr.length;
let cStr = '';
function typeWriter() {
if(cIdx == 0) {
cStr = '';
txtHold.innerHTML = '';
}
cStr += `<span>${descStr.substring(cIdx, cIdx + 1)}</span>`;
txtHold.innerHTML = cStr;
cIdx++; cIdx %= descStr.length;
if(cIdx == 0) {
sentenceIdx++; sentenceIdx %= descStr.length;
setTimeout(typeWriter, 3000);
}
else setTimeout(typeWriter, 350);
}
typeWriter();
</script>
祝你越活越年轻！
这个真好，只是视频里已经有文字了，要是朗读的这些文字就更好了。 奇怪，回复没反应，多点几下结果回了那么多{:4_173:} 这个帖子我好像没法评分，不知道怎么回事{:4_203:}
页:
[1]