VanBlog如何使用客制化播放音乐？

你可以通过以下步骤在博客首页上添加音乐播放器并设置控件为悬浮播放按钮。以下代码分别放入你博客的自定义 CSS、自定义 Script、自定义 HTML (body) 中。

0. 前置资源准备

你可以使用 ffmpeg 通过调整音频比特率来缩小音乐文件的大小。以下是一些常见的 ffmpeg 命令，用于缩小音频文件的大小。

1. 安装 `ffmpeg`（如果尚未安装）

在使用前，确保你已经安装了 ffmpeg。可以通过以下方式安装：

macOS: 使用 Homebrew 安装：
```
bash
brew install ffmpeg
```

Ubuntu/Linux: 使用 apt 安装：

bash
sudo apt update
sudo apt install ffmpeg

Windows: 从 FFmpeg 官网下载预编译的可执行文件。

2. 使用 `ffmpeg` 缩小音频文件

通过调整比特率缩小音频大小

你可以通过降低比特率来缩小文件大小。以下命令将比特率调整为 128kbps 来压缩音频文件。

bash
ffmpeg -i input.mp3 -b:a 128k output.mp3

-i input.mp3: 输入的音乐文件路径。
-b:a 128k: 将音频比特率设置为 128 kbps。
output.mp3: 输出文件路径。

转换成更高压缩率的音频格式

你也可以将音频文件转换为更高压缩率的格式，如 aac 或 opus，以进一步缩小文件大小。例如，将文件转换为 AAC 格式：

bash
ffmpeg -i input.mp3 -c:a aac -b:a 96k output.aac

调整采样率

降低采样率也能进一步压缩音频文件。比如将采样率降到 22050 Hz：

bash
ffmpeg -i input.mp3 -ar 22050 output.mp3

-ar 22050: 将采样率调整为 22050 Hz。

3. 压缩并保留音质的常用命令

为了更好地平衡文件大小和音质，以下命令可以将音频文件比特率调整到 96kbps，并转换为 aac 格式：

bash
ffmpeg -i input.mp3 -c:a aac -b:a 96k -ar 44100 output.aac

这个命令会压缩文件大小，同时尽量保留音质，常用于手机或网页背景音乐等场景。

你可以根据文件大小和音质的平衡来调整比特率，通常建议在 96kbps 至 192kbps 之间进行选择。

然后在static中新建目录music，将音乐文件放进去，比如我放了2首：

1. 自定义 CSS

添加以下 CSS 代码，设置音乐控件的样式，使其悬浮在网页右边的中央：

css
#music-player-container {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

#play-pause-btn {
    cursor: pointer;
    font-size: 24px;
    background: none;
    border: none;
    outline: none;
    color: #333;
}

#play-pause-btn:hover {
    color: #000;
}

如图所示：

2. 自定义 Script

添加以下 JavaScript 代码，实现音乐的顺序播放功能，并设置播放和暂停的按钮行为。需要根据你音乐名字改一下代码里的音乐文件都有哪些。

javascript
document.addEventListener("DOMContentLoaded", function () {
    const musicFiles = [
        '/static/music/output.mp3',
        '/static/music/output2.mp3'
    ];

    let currentTrack = 0;
    const audio = new Audio(musicFiles[currentTrack]);
    let isPlaying = false;

    const playPauseButton = document.getElementById("play-pause-btn");

    function playMusic() {
        audio.play();
        isPlaying = true;
        playPauseButton.textContent = '⏸️'; // Pause icon
    }

    function pauseMusic() {
        audio.pause();
        isPlaying = false;
        playPauseButton.textContent = '▶️'; // Play icon
    }

    playPauseButton.addEventListener("click", function () {
        if (isPlaying) {
            pauseMusic();
        } else {
            playMusic();
        }
    });

    // When the current track ends, move to the next track
    audio.addEventListener("ended", function () {
        currentTrack = (currentTrack + 1) % musicFiles.length;
        audio.src = musicFiles[currentTrack];
        if (isPlaying) {
            playMusic();
        }
    });
});

如图所示：

3. 自定义 HTML (body)

在 body 部分添加如下 HTML 代码来放置播放/暂停按钮：

html
<div id="music-player-container">
    <button id="play-pause-btn">▶️</button>
</div>

如图所示：

4. 自定义 HTML (head)

一般不需要特别的 <head> 配置，除非你需要加载外部资源。在此情况下无需额外内容。

这样设置完成后，音乐控件会在你博客首页的右侧中央悬浮，点击按钮后，歌曲会按照顺序播放并支持暂停，默认情况下音乐是暂停的。

5. 测试

这样就有一个控件跟随网页了，如下图所示。音乐文件小一点比较好，不然拉音乐资源也耗时间。但切换网页音乐就停了，不是很懂前端如何保存这类资源的调用维绪，欢迎评论指出~

目录

0. 前置资源准备

1. 安装 ffmpeg（如果尚未安装）

2. 使用 ffmpeg 缩小音频文件

通过调整比特率缩小音频大小

转换成更高压缩率的音频格式

调整采样率

3. 压缩并保留音质的常用命令

1. 自定义 CSS

2. 自定义 Script

3. 自定义 HTML (body)

4. 自定义 HTML (head)

5. 测试

1. 安装 `ffmpeg`（如果尚未安装）

2. 使用 `ffmpeg` 缩小音频文件