import {insertText} from '../scrapbox-insert-text-2/script.js'; import {isMobile} from '../mobile版scrapboxの判定/script.js'; import {hasSpeechRecognition} from '../SpeechRecognitionに対応しているか判定する/script.js'; import {scrapboxDOM} from '../scrapbox-dom-accessor/script.js'; import {interimArea} from './interimViewer.js'; const id = 'interimResultsViewer'; const pageMenuId = 'speech input'; const icons = { on: 'https://i.gyazo.com/0562c6a405a29661f18d0fdf8840065d.png', off: 'https://img.icons8.com/ios/4096/microphone.png', } let enable = false; let terminate = false; //強制停止フラグ let recognized = false; // 何らかの音声認識に成功したら立てる export function initialize() { if (!hasSpeechRecognition()) { console.info('SpeechRecognition is not available on the browser.'); return; } const viewer = interimArea(); scrapboxDOM.textInput.parentElement.append(viewer); let recognition = new SpeechRecognition(); //recognition.maxAlternatives = 3; if (!isMobile()) { recognition.interimResults = true; recognition.continuous = true; } // mobile版では、入力中の表示を出す if(isMobile()) { recognition.onspeechstart = () => { const textInput = scrapboxDOM.textInput; viewer.textContent = 'Analyzing...'; viewer.show({ height: textInput.style.height, top: textInput.style.top, left: textInput.style.left, lineHeight: textInput.style.lineHeight, }); } } let waiting = undefined; recognition.onresult = async ({results}) => { recognized = true; const textInput = scrapboxDOM.textInput; const result = [...results].pop(); //console.log(result); const transcript = result[0].transcript; if (result.isFinal) { viewer.hide(); await waiting; // 直前の入力が完了するまで待つ waiting = insertText(transcript); } else { // 暫定の認識結果 viewer.textContent = transcript; viewer.show({ height: textInput.style.height, top: textInput.style.top, left: textInput.style.left, lineHeight: textInput.style.lineHeight, }); } }; recognition.onstart = () => { enable = true; recognized = false; terminate = false; document.getElementById(pageMenuId).firstElementChild.src = icons.on; }; recognition.onend = () => { viewer.hide(); // mobileで音声入力を継続させる // 条件：page menuを押していない かつ 前回何らかの音声認識に成功した if (isMobile() && !terminate && recognized) { recognition.start(); return; } enable = false; document.getElementById(pageMenuId).firstElementChild.src = icons.off; }; scrapbox.PageMenu.addMenu({ title: pageMenuId, image: icons.off, onClick: () => { if (enable) { recognition.stop(); terminate = true; return; } recognition.start(); }, }); }

import {style, h} from '../easyDOMgenerator/script.js'; const css = ` :host { color: #777; display: inline-block; position: absolute; word-wrap: nowrap; min-width: 10em; } `; customElements.define('interim-area', class extends HTMLElement { constructor() { super(); const shadow = this.attachShadow({mode: 'open'}); shadow.innerHTML = `<style>${css}</style><slot></slot>`; } show({height, top, left, lineHeight}) { this.hidden = false; this.style.height = height; this.style.top = top; this.style.left = left; this.style.lineHeight = lineHeight ?? '18px'; } hide() { this.hidden = true; } }); export const interimArea = (...params) => h('interim-area', ...params);