演示

注意:移动端无效
image.png

大风

-- 戈麦

晴日降下黑雨,大雨降下宿命
军团的云,枫叶的云,一座高楼危然高耸
原野上羊群盘卷成一个漩涡
地上的风,天上的风,一个大氅在山上哀号

在云涡中抖动的是一颗发绿的心
在一朵黑云上张望的是一个灵魂的空壳
大风横过秋日的旷野,只露胸围
一团乌云,在那生长阳光的地方

一个人满身秋天的肃杀,伫立在河上
神经的人,落魄的人,不食烟火的人
他在心中遇见黑夜,遇见时间
遇见蛛网上咯血的鹿,遇见一个宽广的胸怀

一个人伫立在风中,他的心中裂为两瓣
裂为两半,一半在河岸,另一半在河岸
旷世的风像一场黑夜中降临的大雪,他在心中
看见一个人在大雪中,从另一个身上盘过

哦,上帝的中山装,从你那四只口袋里
风像四只黑色的豹子闪电一样飞出
啃食玉米的房屋,啃食庄园丰盛的雪骨
劫掠着树木,劫掠着大地的牙齿,劫掠着采石场

两个黑夜结伴而来,一个骑着一个
一个大雪中昏聩的瘫子在空中撕扯着天空的胃
那里存积着胃,存积着栗子和火,盔甲之下
一颗最大的头颅,它已登上疯狂的顶峰

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);
    });

参考

来源:Vanessa219 / vditor

Q.E.D.

知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议

末俗以繁华相尚,终觉冷淡处趣味弥长。