Widget:音乐盒信息

章节4：巴兰诡事

章节3：蒂卡传说

章节2：龙陵秘闻

章节1：植物围城

联动

<button class="button_css_pve_04" onclick="selectAudio('https://patchwiki.biligame.com/images/ssjj2/4/4f/ca1xz5wq28moafgpld342iyqdaiz7a8.mp3')">拯救小黄鸭</button>

<button class="button_css_001" onclick="selectAudio('https://patchwiki.biligame.com/images/ssjj2/8/83/d5rweiquflq0xxl4xgedvrgc3ck6975.mp3')">虬龙营</button> <button class="button_css_001" onclick="selectAudio('https://patchwiki.biligame.com/images/ssjj2/3/3f/msujfhif315460wyhpu6ks3qr8zxfig.mp3')">虬龙营胜利</button> <button class="button_css_001" onclick="selectAudio('https://patchwiki.biligame.com/images/ssjj2/f/f8/8099x3jtt21enw7eh5o802f1uc0znf3.mp3')">刀锋战士</button> <button class="button_css_001" onclick="selectAudio('https://patchwiki.biligame.com/images/ssjj2/1/1f/35vyy3xoe17s7cf01zamx92kr78njdy.mp3')">热力格斗常规A</button> <button class="button_css_001" onclick="selectAudio('https://patchwiki.biligame.com/images/ssjj2/f/f2/cwyv1ox08yzvoce1r80y1572xwszv76.mp3')">热力格斗常规B</button> <button class="button_css_001" onclick="selectAudio('https://patchwiki.biligame.com/images/ssjj2/f/f9/td3ob70hmr8yknj5ljdj1y1sbcasrwu.mp3')">热力格斗决战时刻</button>
虬龙营_胜利音频由玩家【克城没有詹黑】提供！

<nbsp style="color: #8F1E20; font-weight: bold;">提醒：流量用户慎播！</nbsp>
<button class="button_css_001" onclick="selectAudio('https://patchwiki.biligame.com/images/ssjj2/6/62/r4a96oo7r7euczt7cvumpucexdn029y.mp3')">《瞳》</button> <button class="button_css_001" onclick="selectAudio('https://patchwiki.biligame.com/images/ssjj2/f/f1/ge9bg9snn66ufk6lkos5s5m8ugbd1iv.mp3')">《热爱闪耀》</button>

<style>

 #button_main_01  {
   align-items: center;
   background-color: #D4D4D4;
 }
 #button_main_01 .button_control{
   background-color: #F7F7F7;height: 40px;min-width: 60px;font-size: 20px;border:none;color: #8C1919;;margin-left: 20px
 }
 #button_main_01 .button_css_001, .button_css_pve_01 , .button_css_pve_02, .button_css_pve_03, .button_css_pve_04{
   height: 40px;min-width: 80px;font-size: 18px;border:none;color: #F7F7F7;padding-left: 10px;padding-right: 10px;margin: 2px 0px 2px 0px;
 }
 #button_main_01 .button_css_001{
   background-color: #8C1919; color: #F7F7F7;
 }
 #button_main_01 .button_css_pve_01{
   background-color: #A0F7A6; color: #000;
 }
 #button_main_01 .button_css_pve_02{
   background-color: #9EC7F7; color: #000;
 }
 #button_main_01 .button_css_pve_03{
   background-color: #F7A0A2; color: #000;
 }
 #button_main_01 .button_css_pve_04{
   background-color: #F7E59E; color: #000;
 }
 #button_main_01 .volumeControl, #button_main_01 .globalProgressBar  {
   width: 50%;
 }
 @media (max-width: 1180px) {
   #button_main_01 .volumeControl, #button_main_01 .globalProgressBar  {
     width: 100%;
   }
 }
 .row {
   margin-right: 10px;
   margin-left: 10px;
 }
 nbsp {
   color: #121212;
 }

</style>

     <audio id="audioPlayer" src="" style="display:none;"></audio>

       <nbsp>音量调节</nbsp>
       <input type="range" id="volumeControl" min="0" max="1" step="0.01" value="0.5">

       <nbsp>进度调整</nbsp>
       <input type="range" id="globalProgressBar" min="0" max="100" step="1" value="0" onchange="updateProgress(this.value)">

