云荷-个人作品展示

标题: 网页播放器(浏览器极速模式试听) [打印本页]
作者: 楚云飞    时间: 2025-6-11 09:27
标题: 网页播放器(浏览器极速模式试听)
本帖最后由 楚云飞 于 2025-6-11 09:30 编辑













作者: 楚云飞    时间: 2025-6-11 09:30
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>楚天音画社区音乐播放器</title>
  7.   <script src="https://cdn.tailwindcss.com"></script>
  8.   <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  9.   
  10.   <script>
  11.     tailwind.config = {
  12.       theme: {
  13.         extend: {
  14.           colors: {
  15.             primary: '#C81623',
  16.             secondary: '#2E3033',
  17.             light: '#F5F5F5',
  18.             dark: '#18191C',
  19.           },
  20.           fontFamily: {
  21.             sans: ['Inter', 'system-ui', 'sans-serif'],
  22.           },
  23.         },
  24.       }
  25.     }
  26.   </script>
  27.   
  28.   <style type="text/tailwindcss">
  29.     @layer utilities {
  30.       .content-auto {
  31.         content-visibility: auto;
  32.       }
  33.       .music-progress {
  34.         height: 3px;
  35.         background: rgba(255, 255, 255, 0.2);
  36.         cursor: pointer;
  37.       }
  38.       .music-progress-bar {
  39.         height: 100%;
  40.         background: #C81623;
  41.         position: relative;
  42.       }
  43.       .progress-handle {
  44.         position: absolute;
  45.         right: -7px;
  46.         top: 50%;
  47.         transform: translateY(-50%);
  48.         width: 14px;
  49.         height: 14px;
  50.         background: white;
  51.         border-radius: 50%;
  52.         box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  53.         opacity: 0;
  54.         transition: opacity 0.2s;
  55.       }
  56.       .music-progress:hover .progress-handle {
  57.         opacity: 1;
  58.       }
  59.       .album-rotate {
  60.         animation: rotate 20s linear infinite;
  61.         animation-play-state: paused;
  62.       }
  63.       .album-rotate.play {
  64.         animation-play-state: running;
  65.       }
  66.       @keyframes rotate {
  67.         from { transform: rotate(0deg); }
  68.         to { transform: rotate(360deg); }
  69.       }
  70.       .song-item {
  71.         transition: all 0.2s;
  72.       }
  73.       .song-item:hover {
  74.         background-color: rgba(200, 22, 35, 0.1);
  75.       }
  76.       .song-item.active {
  77.         color: #C81623;
  78.         font-weight: 500;
  79.       }
  80.       .volume-slider {
  81.         -webkit-appearance: none;
  82.         height: 3px;
  83.         background: rgba(255, 255, 255, 0.2);
  84.         border-radius: 5px;
  85.         outline: none;
  86.       }
  87.       .volume-slider::-webkit-slider-thumb {
  88.         -webkit-appearance: none;
  89.         width: 12px;
  90.         height: 12px;
  91.         background: white;
  92.         border-radius: 50%;
  93.         cursor: pointer;
  94.         transition: all 0.15s ease-in-out;
  95.       }
  96.       .volume-slider::-webkit-slider-thumb:hover {
  97.         box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.1);
  98.       }
  99.     }
  100.   </style>
  101. </head>
  102. <body class="bg-dark text-light min-h-screen font-sans">
  103.   <div class="container mx-auto px-4 py-8 max-w-6xl">
  104.     <!-- 播放器标题 -->
  105.     <div class="text-center mb-8">
  106.       <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-primary mb-2">楚天音画社区音乐播放器</h1>
  107.       <p class="text-gray-400">试听版 - 13首精选歌曲</p>
  108.     </div>
  109.    
  110.     <!-- 播放器主体 -->
  111.     <div class="bg-secondary rounded-xl shadow-xl overflow-hidden flex flex-col md:flex-row">
  112.       <!-- 左侧专辑和控制区 -->
  113.       <div class="w-full md:w-1/2 p-6 flex flex-col items-center">
  114.         <div class="relative mb-6">
  115.           <div class="w-64 h-64 rounded-full overflow-hidden border-8 border-gray-800 shadow-lg album-container">
  116.             <img id="albumCover" src="https://picsum.photos/seed/music1/500/500" alt="专辑封面" class="w-full h-full object-cover album-rotate">
  117.           </div>
  118.           <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-16 h-16 bg-secondary rounded-full flex items-center justify-center shadow-inner">
  119.             <div class="w-6 h-6 bg-dark rounded-full"></div>
  120.           </div>
  121.         </div>
  122.         
  123.         <div class="text-center mb-4">
  124.           <h2 id="songTitle" class="text-xl font-semibold">歌曲标题</h2>
  125.           <p id="songArtist" class="text-gray-400">歌手</p>
  126.         </div>
  127.         
  128.         <!-- 进度条 -->
  129.         <div class="w-full mb-6">
  130.           <div class="flex justify-between text-xs text-gray-400 mb-1">
  131.             <span id="currentTime">0:00</span>
  132.             <span id="duration">0:00</span>
  133.           </div>
  134.           <div class="music-progress" id="progressBar">
  135.             <div class="music-progress-bar" id="progress"></div>
  136.           </div>
  137.         </div>
  138.         
  139.         <!-- 控制按钮 -->
  140.         <div class="w-full flex justify-between items-center">
  141.           <button id="shuffleBtn" class="text-gray-400 hover:text-primary transition-colors">
  142.             <i class="fa fa-random text-xl"></i>
  143.           </button>
  144.           <button id="prevBtn" class="text-gray-400 hover:text-primary transition-colors">
  145.             <i class="fa fa-step-backward text-2xl"></i>
  146.           </button>
  147.           <button id="playBtn" class="bg-primary text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg hover:bg-primary/90 transition-all transform hover:scale-105">
  148.             <i class="fa fa-pause text-xl ml-1"></i>
  149.           </button>
  150.           <button id="nextBtn" class="text-gray-400 hover:text-primary transition-colors">
  151.             <i class="fa fa-step-forward text-2xl"></i>
  152.           </button>
  153.           <button id="repeatBtn" class="text-primary transition-colors">
  154.             <i class="fa fa-repeat text-xl"></i><span class="absolute text-[8px]">1</span>
  155.           </button>
  156.         </div>
  157.         
  158.         <!-- 音量控制 -->
  159.         <div class="w-full mt-6 flex items-center justify-center">
  160.           <button id="muteBtn" class="text-gray-400 hover:text-primary transition-colors mr-3">
  161.             <i class="fa fa-volume-up"></i>
  162.           </button>
  163.           <input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="0.7" class="volume-slider w-32">
  164.         </div>
  165.       </div>
  166.       
  167.       <!-- 右侧歌曲列表 -->
  168.       <div class="w-full md:w-1/2 bg-dark/50 p-6">
  169.         <div class="flex justify-between items-center mb-4">
  170.           <h3 class="text-lg font-semibold">播放列表</h3>
  171.           <span class="text-xs text-gray-400"><span id="songCount">0</span>/13 首</span>
  172.         </div>
  173.         
  174.         <div class="overflow-y-auto max-h-[400px]" id="playlistContainer">
  175.           <!-- 播放列表将通过JavaScript动态生成 -->
  176.         </div>
  177.       </div>
  178.     </div>
  179.    
  180.     <!-- 页脚 -->
  181.     <div class="mt-8 text-center text-gray-500 text-sm">
  182.       <p>楚天音画社区音乐试听版 &copy; 2025</p>
  183.       <p class="mt-1">本播放器仅用于演示，所有音乐版权归原作者所有</p>
  184.     </div>
  185.   </div>

  187.   <script>
  188.     // 音乐列表数据
  189.     const songs = [
  190.       { id: 1, title: "蜀山", artist: "马久越", album: "编辑:云飞扬", cover: "https://picsum.photos/seed/music1/500/500", src: "https://upfile.mp3.wf/view.php/48f19f0f6d2dbe56abab4c35f0ac2295.mp3" },
  191.       { id: 2, title: "流沙", artist: "马久越", album: "编辑:云飞扬", cover: "https://picsum.photos/seed/music2/500/500", src: "https://upfile.mp3.wf/view.php/deb5c303021f4d65c6adabd06dbc3bc5.mp3" },
  192.       { id: 3, title: "轮回", artist: "马久越", album: "编辑:云飞扬", cover: "https://picsum.photos/seed/music3/500/500", src: "https://upfile.mp3.wf/view.php/c6ce66a203df61f16064cda1fb874c3f.mp3" },
  193.       { id: 4, title: "胡旋舞", artist: "马久越", album: "编辑:云飞扬", cover: "https://picsum.photos/seed/music4/500/500", src: "https://upfile.mp3.wf/view.php/f258e8a6f5391f08e4075ca4c9b37b55.mp3" },
  194.       { id: 5, title: "精灵", artist: "马久越", album: "编辑:云飞扬", cover: "https://picsum.photos/seed/music5/500/500", src: "https://upfile.mp3.wf/view.php/c73bbd8d5aa392181f7b299c6ff1c381.mp3" },
  195.       { id: 6, title: "聆听", artist: "马久越", album: "编辑:云飞扬", cover: "https://picsum.photos/seed/music6/500/500", src: "https://upfile.mp3.wf/view.php/108eefe959624f66fc445036d5615768.mp3" },
  196.       { id: 7, title: "面具", artist: "马久越", album: "编辑:云飞扬", cover: "https://picsum.photos/seed/music7/500/500", src: "https://upfile.mp3.wf/view.php/65ecf225e8fc1d15e5a1fcd18b72b739.mp3" },
  197.       { id: 8, title: "情殇", artist: "马久越", album: "编辑:云飞扬", cover: "https://picsum.photos/seed/music8/500/500", src: "https://upfile.mp3.wf/view.php/602733ae06318b30676cc93db49fe0c8.mp3" },
  198.       { id: 9, title: "琼瑶", artist: "马久越", album: "编辑:云飞扬", cover: "https://picsum.photos/seed/music9/500/500", src: "https://upfile.mp3.wf/view.php/10536bfec13cec5adc4ea9f893a8a93d.mp3" },
  199.       { id: 10, title: "硕人", artist: "马久越", album: "编辑:云飞扬", cover: "https://picsum.photos/seed/music10/500/500", src: "https://upfile.mp3.wf/view.php/7396e44cdf3afd149611dcbedfae00db.mp3" },
  200.       { id: 11, title: "踏歌行", artist: "马久越", album: "编辑:云飞扬", cover: "https://picsum.photos/seed/music11/500/500", src: "https://upfile.mp3.wf/view.php/f502adf73325228ec5fa6b540d45f13b.mp3" },
  201.       { id: 12, title: "玄鸟", artist: "马久越", album: "编辑:云飞扬", cover: "https://picsum.photos/seed/music12/500/500", src: "https://upfile.mp3.wf/view.php/7af5c946e2e438b5b8d97a028833157c.mp3" },
  202.       { id: 13, title: "半个秋天", artist: "马久越", album: "编辑:云飞扬", cover: "https://picsum.photos/seed/music13/500/500", src: "https://upfile.mp3.wf/view.php/4c336fe14db548ba6e6fe1c57cec0eda.mp3" }
  203.     ];
  204.    
  205.     // DOM元素
  206.     const audioPlayer = new Audio();
  207.     const playBtn = document.getElementById('playBtn');
  208.     const prevBtn = document.getElementById('prevBtn');
  209.     const nextBtn = document.getElementById('nextBtn');
  210.     const shuffleBtn = document.getElementById('shuffleBtn');
  211.     const repeatBtn = document.getElementById('repeatBtn');
  212.     const progressBar = document.getElementById('progressBar');
  213.     const progress = document.getElementById('progress');
  214.     const currentTimeEl = document.getElementById('currentTime');
  215.     const durationEl = document.getElementById('duration');
  216.     const songTitle = document.getElementById('songTitle');
  217.     const songArtist = document.getElementById('songArtist');
  218.     const albumCover = document.getElementById('albumCover');
  219.     const playlistContainer = document.getElementById('playlistContainer');
  220.     const volumeSlider = document.getElementById('volumeSlider');
  221.     const muteBtn = document.getElementById('muteBtn');
  222.     const songCount = document.getElementById('songCount');
  223.    
  224.     // 播放器状态
  225.     let currentSongIndex = 0;
  226.     let isPlaying = true;
  227.     let isShuffle = false;
  228.     let repeatMode = 2; // 2: 列表循环
  229.    
  230.     // 初始化
  231.     function init() {
  232.       // 渲染播放列表
  233.       renderPlaylist();
  234.       
  235.       // 加载第一首歌曲并自动播放
  236.       loadSong(songs[currentSongIndex]);
  237.       
  238.       // 更新歌曲计数
  239.       songCount.textContent = songs.length;
  240.       
  241.       // 设置列表循环模式
  242.       setRepeatMode(repeatMode);
  243.       
  244.       // 事件监听
  245.       playBtn.addEventListener('click', togglePlayPause);
  246.       prevBtn.addEventListener('click', playPrevSong);
  247.       nextBtn.addEventListener('click', playNextSong);
  248.       shuffleBtn.addEventListener('click', toggleShuffle);
  249.       repeatBtn.addEventListener('click', toggleRepeat);
  250.       progressBar.addEventListener('click', setProgress);
  251.       audioPlayer.addEventListener('timeupdate', updateProgress);
  252.       audioPlayer.addEventListener('ended', handleSongEnd);
  253.       audioPlayer.addEventListener('loadedmetadata', displayDuration);
  254.       volumeSlider.addEventListener('input', adjustVolume);
  255.       muteBtn.addEventListener('click', toggleMute);
  256.       
  257.       // 尝试自动播放
  258.       attemptAutoPlay();
  259.     }
  260.    
  261.     // 尝试自动播放
  262.     function attemptAutoPlay() {
  263.       audioPlayer.play().catch(error => {
  264.         // 自动播放被阻止，提示用户点击播放
  265.         console.log('自动播放被阻止:', error);
  266.         playBtn.classList.add('animate-pulse');
  267.       });
  268.     }
  269.    
  270.     // 渲染播放列表
  271.     function renderPlaylist() {
  272.       playlistContainer.innerHTML = '';
  273.       
  274.       songs.forEach((song, index) => {
  275.         const songItem = document.createElement('div');
  276.         songItem.className = `song-item p-3 flex items-center justify-between border-b border-gray-800 ${index === currentSongIndex ? 'active' : ''}`;
  277.         songItem.innerHTML = `
  278.           <div class="flex items-center">
  279.             <div class="w-8 h-8 rounded overflow-hidden mr-3">
  280.               <img src="${song.cover}" alt="${song.title}专辑封面" class="w-full h-full object-cover">
  281.             </div>
  282.             <div>
  283.               <div class="font-medium">${song.title}</div>
  284.               <div class="text-xs text-gray-400">${song.artist} - ${song.album}</div>
  285.             </div>
  286.           </div>
  287.           <div class="text-gray-400">
  288.             ${index === currentSongIndex ? '<i class="fa fa-volume-up text-primary"></i>' : '<i class="fa fa-play-circle-o"></i>'}
  289.           </div>
  290.         `;
  291.         
  292.         songItem.addEventListener('click', () => {
  293.           if (index !== currentSongIndex) {
  294.             currentSongIndex = index;
  295.             loadSong(songs[currentSongIndex]);
  296.             renderPlaylist();
  297.           } else {
  298.             togglePlayPause();
  299.           }
  300.         });
  301.         
  302.         playlistContainer.appendChild(songItem);
  303.       });
  304.     }
  305.    
  306.     // 加载歌曲
  307.     function loadSong(song) {
  308.       audioPlayer.src = song.src;
  309.       songTitle.textContent = song.title;
  310.       songArtist.textContent = song.artist;
  311.       albumCover.src = song.cover;
  312.       albumCover.alt = `${song.title}专辑封面`;
  313.       
  314.       // 播放歌曲
  315.       if (isPlaying) {
  316.         audioPlayer.play();
  317.         albumCover.classList.add('play');
  318.         playBtn.innerHTML = '<i class="fa fa-pause text-xl ml-1"></i>';
  319.       }
  320.     }
  321.    
  322.     // 播放/暂停切换
  323.     function togglePlayPause() {
  324.       if (isPlaying) {
  325.         audioPlayer.pause();
  326.         playBtn.innerHTML = '<i class="fa fa-play text-xl ml-1"></i>';
  327.         albumCover.classList.remove('play');
  328.         playBtn.classList.remove('animate-pulse');
  329.       } else {
  330.         audioPlayer.play();
  331.         playBtn.innerHTML = '<i class="fa fa-pause text-xl ml-1"></i>';
  332.         albumCover.classList.add('play');
  333.         playBtn.classList.remove('animate-pulse');
  334.       }
  335.       isPlaying = !isPlaying;
  336.     }
  337.    
  338.     // 播放上一首
  339.     function playPrevSong() {
  340.       if (isShuffle) {
  341.         currentSongIndex = getRandomIndex();
  342.       } else {
  343.         currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length;
  344.       }
  345.       loadSong(songs[currentSongIndex]);
  346.       renderPlaylist();
  347.     }
  348.    
  349.     // 播放下一首
  350.     function playNextSong() {
  351.       if (isShuffle) {
  352.         currentSongIndex = getRandomIndex();
  353.       } else {
  354.         currentSongIndex = (currentSongIndex + 1) % songs.length;
  355.       }
  356.       loadSong(songs[currentSongIndex]);
  357.       renderPlaylist();
  358.     }
  359.    
  360.     // 随机播放索引
  361.     function getRandomIndex() {
  362.       let randomIndex;
  363.       do {
  364.         randomIndex = Math.floor(Math.random() * songs.length);
  365.       } while (randomIndex === currentSongIndex);
  366.       return randomIndex;
  367.     }
  368.    
  369.     // 切换随机播放
  370.     function toggleShuffle() {
  371.       isShuffle = !isShuffle;
  372.       shuffleBtn.classList.toggle('text-primary', isShuffle);
  373.       shuffleBtn.classList.toggle('text-gray-400', !isShuffle);
  374.     }
  375.    
  376.     // 切换循环模式
  377.     function toggleRepeat() {
  378.       repeatMode = (repeatMode + 1) % 3;
  379.       setRepeatMode(repeatMode);
  380.     }
  381.    
  382.     // 设置循环模式
  383.     function setRepeatMode(mode) {
  384.       repeatMode = mode;
  385.       
  386.       // 更新按钮样式和图标
  387.       if (repeatMode === 0) {
  388.         // 顺序播放
  389.         repeatBtn.innerHTML = '<i class="fa fa-repeat text-xl"></i>';
  390.         repeatBtn.classList.remove('text-primary');
  391.         repeatBtn.classList.add('text-gray-400');
  392.       } else if (repeatMode === 1) {
  393.         // 单曲循环
  394.         repeatBtn.innerHTML = '<i class="fa fa-repeat text-xl"></i>';
  395.         repeatBtn.classList.remove('text-gray-400');
  396.         repeatBtn.classList.add('text-primary');
  397.       } else {
  398.         // 列表循环
  399.         repeatBtn.innerHTML = '<i class="fa fa-repeat text-xl"></i><span class="absolute text-[8px]">1</span>';
  400.         repeatBtn.classList.remove('text-gray-400');
  401.         repeatBtn.classList.add('text-primary');
  402.       }
  403.     }
  404.    
  405.     // 设置进度条
  406.     function setProgress(e) {
  407.       const totalWidth = this.clientWidth;
  408.       const clickPosition = e.offsetX;
  409.       const duration = audioPlayer.duration;
  410.       
  411.       audioPlayer.currentTime = (clickPosition / totalWidth) * duration;
  412.     }
  413.    
  414.     // 更新进度条
  415.     function updateProgress() {
  416.       const { currentTime, duration } = audioPlayer;
  417.       const progressPercent = (currentTime / duration) * 100;
  418.       progress.style.width = `${progressPercent}%`;
  419.       
  420.       // 更新当前时间显示
  421.       currentTimeEl.textContent = formatTime(currentTime);
  422.     }
  423.    
  424.     // 显示歌曲时长
  425.     function displayDuration() {
  426.       durationEl.textContent = formatTime(audioPlayer.duration);
  427.     }
  428.    
  429.     // 格式化时间
  430.     function formatTime(seconds) {
  431.       if (isNaN(seconds)) return '0:00';
  432.       
  433.       const minutes = Math.floor(seconds / 60);
  434.       const remainingSeconds = Math.floor(seconds % 60);
  435.       
  436.       return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
  437.     }
  438.    
  439.     // 处理歌曲结束
  440.     function handleSongEnd() {
  441.       if (repeatMode === 1) {
  442.         // 单曲循环
  443.         audioPlayer.currentTime = 0;
  444.         audioPlayer.play();
  445.       } else if (repeatMode === 2 || isShuffle) {
  446.         // 列表循环或随机播放
  447.         playNextSong();
  448.       } else {
  449.         // 顺序播放
  450.         if (currentSongIndex < songs.length - 1) {
  451.           playNextSong();
  452.         } else {
  453.           // 播放列表结束，停止播放
  454.           isPlaying = false;
  455.           playBtn.innerHTML = '<i class="fa fa-play text-xl ml-1"></i>';
  456.           albumCover.classList.remove('play');
  457.         }
  458.       }
  459.     }
  460.    
  461.     // 调整音量
  462.     function adjustVolume() {
  463.       audioPlayer.volume = volumeSlider.value;
  464.       
  465.       // 更新音量图标
  466.       updateVolumeIcon();
  467.     }
  468.    
  469.     // 切换静音
  470.     function toggleMute() {
  471.       audioPlayer.muted = !audioPlayer.muted;
  472.       
  473.       // 更新音量图标和滑块
  474.       if (audioPlayer.muted) {
  475.         volumeSlider.value = 0;
  476.       } else {
  477.         volumeSlider.value = audioPlayer.volume;
  478.       }
  479.       
  480.       updateVolumeIcon();
  481.     }
  482.    
  483.     // 更新音量图标
  484.     function updateVolumeIcon() {
  485.       if (audioPlayer.muted || audioPlayer.volume === 0) {
  486.         muteBtn.innerHTML = '<i class="fa fa-volume-off"></i>';
  487.       } else if (audioPlayer.volume < 0.5) {
  488.         muteBtn.innerHTML = '<i class="fa fa-volume-down"></i>';
  489.       } else {
  490.         muteBtn.innerHTML = '<i class="fa fa-volume-up"></i>';
  491.       }
  492.     }
  493.    
  494.     // 初始化播放器
  495.     init();
  496.   </script>
  497. </body>
  498. </html>
  499.    
