演示
注意：移动端无效
大风
-- 戈麦
晴日降下黑雨，大雨降下宿命
军团的云，枫叶的云，一座高楼危然高耸
原野上羊群盘卷成一个漩涡
地上的风，天上的风，一个大氅在山上哀号
在云涡中抖动的是一颗发绿的心
在一朵黑云上张望的是一个灵魂的空壳
大风横过秋日的旷野，只露胸围
一团乌云，在那生长阳光的地方
一个人满身秋天的肃杀，伫立在河上
神经的人，落魄的人，不食烟火的人
他在心中遇见黑夜，遇见时间
遇见蛛网上咯血的鹿，遇见一个宽广的胸怀
一个人伫立在风中，他的心中裂为两瓣
裂为两半，一半在河岸，另一半在河岸
旷世的风像一场黑夜中降临的大雪，他在心中
看见一个人在大雪中，从另一个身上盘过
哦，上帝的中山装，从你那四只口袋里
风像四只黑色的豹子闪电一样飞出
啃食玉米的房屋，啃食庄园丰盛的雪骨
劫掠着树木，劫掠着大地的牙齿，劫掠着采石场
两个黑夜结伴而来，一个骑着一个
一个大雪中昏聩的瘫子在空中撕扯着天空的胃
那里存积着胃，存积着栗子和火，盔甲之下
一颗最大的头颅，它已登上疯狂的顶峰
css
.vditor-speech {
position: absolute;
display: none;
background-color: #1d2125;
border: 1px solid #141414;
border-radius: 3px;
padding: 3px;
cursor: pointer;
color: #b9b9b9;
}
.vditor-speech--current, .vditor-speech:hover {
color: #fff
}
.vditor-speech svg {
height: 14px;
width: 14px;
fill: currentColor;
display: block;
stroke-width: 0;
stroke: currentColor;
}
js
var play_svg_1 = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n' +
'<path d="M6 0v32l20-15.977-20-16.023z"></path>\n' +
'</svg>\n';
var pause_svg_1 = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n' +
'<path d="M11 0h-6c-0.553 0-1 0.448-1 1v30c0 0.553 0.447 1 1 1h6c0.553 0 1-0.447 1-1v-30c0-0.552-0.447-1-1-1zM27 0h-6c-0.553 0-1 0.448-1 1v30c0 0.553 0.447 1 1 1h6c0.553 0 1-0.447 1-1v-30c0-0.552-0.447-1-1-1z"></path>\n' +
'</svg>\n';
var speechDom = document.querySelector(".vditor-speech");
var lang = "zh_CN";
if (!speechDom) {
speechDom = document.createElement("div");
speechDom.className = "vditor-speech";
document.body.insertAdjacentElement("beforeend", speechDom);
var getVoice = function () {
var voices = speechSynthesis.getVoices();
var currentVoice;
var defaultVoice;
voices.forEach(function (item) {
if (item.lang === lang.replace("_", "-")) {
currentVoice = item;
}
if (item["default"]) {
defaultVoice = item;
}
});
if (!currentVoice) {
currentVoice = defaultVoice;
}
return currentVoice;
};
if (speechSynthesis.onvoiceschanged !== undefined) {
speechSynthesis.onvoiceschanged = getVoice;
}
var voice_1 = getVoice();
speechDom.onclick = function () {
if (speechDom.className === "vditor-speech") {
var utterThis = new SpeechSynthesisUtterance(speechDom.getAttribute("data-text"));
utterThis.voice = voice_1;
utterThis.onend = function () {
speechDom.className = "vditor-speech";
speechSynthesis.cancel();
speechDom.innerHTML = play_svg_1;
};
speechSynthesis.speak(utterThis);
speechDom.className = "vditor-speech vditor-speech--current";
speechDom.innerHTML = pause_svg_1;
}
else {
if (speechSynthesis.speaking) {
if (speechSynthesis.paused) {
speechSynthesis.resume();
speechDom.innerHTML = pause_svg_1;
}
else {
speechSynthesis.pause();
speechDom.innerHTML = play_svg_1;
}
}
}
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(window.vditorSpeechRange);
};
document.body.addEventListener("click", function () {
if (getSelection().toString().trim() === "" && speechDom.style.display === "block") {
speechDom.className = "vditor-speech";
speechSynthesis.cancel();
speechDom.style.display = "none";
}
});
}
document.addEventListener("mouseup", function (event) {
var text = getSelection().toString().trim();
speechSynthesis.cancel();
if (getSelection().toString().trim() === "") {
if (speechDom.style.display === "block") {
speechDom.className = "vditor-speech";
speechDom.style.display = "none";
}
return;
}
window.vditorSpeechRange = getSelection().getRangeAt(0).cloneRange();
var rect = getSelection().getRangeAt(0).getBoundingClientRect();
speechDom.innerHTML = play_svg_1;
speechDom.style.display = "block";
speechDom.style.top = (rect.top + rect.height + document.querySelector("html").scrollTop - 20) + "px";
speechDom.style.left = (event.screenX + 2) + "px";
speechDom.setAttribute("data-text", text);
});
参考
Q.E.D.