<nbsp>点击按钮选择音乐。
中间是音乐播放器，可以调节音量和进度。
点击播放按钮一次开始播放，两次暂停播放，并保留播放进度。
点击停止按钮结束当前音频播放
在一个音频播放时，点击其它音频，该音频会终止播放。</nbsp>

     <script>
                   // 存储当前播放的音频元素
                   var currentAudio = document.getElementById('audioPlayer');
                   var isLooping = false; // 单曲循环状态
           
                   // 函数：选择音频
                   function selectAudio(src) {
                       if (currentAudio) {
                           currentAudio.pause();
                       }
                       currentAudio.src = src;
                       if (currentAudio.paused) {
                           currentAudio.play();
                           document.getElementById('globalPlayPause').textContent = '暂停';
                       }
                       updateProgressBar(); // 更新进度条
                   }
           
                   // 函数：播放或暂停所有音频
                   function playPauseAll() {
                       if (currentAudio) {
                           if (currentAudio.paused) {
                               currentAudio.play();
                           } else {
                               currentAudio.pause();
                           }
                           document.getElementById('globalPlayPause').textContent = currentAudio.paused ? '播放' : '暂停';
                       }
                   }
           
                   // 函数：结束播放当前音频
                   function stopAll() {
                       if (currentAudio) {
                           currentAudio.pause();
                           currentAudio.currentTime = 0;
                           document.getElementById('globalPlayPause').textContent = '播放';
                       }
                   }
           
                   // 函数：切换单曲循环
                   function toggleLoop() {
                       isLooping = !isLooping;
                       currentAudio.loop = isLooping;
                       document.getElementById('globalLoop').checked = isLooping;
                   }
           
                   // 函数：设置音量
                   function setVolume(volumeValue) {
                       currentAudio.volume = volumeValue;
                   }
           
                   // 更新进度条的函数
                   function updateProgress(value) {
                       currentAudio.currentTime = (currentAudio.duration * (value / 100)) || 0;
                   }
           
                   // 定时更新进度条的函数
                   function updateProgressBar() {
                       if (currentAudio) {
                           var progress = (currentAudio.currentTime / currentAudio.duration) * 100 || 0;
                           document.getElementById('globalProgressBar').value = progress;
                       }
                   }
           
                   // 设置定时器，定期更新进度条
                   setInterval(updateProgressBar, 1000);
           
                   // 绑定全局控制按钮
                   document.getElementById('globalPlayPause').addEventListener('click', playPauseAll);
                   document.getElementById('globalStop').addEventListener('click', stopAll);
                   document.getElementById('volumeControl').addEventListener('input', function() {
                       setVolume(this.value);
                   });
                   document.getElementById('globalLoop').addEventListener('change', toggleLoop);
           
                   // 初始化时，绑定音量控制
                   document.addEventListener('DOMContentLoaded', function() {
                       setVolume(document.getElementById('volumeControl').value);
                   });
     </script>
     <script>

/*主选项列*/

   	/* 点击按钮后，应用鼠标悬停时的样式 */
   	var button2 = document.getElementsByClassName('button_css_001');
   	for (var i = 0; i < button2.length; i++) {
   		button2[i].addEventListener('click', function () {
   			// 先将所有按钮的样式重置
   			for (var j = 0; j < button2.length; j++) {
   				button2[j].classList.remove('button_css_001_active');
   			}
   
   			// 将当前点击的按钮添加一个激活类，这个类将应用鼠标悬停时的样式
   			this.classList.add('button_css_001_active');
   		});
   	}

/*次选项列*/ // 为每个按钮添加事件监听 /*var buttons = document.getElementsByClassName('tab1002'); for (var i = 0; i < buttons.length; i++) { buttons[i].addEventListener('click', function() { // 先将所有按钮的颜色恢复为原先的颜色 for (var j = 0; j < buttons.length; j++) { buttons[j].style.backgroundColor = ""; // 不设置颜色，使用默认颜色 } // 将当前点击的按钮颜色设置为白色 this.style.backgroundColor = "#5589C1"; }); }*/

     </script>

Widget:音乐盒信息

WIKI功能

目录

章节4：巴兰诡事

章节3：蒂卡传说

章节2：龙陵秘闻

章节1：植物围城

联动