复制代码
作者: 绿蔷薇    时间: 2025-6-11 14:06
撒花花
问好楚帅
作者: 绿蔷薇    时间: 2025-6-11 14:07
这款网页播放器好漂亮
谢谢楚帅代码分享，给力哈
作者: 绿蔷薇    时间: 2025-6-11 14:08
音乐薇听不到呢~~
作者: 绿蔷薇    时间: 2025-6-11 14:08
换个时间段再来~~
作者: 圊圊淥詶    时间: 2025-6-11 20:07
哇哦，这个很牛啊，而且代码都贴出来了呀，
好漂亮哦这播放器，哈哈~~
作者: 圊圊淥詶    时间: 2025-6-11 20:08
请教云飞啊，如果我要做的话是不是只要在代码上换链接换文字就可以了？
如果是这样的话，等我有空了也去玩玩，
这个播放器好看的~~
作者: 圊圊淥詶    时间: 2025-6-11 20:09
谢谢云飞啊，辛苦了，做这个应该很费功夫吧
作者: 圊圊淥詶    时间: 2025-6-11 20:10
绿蔷薇 发表于 2025-6-11 14:08
音乐薇听不到呢~~

很难得哇，我这次能听到诶
作者: 圊圊淥詶    时间: 2025-6-11 20:13
绿蔷薇 发表于 2025-6-11 14:08
换个时间段再来~~

