diff options
| author | toasted-nutbread <toasted-nutbread@users.noreply.github.com> | 2021-05-30 12:41:19 -0400 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-05-30 12:41:19 -0400 |
| commit | cca01e85a35576225661699a7be63550e9500642 (patch) | |
| tree | de52f621afa61afd6df2fdc6c91286e9247574ff /ext/settings.html | |
| parent | efd35de67f6700ecf4f49a87d310d99cefbaa328 (diff) | |
Improve multiple audio sources (#1718)
* Add url/voice options to audio sources
* Add help for TTS
* Remove old settings
* Update tests
* Update use of audio source URL
* Improve labels for sources with the same type
Diffstat (limited to 'ext/settings.html')
| -rw-r--r-- | ext/settings.html | 116 |
1 files changed, 39 insertions, 77 deletions
diff --git a/ext/settings.html b/ext/settings.html index 9f1e688c..38c390c4 100644 --- a/ext/settings.html +++ b/ext/settings.html @@ -2369,72 +2369,6 @@ <div class="settings-item-inner"> <div class="settings-item-left"> <div class="settings-item-label"> - Text-to-speech voice - <a class="more-toggle more-only" data-parent-distance="4">(?)</a> - </div> - </div> - <div class="settings-item-right"> - <select data-setting="audio.textToSpeechVoice" id="text-to-speech-voice"></select> - </div> - </div> - <div class="settings-item-children more" hidden> - <p> - Change which voice is used for text-to-speech audio playback. - </p> - <div class="horizontal-flex"> - <input type="text" value="よみちゃん" id="text-to-speech-voice-test-text" autocomplete="off" lang="ja"> - <button id="text-to-speech-voice-test">Test</button> - <a class="more-toggle" data-parent-distance="3">Hide…</a> - </div> - </div> - </div> - <div class="settings-item"> - <div class="settings-item-inner"> - <div class="settings-item-left"> - <div class="settings-item-label"> - Custom audio source - <a class="more-toggle more-only" data-parent-distance="4">(?)</a> - </div> - </div> - <div class="settings-item-right"> - <div class="settings-item-group"> - <div class="settings-item-group-item"> - <div class="settings-item-group-item-label">URL</div> - <input class="short-height" type="text" spellcheck="false" autocomplete="off" data-setting="audio.customSourceUrl" placeholder="None"> - </div> - </div> - </div> - </div> - <div class="settings-item-children more" hidden> - <p> - The <em>URL</em> property specifies the URL format used for fetching audio clips in <em>Custom</em> mode. - The replacement tags <code data-select-on-click="">{term}</code> and <code data-select-on-click="">{reading}</code> can be used to specify which - term and reading is being looked up.<br> - </p> - <p> - The <em>Type</em> property specifies how the URL is handled when looking up audio: - </p> - <ul> - <li> - <strong>Audio</strong> - The link is treated as a direct link to an audio file that the browser can play. - </li> - <li> - <strong>JSON</strong> - The link is interpreted as a link to a JSON file, which is downloaded and parsed for audio URLs. - The format of the JSON file is specified in <a href="/data/schemas/custom-audio-list-schema.json" target="_blank" rel="noopener noreferrer">this schema file</a>. - </li> - </ul> - <p> - Example URL: <a data-select-on-click="">http://localhost/audio.mp3?term={term}&reading={reading}</a> - </p> - <p> - <a class="more-toggle" data-parent-distance="3">Less…</a> - </p> - </div> - </div> - <div class="settings-item"> - <div class="settings-item-inner"> - <div class="settings-item-left"> - <div class="settings-item-label"> Audio sources <a class="more-toggle more-only" data-parent-distance="4">(?)</a> </div> @@ -2505,19 +2439,47 @@ </div> </div></div> +<div id="audio-source-help-text-to-speech-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small"> + <div class="modal-header"> + <div class="modal-title">Audio Source - Text-to-speech</div> + </div> + <div class="modal-body"> + <p> + A synthesized voice will speak the given text, using either the term text or the reading. + </p> + <div class="horizontal-flex margin-above"> + <input type="text" value="よみちゃん" id="text-to-speech-voice-test-text" autocomplete="off" lang="ja"> + <button id="text-to-speech-voice-test">Test</button> + </div> + </div> + <div class="modal-footer"> + <button data-modal-action="hide">Close</button> + </div> +</div></div> + <!-- Audio templates --> -<template id="audio-source-template"><div class="audio-source horizontal-flex"> - <div class="generic-list-index-prefix"></div> - <select class="audio-source-select horizontal-flex-fill"> - <option value="jpod101">JapanesePod101</option> - <option value="jpod101-alternate">JapanesePod101 (Alternate)</option> - <option value="jisho">Jisho.org</option> - <option value="text-to-speech">Text-to-speech</option> - <option value="text-to-speech-reading">Text-to-speech (Kana reading)</option> - <option value="custom">Custom URL</option> - <option value="custom-json">Custom URL (JSON)</option> - </select> +<template id="audio-source-template"><div class="audio-source"> + <div class="audio-source-index generic-list-index-prefix"></div> + <div class="audio-source-inner"> + <select class="audio-source-type-select"> + <option value="jpod101">JapanesePod101</option> + <option value="jpod101-alternate">JapanesePod101 (Alternate)</option> + <option value="jisho">Jisho.org</option> + <option value="text-to-speech">Text-to-speech</option> + <option value="text-to-speech-reading">Text-to-speech (Kana reading)</option> + <option value="custom">Custom URL</option> + <option value="custom-json">Custom URL (JSON)</option> + </select> + <div class="audio-source-parameter-container" data-field="url" hidden> + <span class="audio-source-parameter-label">URL:</span> + <input type="text" class="audio-source-parameter"> + </div> + <div class="audio-source-parameter-container" data-field="voice" hidden> + <span class="audio-source-parameter-label">Voice:</span> + <select class="audio-source-parameter"></select> + </div> + </div> <button class="icon-button audio-source-menu-button" data-menu="audio-source-menu" data-menu-position="below left"><span class="icon-button-inner"><span class="icon" data-icon="kebab-menu"></span></span></button> </div></template> |