chizui/aklive2d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(showcase): finish voice.js

Browse Source
This commit is contained in:
Haoyu Xu
2023-02-10 21:16:36 -05:00
parent 59f113e741
commit 808d0ff6da
4 changed files with 477 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/settings.js
View File

@@ -234,8 +234,9 @@ export default class Settings {
}
elementPosition(el, x, y) {
const elWidth = getComputedStyle(el).width
const elHeight = getComputedStyle(el).height
const computedStyle = getComputedStyle(el)
const elWidth = computedStyle.width
const elHeight = computedStyle.height
const windowWidth = window.innerWidth
const windowHeight = window.innerHeight
const xRange = windowWidth - parseInt(elWidth)
@@ -352,8 +353,8 @@ export default class Settings {
</div>
<div>
<label for="voice">Voice</label>
<input type="checkbox" id="voice" name="voice" checked/>
<div id="voice_realted">
<input type="checkbox" id="voice" name="voice"/>
<div id="voice_realted" hidden>
<div>
<label for="voice_lang_select">Choose the language of voice:</label>
<select name="voice_lang" id="voice_lang_select">
@@ -368,8 +369,6 @@ export default class Settings {
<label for="voice_next_duration">Next Duration (min)</label>
<input type="number" id="voice_next_duration_input" name="voice_next_duration" value="${window.voice.nextDuration}" />
</div>
</div>
</div>
<div>
<label for="subtitle">Subtitle</label>
<input type="checkbox" id="subtitle" name="subtitle" checked/>
@@ -380,11 +379,23 @@ export default class Settings {
${this.#updateOptions("subtitle_lang_select", window.voice.subtitleLanguages)}
</select>
</div>
<div>
<label for="subtitle_padding_x">Subtitle X Position</label>
<input type="range" min="0" max="100" id="subtitle_padding_x_slider" value="${window.voice.subtitleX}" />
<input type="number" id="subtitle_padding_x_input" name="subtitle_padding_x" value="${window.voice.subtitleX}" />
</div>
<div>
<label for="subtitle_padding_y">Subtitle Y Position</label>
<input type="range" min="0" max="100" id="subtitle_padding_y_slider" value="${window.voice.subtitleY}" />
<input type="number" id="subtitle_padding_y_input" name="subtitle_padding_y" value="${window.voice.subtitleY}" />
</div>
</div>
</div>
<div>
<label for="voice_actor">Voice Actor</label>
<input type="checkbox" id="voice_actor" name="voice_actor" checked/>
<input type="checkbox" id="voice_actor" name="voice_actor"/>
</div>
</div>
</div>
<div>
<label for="position">Position</label>
@@ -445,6 +456,13 @@ export default class Settings {
return value
}
#getCurrentOptions(id, value) {
const e = document.getElementById(id);
const options = [...e]
const toSelecteIndex = options.findIndex(i => options.find(o => o.value === value) === i)
e.selectedIndex = toSelecteIndex;
}
#addEventListeners() {
const _this = this;
const listeners = [
@@ -526,6 +544,7 @@ export default class Settings {
id: "voice_lang_select", event: "change", handler: e => {
window.voice.language = e.currentTarget.value
_this.#updateOptions("subtitle_lang_select", window.voice.subtitleLanguages)
_this.#getCurrentOptions("subtitle_lang_select", window.voice.subtitleLanguage)
}
}, {
id: "voice_idle_duration_input", event: "change", handler: e => {
@@ -542,6 +561,26 @@ export default class Settings {
}
}, {
id: "subtitle_lang_select", event: "change", handler: e => window.voice.subtitleLanguage = e.currentTarget.value
}, {
id: "subtitle_padding_x_slider", event: "input", handler: e => {
_this.#sync(e.currentTarget, "subtitle_padding_x_input");
window.voice.subtitleX = e.currentTarget.value
}
}, {
id: "subtitle_padding_x_input", event: "change", handler: e => {
_this.#sync(e.currentTarget, "subtitle_padding_x_slider");
window.voice.subtitleX = e.currentTarget.value
}
}, {
id: "subtitle_padding_y_slider", event: "input", handler: e => {
_this.#sync(e.currentTarget, "subtitle_padding_y_input");
window.voice.subtitleY = e.currentTarget.value
}
}, {
id: "subtitle_padding_y_input", event: "change", handler: e => {
_this.#sync(e.currentTarget, "subtitle_padding_y_slider");
window.voice.subtitleY = e.currentTarget.value
}
}, {
id: "voice_actor", event: "click", handler: e => {
window.voice.useVoiceActor = e.currentTarget.checked;

73
src/components/voice.css
View File

@@ -0,0 +1,73 @@
#voice_box {
position: fixed;
left: 0;
bottom: 0;
z-index: 1;
width: 480px;
opacity: 0;
margin: 16px;
font-family: 'Roboto', sans-serif;
transition: opacity 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.voice-title {
background-color: #9e9e9e;
color: black;
display: inline-block;
position: absolute;
top: -12px;
left: -8px;
padding: 2px 8px;
font-size: 14px;
min-width: 120px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.5);
z-index: 1;
}
.voice-subtitle {
background-color: rgba(0, 0, 0, 0.65);
color: white;
padding: 16px;
font-size: 18px;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.5);
position: relative;
}
.voice-triangle {
position: absolute;
bottom: 0px;
right: 8px;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 8px 8px 8px;
border-color: white transparent transparent transparent;
}
.voice-actor {
margin-top: 10px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
}
.voice-actor-icon {
height: 32px;
width: 32px;
background-color: rgba(0, 0, 0, 1);
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAXCAYAAAAGAx/kAAACGElEQVQ4jY2UO4sUQRSFv+6e3hkf6yqi62LiD1DRwGRFZDUTRTAVMTHzHxhosBgr+IhMzIXFRzKJYiQoCLqroYGCgiDK6K6z8+hj0Kd2yrZn8EJRza06X91761Ynkphgh4ETwBB4BrwZu1NS3WhJui1pTSNblXTLa/9oxoEWNd4W/xc0K6kzAfRd0lxV16jJdg6YBtaAB8AvoPA4D+wEZoEvsSgGJYAiXwf4EEFyYOC1qYqmFhQ2bQEO+MYKILMv1tWCikqKm4CPwKoF00DTa6pqkqiP9gIHgR3AWaDvdJIoip4jewh8BVaAz1XQOeAKcNcp9O0fAqlTLgzsApeBa8BSNbUUaAFvgVdMtnlHmsXiEHrHpw+iaOps4BRlDUASQDnw3uA9QHsCqA3sMmjFmhRJmaSmO/SmpCeSjktarunqd5IWJLUl3bCmKSlLJGWuVQbMAHcoi3oPWAAOOerXwFPgErAVuEjZGkNgkEhKDco9bwOuG/Ac+OS67ANOGngV+OYDewEUqt+gvLWmxxHgFHDapz52fV4C64Z3PW+AUsPyCJYCP4FHPuQMsNlRrHv0DRo2XP3Ccw/4Tdl8U2GTb6trYYimYNQ6Gw0pYDuwn1E7hJR3W3TMvp5hKbAM/IC/n8hR4L6hqSPJGT3QjPIfFX4nDeAC8CIGhTrBqNsz16plWN/R9KJShGzUiCBBnFS+FYmCP41gBaA/cImMsTl24NIAAAAASUVORK5CYII=');
background-position: center;
background-repeat: no-repeat;
}
.voice-actor-name {
height: 16px;
font-size: 16px;
line-height: 16px;
background-color: rgba(0, 0, 0, 0.3);
color: white;
display: inline-block;
padding: 8px;
}

105
src/components/voice.js
View File

@@ -6,16 +6,17 @@ export default class Voice {
#widgetEl
#audioEl = new Audio()
#audioElId = 'voice-audio'
#defaultVoiceLang = "JP"
#defaultVoiceLang = "CN_MANDARIN"
#defaultRegion = charword_table.config.default_region
#defaultIdleDuration = 10 * 60 * 1000
#defaultNextDuration = 3 * 60 * 1000
#voiceLang = this.#defaultVoiceLang
#voiceLanguages = Object.keys(this.#getCVInfo(this.#defaultRegion))
#subtitleLang = this.#defaultRegion
#useSubtitle = false
#useSubtitle = true
#useVoice = false
#useVoiceActor = false
#isPlaying = false
#currentVoiceId = null
#lastVoiceId = null
#idleListener = -1
@@ -24,6 +25,11 @@ export default class Voice {
#nextDuration = this.#defaultNextDuration
#lastClickToNext = false
#voiceFolderObject = this.#getVoiceFolderObject()
#voiceList = Object.keys(this.#getVoices())
#defaultSubtitleX = 0
#defaultSubtitleY = 0
#subtitleX = this.#defaultSubtitleX
#subtitleY = this.#defaultSubtitleY
constructor(el, widgetEl) {
this.#el = el
@@ -54,6 +60,11 @@ export default class Voice {
*/
set useSubtitle(show) {
this.#useSubtitle = show
this.#el.hidden = !show
}
get useSubtitle() {
return this.#useSubtitle
}
/**
@@ -61,6 +72,15 @@ export default class Voice {
*/
set useVoice(show) {
this.#useVoice = show
this.#el.hidden = !show
this.#playEntryVoice()
if (!show && this.#isPlaying) {
this.#audioEl.pause()
}
}
get useVoice() {
return this.#useVoice
}
/**
@@ -68,6 +88,11 @@ export default class Voice {
*/
set useVoiceActor(show) {
this.#useVoiceActor = show
document.getElementById('voice_actor_box').hidden = !show
}
get useVoiceActor() {
return this.#useVoiceActor
}
/**
@@ -89,6 +114,34 @@ export default class Voice {
return this.#getSubtitleLanguages()
}
/**
* @param {int} x
*/
set subtitleX(x) {
this.#subtitleX = x
this.#updateSubtitlePosition()
}
get subtitleX() {
return this.#subtitleX
}
/**
* @param {int} y
*/
set subtitleY(y) {
this.#subtitleY = y - 100
this.#updateSubtitlePosition()
}
get subtitleY() {
return this.#subtitleY + 100
}
#updateSubtitlePosition() {
window.settings.elementPosition(this.#el, this.#subtitleX, this.#subtitleY)
}
/**
* @param {string} lang
*/
@@ -133,7 +186,7 @@ export default class Voice {
set nextDuration(duration) {
clearInterval(this.#nextListener)
if (duration !== 0) {
this.#nextDuration = duration * 1000
this.#nextDuration = duration * 60 * 1000
this.#initNextVoiceTimer()
}
}
@@ -159,7 +212,11 @@ export default class Voice {
}
#nextVoice() {
this.#playVoice("CN_001")
const voiceId = () => {
const id = this.#voiceList[Math.floor((Math.random() * this.#voiceList.length))]
return id === this.#lastVoiceId ? voiceId() : id
}
this.#playVoice(voiceId())
}
#playEntryVoice() {
@@ -167,24 +224,42 @@ export default class Voice {
}
#setCurrentSubtitle(id) {
console.log(id, this.#getSubtitleById(id))
if (id === null) {
setTimeout(() => {
if (this.#isPlaying) return
this.#el.style.opacity = 1
}, 5 * 1000);
return
}
const subtitle = this.#getSubtitleById(id)
const title = subtitle.title
const content = subtitle.text
const cvInfo = this.#getCVInfoByVoiceLang()[this.#voiceLang][this.subtitleLanguage]
document.getElementById('voice_title').innerText = title
document.getElementById('voice_subtitle').innerText = content
this.#el.style.opacity = 1
document.getElementById('voice_actor_name').innerText = cvInfo.join('')
}
#playVoice(id) {
if (!this.useVoice) return
this.#lastVoiceId = this.#currentVoiceId
this.#currentVoiceId = id
this.#audioEl.src = `./assets/${this.#getVoiceFoler()
}/${id}.wav`
}/${id}.wav`
let startPlayPromise = this.#audioEl.play()
if (startPlayPromise !== undefined) {
startPlayPromise
.then(() => {
this.#isPlaying = true
const audioEndedFunc = () => {
this.#lastVoiceId = this.#currentVoiceId
this.#currentVoiceId = null
this.#isPlaying = false
this.#audioEl.removeEventListener('ended', audioEndedFunc)
if (this.#currentVoiceId !== id) return
this.#setCurrentSubtitle(null)
this.#lastClickToNext = false
this.#audioEl.removeEventListener('ended', audioEndedFunc)
}
this.#audioEl.addEventListener('ended', audioEndedFunc)
this.#setCurrentSubtitle(id)
})
@@ -282,8 +357,18 @@ export default class Voice {
this.#el.innerHTML = `
<audio id="${this.#audioElId}" autoplay>
<source type="audio/wav">
Your browser does not support the audio element.
</audio>
<div class="voice-wrapper" id="voice_wrapper">
<div class="voice-title" id="voice_title"></div>
<div class="voice-subtitle">
<div id="voice_subtitle"></div>
<div class="voice-triangle"></div>
</div>
</div>
<div class="voice-actor" id="voice_actor_box" hidden>
<span class="voice-actor-icon"></span>
<span id="voice_actor_name" class="voice-actor-name"></span>
</div>
`
}
}

4
src/index.js
View File

@@ -7,7 +7,7 @@ import Voice from '@/components/voice'
document.querySelector('#app').innerHTML = `
<img src="./assets/${import.meta.env.VITE_LOGO_FILENAME}.png" class="logo invert-filter" id="logo" alt="operator logo" />
<div id="settings"></div>
<div id="voice" hidden></div>
<div id="voice_box" hidden></div>
<div id="widget-wrapper">
<div id="fallback"
style="background-image: url(./assets/${import.meta.env.VITE_FALLBACK_FILENAME}.png)"
@@ -16,7 +16,7 @@ document.querySelector('#app').innerHTML = `
<div id="player" hidden></div>
</div>
`
window.voice = new Voice(document.querySelector('#voice'), document.querySelector('#widget-wrapper'))
window.voice = new Voice(document.querySelector('#voice_box'), document.querySelector('#widget-wrapper'))
window.voice.init()
window.settings = new Settings(document.querySelector('#settings'), document.querySelector('#logo'))
document.title = import.meta.env.VITE_TITLE