Argon 主题原生级悬浮音乐播放器｜极简页尾脚本

本文最后更新于51 天前，其中的信息可能已经过时，如有错误请留言告知

前言

为 Argon 主题编写的纯页尾注入式悬浮音乐播放器，不修改主题源码、不破坏原有布局，视觉风格与原生按钮完全统一，实现沉浸式博客音乐体验。

核心特性

✔ 纯页尾脚本，无侵入、不影响主题原有功能
✔ 视觉原生融合，与返回顶部、深色模式按钮风格统一
✔ 智能交互：默认仅显示播放按钮，鼠标悬浮展开控制面板
✔ 支持 播放 / 暂停、上一曲、下一曲
✔ 支持 歌曲自动循环播放
✔ 悬浮显示 当前播放曲目名称
✔ 悬浮显示 白色播放进度条，可点击跳转
✔ 完美适配暗色模式
✔ 轻量无冗余，仅依赖 Font Awesome 图标

完整使用代码

使用方式：WordPress 后台 → Argon 主题选项 → 自定义页脚脚本 → 粘贴以下代码

<script>
// 等待页面DOM完全加载完成后执行音乐播放器逻辑
document.addEventListener("DOMContentLoaded", function() {
    try {
        // 音乐播放列表：可自行修改歌曲名称和歌曲链接
        const playlist = [
            { name: "歌曲1", url: "https://example.com/music1.mp3" },
            { name: "歌曲2", url: "https://example.com/music2.mp3" },
            { name: "歌曲3", url: "https://example.com/music3.mp3" },
        ];

        // 当前播放歌曲的索引
        let currentIndex = 0;
        // 创建全局音频对象，方便外部函数调用
        window.bgMusic = new Audio();
        // 关闭单曲循环
        window.bgMusic.loop = false;
        // 将播放列表挂载到全局
        window.playlist = playlist;

        /**
         * 加载指定索引的歌曲
         * @param {number} index - 要加载的歌曲索引
         */
        function loadSong(index) {
            // 计算有效索引（支持循环播放，防止越界）
            currentIndex = (index + playlist.length) % playlist.length;
            // 获取当前要播放的歌曲对象
            const song = playlist[currentIndex];
            // 设置音频播放地址
            window.bgMusic.src = song.url;
            // 更新页面显示的当前歌曲名
            document.getElementById('current-song-name').textContent = song.name;
            // 重置进度条为0
            document.getElementById('progress-bar').style.width = '0%';
        }

        // 监听歌曲播放结束事件：自动播放下一首
        window.bgMusic.addEventListener('ended', () => {
            loadSong(currentIndex + 1);
            window.bgMusic.play();
        });

        // 监听播放时间更新事件：实时更新进度条
        window.bgMusic.addEventListener('timeupdate', () => {
            // 音频总时长无效时直接返回
            if (isNaN(window.bgMusic.duration)) return;
            // 计算播放进度百分比
            const percent = (window.bgMusic.currentTime / window.bgMusic.duration) * 100;
            // 设置进度条宽度
            document.getElementById('progress-bar').style.width = percent + '%';
        });

        // 进度条点击事件：点击跳转到对应播放位置
        document.getElementById('progress-container').addEventListener('click', (e) => {
            // 获取进度条容器的位置信息
            const rect = e.currentTarget.getBoundingClientRect();
            // 计算点击位置占总进度条的比例
            const percent = (e.clientX - rect.left) / rect.width;
            // 设置音频播放时间
            window.bgMusic.currentTime = percent * window.bgMusic.duration;
        });

        // 将加载歌曲方法暴露到全局，供按钮调用
        window.loadSong = loadSong;
        // 将获取当前索引方法暴露到全局
        window.getCurrentIndex = () => currentIndex;
        // 初始化加载第一首歌
        loadSong(0);
    } catch (e) {
        // 捕获异常，避免报错影响页面其他功能
    }
});

/**
 * 切换播放/暂停状态
 */
function toggleMusic() {
    // 音频对象未初始化时直接返回
    if (!window.bgMusic) return;
    if (window.bgMusic.paused) {
        // 暂停状态 → 播放
        window.bgMusic.play().catch(err => {});
        // 切换图标为暂停
        document.getElementById('music-play-icon').classList.remove('fa-play');
        document.getElementById('music-play-icon').classList.add('fa-pause');
    } else {
        // 播放状态 → 暂停
        window.bgMusic.pause();
        // 切换图标为播放
        document.getElementById('music-play-icon').classList.remove('fa-pause');
        document.getElementById('music-play-icon').classList.add('fa-play');
    }
}

