Widget:音乐盒信息

音乐盒
局内音乐
PVE专页
变异战专页
大厅音乐

<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://vip.123pan.cn/1795759/12976334')">刀锋战士</button> <button class="button_css_001" onclick="selectAudio('https://vip.123pan.cn/1795759/12976338')">热力格斗常规A</button> <button class="button_css_001" onclick="selectAudio('https://vip.123pan.cn/1795759/12976336')">热力格斗常规B</button> <button class="button_css_001" onclick="selectAudio('https://vip.123pan.cn/1795759/12976335')">热力格斗决战时刻</button>
虬龙营_胜利音频由玩家【克城没有詹黑】提供！

龙陵秘闻

植物围城

<button class="button_css_001" onclick="selectAudio('https://patchwiki.biligame.com/images/ssjj2/b/bd/k5oi44dkixf3cbe9tx0ao30giig1lyi.mp3')">普通</button> <button class="button_css_001" onclick="selectAudio('https://patchwiki.biligame.com/images/ssjj2/a/a9/kmawxtlqtxqfiodf7lu1is4qkusv92w.mp3')">精英A</button> <button class="button_css_001" onclick="selectAudio('https://patchwiki.biligame.com/images/ssjj2/b/bf/5r4lyqvcn5dmelxpacxjc3337vv2w7r.mp3')">精英B</button> <button class="button_css_001" onclick="selectAudio('https://patchwiki.biligame.com/images/ssjj2/9/95/3u24pipfjxn60sej8ay7qsxf5b2xt76.mp3')">首领</button> <button class="button_css_001" onclick="selectAudio('https://vip.123pan.cn/1795759/12976337')">坚守长乐园</button>

<style>

 #button_main_01  {
   align-items: center;
   background-color: #D4D4D4;
 }
 #button_main_01 .button_css_001{
   background-color: #8C1919;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_002{
   background-color: #F7F7F7;height: 40px;min-width: 60px;font-size: 20px;border:none;color: #8C1919;;margin-left: 20px
 }
 #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;

} </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)">

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

     <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>