Rui - 爬取指定视频的背景音乐

爬取 B 站视频的背景音乐

前几天在 B 站一个音乐 up 主的视频中听到了一首非常喜欢的歌曲。歌曲名为 Intro + A Moment Apart，这首歌曲也是游戏 极限竞速：地平线4（Forza Horizon 4） 中电台的收录曲。我在网上搜索许久却没有找到，最后发现这首歌其实是同一张专辑 A Moment Apart (Deluxe Edition) 中的两首歌曲 Intro 和 A Moment Apart 的拼接，并且拼接处做得十分平滑、巧妙。不得不说，这一处理使得拼接之后的歌曲比原曲更有吸引力。但是如何下载呢？我立刻想到了爬虫。

首先导入相关库：

Code

import requests
import json
import re

设置好请求头 headers 和想要爬取的网页的 URL：

Code

headers = {
    'Referer': 'https://www.bilibili.com/',
    'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36'
}

url = 'https://www.bilibili.com/video/BV12g4y137UA/?spm_id_from=333.880.my_history.page.click&vd_source=f9f3226ec290b0512a03337b4cb90df3'
response = requests.get(url, headers).text
pattern = '<script>window\.__playinfo__=(.*?)</script>' #提取音频url
list_ = re.findall(pattern, response, re.S)
list_json = json.loads(list_[0])
volume_url = list_json['data']['dash']['audio'][0]['baseUrl']
print(volume_url)

IndexError: list index out of range

不能再按照之前的办法使用 Ctrl+Shift+C 通过鼠标来寻找我们想要的信息了。因为页面上一般只有歌曲的名字、封面、时长等信息，并没有下载信息或者说歌曲实体。需要首先点击 Elements ，按下 Ctrl+F 打开查找，在底部的搜索框输入playinfo 进行查找。

定位到信息位置后，需要使用正则表达式将信息提取出来。这也是开头导入 re 库的原因。

Code

audio = requests.get(url=volume_url, headers=headers).content
PATH = r'F:\RuiBlog\posts\Python\爬取指定视频的背景音乐\Intro+AMomentApart.mp3'
with open(PATH, 'wb') as f:
    f.write(audio)
    print('下载完成')

下载完成

将音乐插入个人博客

我并不懂前端的知识，于是向 ChatGPT 求助。以下内容是 ChatGPT 提供的方法加上本人试错后的改进。

进入 blog 文件夹可以看到有一个 _site 子文件夹，在子文件夹中可以看到 index.html，这个文件就是个人 blog 的主界面。在同一目录下新建一个 txt 文件，在其中输入：

function createAudioPlayer(src) {
  var audio = new Audio();
  audio.src = 'Intro+AMomentApart.mp3';
  audio.controls = true;
  audio.autoplay = false;
  audio.addEventListener('error', function() {
    alert('Error loading audio file.');
  });
  return audio;
}

以上是一小段 JavaScript 代码，可以构建一个极简的音频播放器。其中 audio.src 为音乐文件的相对路径，audio.autoplay 设置为 false 以禁止自动播放，audio.addEventListener 用于设置音频播放器加载失败后该显示什么内容。保存后将这个文件重命名为 audio.js，注意文件后缀改为 .js。再将下载好的音乐文件放置在同一目录中，回到 blog 根目录找到 index.qmd 使用 RStudio 打开，在想要插入音频播放器的位置插入 html 代码块（如下图所示），最后 render 一下就可以了。

<script src="audio.js"></script>
<script>
  var audioContainer = document.getElementById('audio-container');
  var audio = createAudioPlayer('Intro+AMomentApart.mp3');
  audioContainer.appendChild(audio);
</script>

下面一起欣赏歌曲吧！

Code

import IPython
IPython.display.Audio('Intro+AMomentApart.mp3')