/**
 * 播放上一首
 */
function prevMusic() {
    if (!window.bgMusic) return;
    // 加载上一首（索引-1）
    window.loadSong(window.getCurrentIndex() - 1);
    // 自动播放
    window.bgMusic.play();
    // 更新图标为暂停状态
    document.getElementById('music-play-icon').classList.remove('fa-play');
    document.getElementById('music-play-icon').classList.add('fa-pause');
}

/**
 * 播放下一首
 */
function nextMusic() {
    if (!window.bgMusic) return;
    // 加载下一首（索引+1）
    window.loadSong(window.getCurrentIndex() + 1);
    // 自动播放
    window.bgMusic.play();
    // 更新图标为暂停状态
    document.getElementById('music-play-icon').classList.remove('fa-play');
    document.getElementById('music-play-icon').classList.add('fa-pause');
}
</script>

<!-- 引入图标库 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
/* 音乐控制器整体容器：固定在右下角 */
.music-controls {
  position: fixed;
  right: 20px;
  bottom: 80px;
  z-index: 9999; /* 确保在最上层 */
  display: flex;
  flex-direction: column;
  gap: 8px; /* 按钮间距 */
  align-items: flex-end;
}

/* 主播放按钮样式 */
.music-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #4a5568;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 主按钮 hover 效果 */
.music-btn:hover {
  background: #374151;
  color: #94a3b8;
}

/* 上一曲/下一曲 侧边按钮（默认隐藏） */
.music-side-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #4a5568;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
  opacity: 0; /* 默认隐藏 */
  transform: translateX(10px); /* 位移隐藏 */
  pointer-events: none; /* 禁止点击 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 鼠标悬浮时显示侧边按钮 */
.music-controls:hover .music-side-btn {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto; /* 恢复点击 */
}

/* 歌曲名称提示框 */
.song-name-tooltip {
  background: #4a5568;
  color: #f1f5f9;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  transition: 0.3s;
  transform: translateX(10px);
  pointer-events: none;
}

/* 悬浮显示歌曲名 */
.music-controls:hover .song-name-tooltip {
  opacity: 1;
  transform: translateX(0);
}

/* 进度条容器 */
.progress-container {
  width: 120px;
  height: 4px;
  background: #6b7280;
  border-radius: 2px;
  cursor: pointer;
  opacity: 0;
  transition: 0.3s;
  transform: translateX(10px);
  pointer-events: none;
}

/* 悬浮显示进度条 */
.music-controls:hover .progress-container {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* 进度条已播放部分 */
#progress-bar {
  height: 100%;
  background: #ffffff;
  border-radius: 2px;
  width: 0%;
  transition: width 0.1s linear; /* 流畅动画 */
}
</style>

<!-- 音乐播放器HTML结构 -->
<div class="music-controls">
  <!-- 显示当前播放歌曲名 -->
  <div class="song-name-tooltip" id="current-song-name">加载中...</div>
  <!-- 播放进度条 -->
  <div class="progress-container" id="progress-container">
    <div id="progress-bar"></div>
  </div>
  <!-- 上一曲按钮 -->
  <button class="music-side-btn" onclick="prevMusic()"><i class="fa-solid fa-backward"></i></button>
  <!-- 播放/暂停按钮 -->
  <button class="music-btn" onclick="toggleMusic()"><i id="music-play-icon" class="fa-solid fa-play"></i></button>
  <!-- 下一曲按钮 -->
  <button class="music-side-btn" onclick="nextMusic()"><i class="fa-solid fa-forward"></i></button>
</div>

使用说明

登录 WordPress 后台
进入 Argon 主题选项
找到 自定义页脚脚本 输入框
粘贴上方完整代码并保存
刷新页面，右下角即可看到音乐播放器

自定义说明

修改歌曲：替换 playlist 数组内的歌曲名称与播放链接即可
调整位置：修改 .music-controls 中的 bottom: 80px 数值
调整样式：直接修改 CSS 色值与尺寸参数
进度条长度：修改 .progress-container { width: 120px }

设计理念

最小侵入：仅通过页脚脚本注入，不改动主题核心文件
原生融合：配色、尺寸、交互完全对齐 Argon 原生按钮
简洁优雅：非活跃状态隐藏控制元素，不干扰阅读体验
稳定可靠：异常捕获处理，不影响网站正常运行

前言

核心特性

完整使用代码

使用说明

自定义说明

设计理念

发送评论 编辑评论

推荐文章

发送评论编辑评论