360极速、2345、FLASH浏览器都试了一下，全部正常
作者: 楚云飞    时间: 2025-6-11 20:26
绿蔷薇 发表于 2025-6-11 14:08
换个时间段再来~~

估计是薇薇嫩网速问题吧，实在不行，手动点击试听一下看看？
作者: 玫の玫    时间: 2025-6-12 11:54
播放器制作漂亮，想听哪个点哪个！
作者: 玫の玫    时间: 2025-6-12 11:58
这款网页播放器这么多代码，感觉制作起来很辛苦滴
作者: 绿蔷薇    时间: 2025-6-15 14:12
圊圊淥詶 发表于 2025-6-11 20:13
360极速、2345、FLASH浏览器都试了一下，全部正常

我只有360浏览器
作者: 绿蔷薇    时间: 2025-6-15 14:15
楚云飞 发表于 2025-6-11 20:26
估计是薇薇嫩网速问题吧，实在不行，手动点击试听一下看看？

是网速原因
最近家里的宽带不给力
还是光速呢，骗人的
作者: 欧阳风刀    时间: 2025-6-15 21:25
这网页播放器很是强悍啊，代码分享给力！
作者: 欧阳风刀    时间: 2025-6-15 21:26
感谢哥们无私分享！



欢迎光临 云荷-个人作品展示 (http://www.yhyhlt.com/) Powered by Discuz! X3.2