mirror of
https://github.com/SillyTavern/SillyTavern.git
synced 2025-06-05 21:59:27 +02:00
c9783640c0
* Added control to audio ui to select bgm/ambient and lock selection to overide dynamic audio update. Load both assets and char specific audio assets * correct ambient label and default value when no assets available. * add padding in audio select * Correct audio change of background ambient when locked. Updated CSS of audio ui for mobile friendly. * add space between mixer * Add checkbox to enable dynamic bgm/ambient switch * correct background ambient fadout * continue debuging ambient audio update * finish debuging * Fix BGM console error on first run. Reformat plugin code * Changed audio bgm lock into loop on/off. Added random pick button for bgm. Moved ambient lock button to right. * Add mouse wheel event handler on volume controls * Change bgm select to only contain current chat character bgm (solo/group). When enable expression bgm is off, any of the char+asset bgm can play next if not looping. * Corrected bgm looping at start. Force random to play another song if there is any. * Format code --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>
120 lines
6.8 KiB
HTML
120 lines
6.8 KiB
HTML
<div id="audio_settings">
|
|
<div class="inline-drawer">
|
|
<div class="inline-drawer-toggle inline-drawer-header">
|
|
<b>Dynamic Audio</b>
|
|
<div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
|
|
</div>
|
|
<div class="inline-drawer-content">
|
|
<div>
|
|
<label class="checkbox_label" for="audio_enabled">
|
|
<input type="checkbox" id="audio_enabled" name="audio_enabled">
|
|
<small>Enabled</small>
|
|
</label>
|
|
<div id="audio_bgm_dynamic_enable_div">
|
|
<label class="checkbox_label" for="audio_dynamic_bgm_enabled">
|
|
<input type="checkbox" id="audio_dynamic_bgm_enabled" name="audio_dynamic_bgm_enabled">
|
|
<small>Enable expression BGM switch (req. character expression)</small>
|
|
</label>
|
|
</div>
|
|
<!--
|
|
<div id="audio_ambient_dynamic_enable_div">
|
|
<label class="checkbox_label" for="audio_dynamic_ambient_enabled">
|
|
<input type="checkbox" id="audio_dynamic_ambient_enabled" name="audio_dynamic_ambient_enabled">
|
|
<small>Enable ambient background switch (req. chat background)</small>
|
|
</label>
|
|
</div>
|
|
-->
|
|
<div id="audio_debug_div">
|
|
<label class="checkbox_label" for="audio_debug">
|
|
<input type="checkbox" id="audio_debug" name="audio_debug">
|
|
<small>Debug</small>
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label for="audio_refresh_assets">Refresh assets</label>
|
|
<div id="audio_refresh_assets" class="menu_button">
|
|
<i class="fa-solid fa-refresh fa-lg"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="audio-ui-block">
|
|
<label for="audio_bgm_volume_slider">Music</label>
|
|
<div class="audio-mixer-div">
|
|
<div class="audio-mixer-element audio-mixer-mute">
|
|
<label for="audio_bgm_lock" class="audio-label">Mute</label>
|
|
<div id="audio_bgm_mute" class="menu_button audio-mute-button">
|
|
<i class="fa-solid fa-volume-high fa-lg" id="audio_bgm_mute_icon"></i>
|
|
</div>
|
|
</div>
|
|
<div class="audio-mixer-element audio-mixer-volume">
|
|
<label for="audio_bgm_lock" class="audio-label">Vol <span id="audio_bgm_volume"></span></label>
|
|
<input type="range" class ="audio-slider" id ="audio_bgm_volume_slider" value = "0" maxlength ="100">
|
|
</div>
|
|
<div class="audio-mixer-element audio-mixer-playlist">
|
|
<label for="audio_bgm_lock" class="audio-label">Playlist</label>
|
|
<select id="audio_bgm_select">
|
|
</select>
|
|
</div>
|
|
<div class="audio-mixer-element audio-mixer-lock">
|
|
<label for="audio_bgm_lock" class="audio-label">Loop</label>
|
|
<div id="audio_bgm_lock" class="menu_button audio-lock-button">
|
|
<i class="fa-solid fa-repeat fa-lg" id="audio_bgm_lock_icon"></i>
|
|
</div>
|
|
</div>
|
|
<div class="audio-mixer-element audio-mixer-random">
|
|
<label for="audio_bgm_random" class="audio-label">Roll</label>
|
|
<div id="audio_bgm_random" class="menu_button audio-random-button">
|
|
<i class="fa-solid fa-random fa-lg" id="audio_bgm_random_icon"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<audio id="audio_bgm" controls src="">
|
|
</div>
|
|
<div>
|
|
<label for="audio_ambient_volume_slider">Ambient</label>
|
|
<div class="audio-mixer-div">
|
|
<div class="audio-mixer-element audio-mixer-mute">
|
|
<label for="audio_ambient_lock" class="audio-label">Mute</label>
|
|
<div id="audio_ambient_mute" class="menu_button audio-mute-button">
|
|
<i class="fa-solid fa-volume-high fa-lg" id="audio_ambient_mute_icon"></i>
|
|
</div>
|
|
</div>
|
|
<div class="audio-mixer-element audio-mixer-volume">
|
|
<label for="audio_ambient_lock" class="audio-label">Vol <span id="audio_ambient_volume"></span></label>
|
|
<input type="range" class ="audio-slider" id ="audio_ambient_volume_slider" value = "0" maxlength ="100">
|
|
</div>
|
|
<div class="audio-mixer-element audio-mixer-playlist">
|
|
<label for="audio_ambient_lock" class="audio-label">Playlist</label>
|
|
<select id="audio_ambient_select">
|
|
</select>
|
|
</div>
|
|
<div class="audio-mixer-element">
|
|
<label for="audio_ambient_lock audio-mixer-lock" class="audio-label">Lock</label>
|
|
<div id="audio_ambient_lock" class="menu_button audio-lock-button">
|
|
<i class="fa-solid fa-lock-open fa-lg" id="audio_ambient_lock_icon"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<audio id="audio_ambient" controls src="">
|
|
</div>
|
|
<div>
|
|
<label for="audio_bgm_cooldown">Music update cooldown (in seconds)</label>
|
|
<input id="audio_bgm_cooldown" class="text_pole wide30p">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<b>Hint:</b>
|
|
<i>
|
|
Create new folder in the
|
|
<b>public/characters/</b>
|
|
folder and name it as the name of the character.
|
|
Create a folder name <b>bgm</b> inside of it.
|
|
Put bgm music with expressions there. File names should follow the pattern:
|
|
<it>[expression_label]_[number].mp3</it>
|
|
By default one of the <it>neutral_[number].mp3</it> will play if classify module is not active.
|
|
</i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |