scrapbox-speech-input

/icons/hr.icon

この操作方法はいいな

組み込みたい

code:script.js

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 = {

}

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;

//console.log(result);

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

},

});

}

暫定結果を表示するUI

これCustom Elementにする必要あったかな……？

code:interimViewer.js

import {style, h} from '../easyDOMgenerator/script.js';

const css = `

:host {

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

}

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