scrapbox-speech-input

https://gyazo.com/89250c5eb7e0e152089b0f10b8dfd849

Firefoxでは使えない

2021-03-29 13:49:45 代替候補を選べるようにしてみた

mobileでは使えないみたい

2021-03-28 17:23:41 Chrome for Androidでの挙動を直した

二重に入力されないようにした

連続して入力できるようにした

何も入力されなかったら自動で終了するようにした

参考

この記事を元に後で書き換えたい

既知の問題

あと二重に入力されたりする

実装したいこと

音声入力終了時に、自動的に改行が入るようにする

どのタイミングにするかが悩ましい

代替変換候補を表示する

code:js

import('/api/code/programming-notes/scrapbox-speech-input/script.js')

.then(({initialize}) => initialize());

code:script.js

import {insertText} from '../scrapbox-insert-text-2/script.js';

import {press} from '../scrapbox-keyboard-emulation/script.js';

import {hasSpeechRecognition} from '../SpeechRecognitionに対応しているか判定する/script.js';

import {scrapboxDOM} from '../scrapbox-dom-accessor/script.js';

import {interimArea} from './interimViewer.js';

import '../scrapbox-suggest-container-3/script.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);

const suggestBox = document.createElement('suggest-container');

scrapboxDOM.editor.append(suggestBox);

let recognition = new SpeechRecognition();

recognition.maxAlternatives = 10;

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

suggestBox.hide();

if (result.length > 1) {

return {

title: transcript,

onClick: async () => {

suggestBox.hide();

await waiting;

press('ArrowLeft', {shiftKey: true});

}

waiting = insertText(transcript);

},

};

}));

suggestBox.position({

top: parseInt(textInput.style.top) + 14,

left: parseInt(textInput.style.left),

});

}

await waiting; // 直前の入力が完了するまで待つ

} else {

suggestBox.hide();

// 暫定の認識結果

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;

suggestBox.hide();

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

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

code:script.js

const isMobile = () => /mobile/i.test(navigator.userAgent);

MDN.icon

Qiita.icon