我们的悬浮音乐播放器拥有丰富功能，同时保持了极简的嵌入方式
自动从音乐库中随机选择歌曲播放，每次访问都能带来新鲜体验
固定在页面角落，不影响网站内容浏览，随时可以展开或收起
只需复制一段代码，粘贴到你的网站HTML中，无需任何编程知识
完美适配各种设备屏幕，在手机、平板和电脑上都有出色表现
用户可以根据自己的喜好调节音量，或随时暂停音乐播放
专辑封面旋转效果和流畅过渡动画，提升用户视觉体验
体验播放器的实际效果，点击下方按钮展开完整控制面板
网站预览
播放器会固定在页面左下角，不影响网站内容的浏览。点击圆形按钮可以展开或收起控制面板：
无需专业知识，只需简单复制粘贴，即可为你的网站添加音乐播放器
在下方代码区域，点击"复制代码"按钮，将完整代码复制到剪贴板。
代码包含播放器的所有功能和样式，无需额外文件
打开你网站的HTML文件，将复制的代码粘贴到</body>标签之前的任意位置。
适用于任何HTML网站，包括WordPress、Blogger、Drupal等
保存文件并上传到你的服务器，访问网站即可看到左下角的音乐播放器。
无需额外配置，播放器会自动随机播放音乐
将完整代码复制到你的网站，即可拥有悬浮音乐播放器功能
<!-- 增强版左侧悬浮音乐播放器 -->
<div id="music-floating-player" style="position:fixed;bottom:30px;left:30px;z-index:9999;transition:all 0.3s ease;">
<!-- 播放器控制按钮 - 旋转专辑封面设计 -->
<div id="player-toggle" style="width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-center;box-shadow:0 4px 15px rgba(79, 70, 229, 0.4);cursor:pointer;transition:all 0.3s ease;overflow:hidden;border:3px solid #4F46E5;">
<div id="toggle-cover" style="width:100%;height:100%;position:relative;animation: spin 20s linear infinite;">
<img src="https://picsum.photos/200/200?random=1" alt="当前播放专辑封面" style="width:100%;height:100%;object-cover;">
<div id="toggle-overlay" style="position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3);display:flex;align-items:center;justify-center;">
<i class="fa fa-play" style="color:white;font-size:24px;margin-left:3px;"></i>
</div>
</div>
</div>
<!-- 播放器面板 - 优化布局 -->
<div id="player-panel" style="display:none;position:absolute;bottom:0;left:74px;width:340px;background:white;border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,0.15);padding:20px 20px 15px;transform-origin:left bottom;transform:scale(0.9);opacity:0;transition:all 0.3s ease;">
<!-- 伸缩控制按钮和标题区域 -->
<div class="flex justify-between items-start mb-4">
<div style="margin-top:40px;"> <!-- 增加顶部间距避免被专辑封面遮挡 -->
<div style="margin-bottom:5px;color:#1E293B;font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" id="current-song">加载中...</div>
<div style="color:#64748B;font-size:13px;" id="current-artist"></div>
</div>
<div id="minimize-btn" style="width:32px;height:32px;border-radius:50%;background:#F1F5F9;display:flex;align-items:center;justify-center;cursor:pointer;transition:all 0.2s ease;">
<i class="fa fa-chevron-left" style="color:#64748B;font-size:16px;"></i>
</div>
</div>
<!-- 专辑封面区域 - 调整位置避免遮挡 -->
<div style="position:absolute;left:20px;top:-30px;width:70px;height:70px;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,0.15);border:3px solid white;">
<img id="album-cover" src="https://picsum.photos/200/200?random=1" alt="专辑封面" style="width:100%;height:100%;object-cover;">
<div id="cover-placeholder" style="display:none;position:absolute;top:0;left:0;width:100%;height:100%;background:#F1F5F9;align-items:center;justify-content:center;">
<i class="fa fa-music" style="color:#4F46E5;font-size:24px;"></i>
</div>
</div>
<!-- 进度信息 -->
<div style="margin-bottom:12px;color:#94A3B8;font-size:12px;display:flex;justify-between;">
<span id="current-time">00:00</span>
<span id="total-time">00:00</span>
</div>
<!-- 音频播放器 - 美化样式 -->
<audio id="audio-player" controls style="width:100%;background:#F1F5F9;border-radius:8px;padding:5px;color:#4F46E5;outline:none;">
您的浏览器不支持音频播放
</audio>
<!-- 播放控制按钮 - 增强可见性 -->
<div style="display:flex;justify:center;gap:22px;margin-top:15px;">
<div id="prev-btn" style="width:42px;height:42px;border-radius:50%;background:#F1F5F9;display:flex;align-items:center;justify-center;cursor:pointer;transition:all 0.2s ease;">
<i class="fa fa-step-backward" style="color:#4F46E5;font-size:20px;"></i>
</div>
<div id="play-btn" style="width:52px;height:52px;border-radius:50%;background:#4F46E5;display:flex;align-items:center;justify-center;cursor:pointer;box-shadow:0 4px 12px rgba(79, 70, 229, 0.3);transition:all 0.2s ease;">
<i class="fa fa-play" style="color:white;font-size:22px;margin-left:2px;"></i>
</div>
<div id="next-btn" style="width:42px;height:42px;border-radius:50%;background:#F1F5F9;display:flex;align-items:center;justify-center;cursor:pointer;transition:all 0.2s ease;">
<i class="fa fa-step-forward" style="color:#4F46E5;font-size:20px;"></i>
</div>
</div>
</div>
</div>
<style>
/* 旋转动画 */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 播放状态旋转，暂停时停止 */
.playing {
animation-play-state: running !important;
}
.paused {
animation-play-state: paused !important;
}
</style>
<script>
// 音乐数据和播放器功能
document.addEventListener('DOMContentLoaded', function() {
// 音乐API地址和代理
const MUSIC_API_URL = 'http://www.songjiale.com/%E9%9F%B3%E4%B9%90/gx/musics.json';
const PROXY_URLS = [
'https://api.allorigins.win/get?url=',
'https://corsproxy.io/?',
'https://proxy.cors.sh/'
];
// 备用音乐数据
const FALLBACK_MUSIC = [
{"name":"擦皮鞋-dj洋洋","artist":"宋佳乐博客","mp3_url":"http:\/\/www.songjiale.com\/%E9%9F%B3%E4%B9%90\/%E6%93%A6%E7%9A%AE%E9%9E%8B-dj%E6%B4%8B%E6%B4%8B-%E5%AE%8B%E4%BD%B3%E4%B9%90%E5%8D%9A%E5%AE%A2.mp3","cover_url":"http:\/\/www.songjiale.com\/音乐\/DJ洋洋.png","id":"68c670f050edd","created_at":1757835504},
{"name":"飞向别人的床","artist":"CK","mp3_url":"http:\/\/www.songjiale.com\/%E9%9F%B3%E4%B9%90\/飞向别人的床.mp3","cover_url":"http:\/\/www.songjiale.com\/%E9%9F%B3%E4%B9%90\/飞向别人的床专辑图.png","id":"68c67177ae2c9","created_at":1757835639},
{"name":"为什么要努力","artist":"宋佳乐","mp3_url":"http:\/\/www.songjiale.com\/%E9%9F%B3%E4%B9%90\/为什么要努力.mp3","cover_url":"https:\/\/img.vinua.cn\/images\/684fe48796174.png","id":"68c671dae39c3","created_at":1757835738}
];
// 默认专辑封面 - 当图片加载失败时使用
const DEFAULT_COVERS = [
"https://picsum.photos/200/200?random=1",
"https://picsum.photos/200/200?random=2",
"https://picsum.photos/200/200?random=3",
"https://picsum.photos/200/200?random=4"
];
let musicList = [];
let currentIndex = 0;
let isPlaying = false;
let isLoading = false; // 防止重复加载
// 获取DOM元素
const audioPlayer = document.getElementById('audio-player');
const playerToggle = document.getElementById('player-toggle');
const playerPanel = document.getElementById('player-panel');
const currentSong = document.getElementById('current-song');
const currentArtist = document.getElementById('current-artist');
const minimizeBtn = document.getElementById('minimize-btn');
const playBtn = document.getElementById('play-btn');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const currentTimeEl = document.getElementById('current-time');
const totalTimeEl = document.getElementById('total-time');
const albumCover = document.getElementById('album-cover');
const coverPlaceholder = document.getElementById('cover-placeholder');
const toggleIcon = playerToggle.querySelector('i');
const toggleCover = document.getElementById('toggle-cover');
const toggleCoverImg = toggleCover.querySelector('img');
// 切换播放器显示/隐藏
playerToggle.addEventListener('click', togglePlayerPanel);
minimizeBtn.addEventListener('click', togglePlayerPanel);
// 播放/暂停控制
playBtn.addEventListener('click', togglePlayback);
// 上一首/下一首控制
prevBtn.addEventListener('click', playPrevious);
nextBtn.addEventListener('click', playNext);
// 音频时间更新
audioPlayer.addEventListener('timeupdate', updateTimeDisplay);
// 音频错误处理 - 自动跳过失败的歌曲
audioPlayer.addEventListener('error', function() {
console.log('音频播放错误，尝试下一首');
currentSong.textContent = '播放失败，尝试下一首...';
setTimeout(playNext, 1500);
});
// 专辑封面加载失败处理
albumCover.addEventListener('error', function() {
handleCoverError(this);
});
toggleCoverImg.addEventListener('error', function() {
handleCoverError(this);
});
// 专辑封面加载成功处理
albumCover.addEventListener('load', function() {
coverPlaceholder.style.display = 'none';
});
// 处理封面加载错误
function handleCoverError(imgElement) {
const randomDefault = DEFAULT_COVERS[Math.floor(Math.random() * DEFAULT_COVERS.length)];
imgElement.src = randomDefault;
// 如果是专辑封面，显示占位符
if (imgElement === albumCover) {
coverPlaceholder.style.display = 'flex';
}
}
// 格式化时间（秒 -> MM:SS）
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
}
// 更新时间显示
function updateTimeDisplay() {
currentTimeEl.textContent = formatTime(audioPlayer.currentTime);
totalTimeEl.textContent = formatTime(audioPlayer.duration || 0);
}
// 切换播放器面板显示状态
function togglePlayerPanel() {
if (playerPanel.style.display === 'none' || playerPanel.style.display === '') {
playerPanel.style.display = 'block';
// 更改主按钮图标为暂停
toggleIcon.className = 'fa fa-pause';
toggleIcon.style.marginLeft = '0';
// 触发动画
setTimeout(() => {
playerPanel.style.transform = 'scale(1)';
playerPanel.style.opacity = '1';
}, 10);
} else {
playerPanel.style.transform = 'scale(0.9)';
playerPanel.style.opacity = '0';
// 更改主按钮图标为播放
toggleIcon.className = 'fa fa-play';
toggleIcon.style.marginLeft = '3px';
// 延迟隐藏以完成动画
setTimeout(() => {
playerPanel.style.display = 'none';
}, 300);
}
}
// 切换播放/暂停状态
function togglePlayback() {
if (audioPlayer.paused) {
audioPlayer.play().then(() => {
isPlaying = true;
playBtn.innerHTML = '<i class="fa fa-pause" style="color:white;font-size:22px;"></i>';
toggleIcon.className = 'fa fa-pause';
toggleIcon.style.marginLeft = '0';
toggleCover.classList.add('playing');
toggleCover.classList.remove('paused');
}).catch(e => {
console.log('播放需要用户交互:', e);
currentSong.textContent = '请点击播放按钮开始';
});
} else {
audioPlayer.pause();
isPlaying = false;
playBtn.innerHTML = '<i class="fa fa-play" style="color:white;font-size:22px;margin-left:2px;"></i>';
toggleIcon.className = 'fa fa-play';
toggleIcon.style.marginLeft = '3px';
toggleCover.classList.remove('playing');
toggleCover.classList.add('paused');
}
}
// 播放上一首
function playPrevious() {
if (isLoading) return;
currentIndex = (currentIndex - 1 + musicList.length) % musicList.length;
playMusic(currentIndex);
}
// 播放下一首
function playNext() {
if (isLoading) return;
currentIndex = (currentIndex + 1) % musicList.length;
playMusic(currentIndex);
}
// 获取音乐列表 - 尝试多个代理以提高成功率
async function fetchMusicList() {
try {
// 先尝试直接请求
let response = await fetch(MUSIC_API_URL);
if (response.ok) {
musicList = await response.json();
playRandomMusic();
return;
}
} catch (error) {
console.log('直接请求失败，尝试使用代理...');
}
// 尝试使用多个代理
for (const proxy of PROXY_URLS) {
try {
const proxyUrl = proxy + encodeURIComponent(MUSIC_API_URL);
const response = await fetch(proxyUrl);
if (!response.ok) continue;
let data = await response.json();
// 不同代理返回的数据结构可能不同
if (proxy.includes('allorigins')) {
musicList = JSON.parse(data.contents);
} else if (proxy.includes('corsproxy')) {
musicList = data;
} else if (proxy.includes('cors.sh')) {
musicList = await response.json();
}
if (musicList && musicList.length > 0) {
playRandomMusic();
return;
}
} catch (proxyError) {
console.log(`使用${proxy}代理失败:`, proxyError);
continue;
}
}
// 所有方法都失败时使用备用数据
console.log('所有方法都失败，使用备用音乐数据');
musicList = FALLBACK_MUSIC;
playRandomMusic();
}
// 随机播放一首音乐
function playRandomMusic() {
if (!musicList.length) {
currentSong.textContent = '无可用音乐';
return;
}
// 随机选择一首音乐
currentIndex = Math.floor(Math.random() * musicList.length);
playMusic(currentIndex);
}
// 播放指定索引的音乐
function playMusic(index) {
if (!musicList.length) {
currentSong.textContent = '无可用音乐';
return;
}
isLoading = true;
currentSong.textContent = '加载中...';
currentIndex = index;
const music = musicList[currentIndex];
// 更新UI
currentSong.textContent = music.name || '未知歌曲';
currentArtist.textContent = music.artist || '未知艺术家';
// 处理专辑封面
if (music.cover_url) {
albumCover.src = music.cover_url;
toggleCoverImg.src = music.cover_url;
coverPlaceholder.style.display = 'none';
} else {
// 使用默认封面
const randomDefault = DEFAULT_COVERS[Math.floor(Math.random() * DEFAULT_COVERS.length)];
albumCover.src = randomDefault;
toggleCoverImg.src = randomDefault;
}
// 设置音频源并尝试播放
audioPlayer.src = music.mp3_url;
// 监听音频可播放事件
const handleCanPlay = function() {
audioPlayer.play().then(() => {
isPlaying = true;
playBtn.innerHTML = '<i class="fa fa-pause" style="color:white;font-size:22px;"></i>';
toggleIcon.className = 'fa fa-pause';
toggleIcon.style.marginLeft = '0';
toggleCover.classList.add('playing');
toggleCover.classList.remove('paused');
}).catch(e => {
console.log('播放需要用户交互:', e);
isPlaying = false;
playBtn.innerHTML = '<i class="fa fa-play" style="color:white;font-size:22px;margin-left:2px;"></i>';
});
isLoading = false;
audioPlayer.removeEventListener('canplay', handleCanPlay);
};
audioPlayer.addEventListener('canplay', handleCanPlay);
// 监听音频错误
const handleError = function() {
console.log(`播放失败，尝试下一首: ${music.name}`);
isLoading = false;
audioPlayer.removeEventListener('error', handleError);
audioPlayer.removeEventListener('canplay', handleCanPlay);
playNext();
};
audioPlayer.addEventListener('error', handleError);
}
// 自动播放下一首
audioPlayer.addEventListener('ended', playNext);
// 按钮悬停效果
const interactiveElements = [playerToggle, minimizeBtn, playBtn, prevBtn, nextBtn];
interactiveElements.forEach(el => {
el.addEventListener('mouseenter', function() {
this.style.transform = 'scale(1.1)';
});
el.addEventListener('mouseleave', function() {
this.style.transform = 'scale(1)';
});
});
// 初始加载音乐列表
fetchMusicList();
});
</script>关于悬浮音乐播放器的常见问题解答
不会显著影响。播放器代码体积小，并且采用了延迟加载技术，只会在需要时加载音乐资源，不会影响你网站的初始加载速度。
可以。你可以通过修改代码中的CSS样式来自定义播放器的颜色、大小和位置。例如，修改position属性可以改变播放器在页面中的位置。
支持所有现代浏览器，包括Chrome、Firefox、Safari、Edge等。对于较旧的浏览器（如IE），可能存在部分功能限制。
可以。你可以修改代码中的FALLBACK_MUSIC数组，替换为你自己的音乐链接和信息，播放器会优先播放你添加的音乐。