Add option for text-to-speech

This commit is contained in:
toasted-nutbread 2019-10-12 22:50:22 -04:00
parent 2f88bcf82c
commit 21a2730cde
4 changed files with 99 additions and 1 deletions

View File

@ -287,7 +287,8 @@ function profileOptionsCreateDefaults() {
sources: ['jpod101'], sources: ['jpod101'],
volume: 100, volume: 100,
autoPlay: false, autoPlay: false,
customSourceUrl: '' customSourceUrl: '',
textToSpeechVoice: ''
}, },
scanning: { scanning: {

View File

@ -48,6 +48,7 @@ async function formRead(options) {
options.audio.autoPlay = $('#auto-play-audio').prop('checked'); options.audio.autoPlay = $('#auto-play-audio').prop('checked');
options.audio.volume = parseFloat($('#audio-playback-volume').val()); options.audio.volume = parseFloat($('#audio-playback-volume').val());
options.audio.customSourceUrl = $('#audio-custom-source').val(); options.audio.customSourceUrl = $('#audio-custom-source').val();
options.audio.textToSpeechVoice = $('#text-to-speech-voice').val();
options.scanning.middleMouse = $('#middle-mouse-button-scan').prop('checked'); options.scanning.middleMouse = $('#middle-mouse-button-scan').prop('checked');
options.scanning.touchInputEnabled = $('#touch-input-enabled').prop('checked'); options.scanning.touchInputEnabled = $('#touch-input-enabled').prop('checked');
@ -119,6 +120,7 @@ async function formWrite(options) {
$('#auto-play-audio').prop('checked', options.audio.autoPlay); $('#auto-play-audio').prop('checked', options.audio.autoPlay);
$('#audio-playback-volume').val(options.audio.volume); $('#audio-playback-volume').val(options.audio.volume);
$('#audio-custom-source').val(options.audio.customSourceUrl); $('#audio-custom-source').val(options.audio.customSourceUrl);
$('#text-to-speech-voice').val(options.audio.textToSpeechVoice).attr('data-value', options.audio.textToSpeechVoice);
$('#middle-mouse-button-scan').prop('checked', options.scanning.middleMouse); $('#middle-mouse-button-scan').prop('checked', options.scanning.middleMouse);
$('#touch-input-enabled').prop('checked', options.scanning.touchInputEnabled); $('#touch-input-enabled').prop('checked', options.scanning.touchInputEnabled);
@ -326,6 +328,77 @@ async function audioSettingsInitialize() {
const options = await apiOptionsGet(optionsContext); const options = await apiOptionsGet(optionsContext);
audioSourceUI = new AudioSourceUI.Container(options.audio.sources, $('.audio-source-list'), $('.audio-source-add')); audioSourceUI = new AudioSourceUI.Container(options.audio.sources, $('.audio-source-list'), $('.audio-source-add'));
audioSourceUI.save = () => apiOptionsSave(); audioSourceUI.save = () => apiOptionsSave();
textToSpeechInitialize();
}
function textToSpeechInitialize() {
if (typeof speechSynthesis === 'undefined') { return; }
speechSynthesis.addEventListener('voiceschanged', () => updateTextToSpeechVoices(), false);
updateTextToSpeechVoices();
$('#text-to-speech-voice-test').on('click', () => textToSpeechTest());
}
function updateTextToSpeechVoices() {
const voices = Array.prototype.map.call(speechSynthesis.getVoices(), (voice, index) => ({voice, index}));
voices.sort(textToSpeechVoiceCompare);
if (voices.length > 0) {
$('#text-to-speech-voice-container').css('display', '');
}
const select = $('#text-to-speech-voice');
select.empty();
select.append($('<option>').val('').text('None'));
for (const {voice} of voices) {
select.append($('<option>').val(voice.voiceURI).text(`${voice.name} (${voice.lang})`));
}
select.val(select.attr('data-value'));
}
function compareLanguageTags(a, b) {
if (a.substr(0, 3) === 'ja-') {
return (b.substr(0, 3) === 'ja-') ? 0 : -1;
} else {
return (b.substr(0, 3) === 'ja-') ? 1 : 0;
}
}
function textToSpeechVoiceCompare(a, b) {
const i = compareLanguageTags(a.voice.lang, b.voice.lang);
if (i !== 0) { return i; }
if (a.voice.default) {
if (!b.voice.default) {
return -1;
}
} else if (b.voice.default) {
return 1;
}
if (a.index < b.index) { return -1; }
if (a.index > b.index) { return 1; }
return 0;
}
function textToSpeechTest() {
try {
const text = $('#text-to-speech-voice-test').attr('data-speech-text') || '';
const voiceURI = $('#text-to-speech-voice').val();
const voice = audioGetTextToSpeechVoice(voiceURI);
if (voice === null) { return; }
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'ja-JP';
utterance.voice = voice;
utterance.volume = 1.0;
speechSynthesis.speak(utterance);
} catch (e) {
// NOP
}
} }

View File

@ -293,6 +293,16 @@
<input type="number" min="0" max="100" id="audio-playback-volume" class="form-control"> <input type="number" min="0" max="100" id="audio-playback-volume" class="form-control">
</div> </div>
<div class="form-group" style="display: none;" id="text-to-speech-voice-container">
<label for="text-to-speech-voice">Text-to-speech voice</label>
<div class="input-group">
<select class="form-control" id="text-to-speech-voice"></select>
<div class="input-group-btn">
<button class="btn btn-default" id="text-to-speech-voice-test" title="Test voice" data-speech-text="よみちゃん"><span class="glyphicon glyphicon-volume-up"></span></button>
</div>
</div>
</div>
<div class="form-group options-advanced"> <div class="form-group options-advanced">
<label for="audio-custom-source">Custom audio source <span class="label-light">(URL)</span></label> <label for="audio-custom-source">Custom audio source <span class="label-light">(URL)</span></label>
<input type="text" id="audio-custom-source" class="form-control" placeholder="Example: http://localhost/audio.mp3?expression={expression}&reading={reading}"> <input type="text" id="audio-custom-source" class="form-control" placeholder="Example: http://localhost/audio.mp3?expression={expression}&reading={reading}">
@ -658,6 +668,7 @@
<script src="/bg/js/profile-conditions.js"></script> <script src="/bg/js/profile-conditions.js"></script>
<script src="/bg/js/templates.js"></script> <script src="/bg/js/templates.js"></script>
<script src="/bg/js/util.js"></script> <script src="/bg/js/util.js"></script>
<script src="/mixed/js/audio.js"></script>
<script src="/bg/js/settings-profiles.js"></script> <script src="/bg/js/settings-profiles.js"></script>
<script src="/bg/js/settings.js"></script> <script src="/bg/js/settings.js"></script>

View File

@ -58,3 +58,16 @@ async function audioGetFromSources(expression, sources, optionsContext, createAu
} }
return {audio: null, source: null}; return {audio: null, source: null};
} }
function audioGetTextToSpeechVoice(voiceURI) {
try {
for (const voice of speechSynthesis.getVoices()) {
if (voice.voiceURI === voiceURI) {
return voice;
}
}
} catch (e) {
// NOP
}
return null;
}