PiliPala 音乐（噼里啪啦）

一款基于 WebView 的 iOS / Android 双平台第三方音乐播放客户端，采用 Hybrid 应用架构，以"听音乐"为核心场景重新组织 bilibili 内容。桌面显示名为噼里啪啦。

本应用为非官方第三方工具，仅用于个人学习与技术交流，与哔哩哔哩(bilibili)官方无任何关联。所有内容版权均归 bilibili 及原作者所有。

🌐 应用介绍站：pilipala.1n34.top 👤 作者：1n34 ✉️ 联系方式：user_1n34@yeah.net

功能特点

• 发行商聚合：预设万代南梦宫、索尼音乐、环球音乐、华纳音乐、Avex、波丽佳音等主流音乐发行商，支持自定义添加
• 音乐版块：从发行商投稿中过滤音乐分区内容，自动获取封面、时长、播放量等信息
• 单页加载 + 继续加载：发行商投稿与搜索结果均为单页加载，列表底部提供「继续加载」按钮按需翻页，告别一次性拉取大量数据带来的卡顿
• 后台播放：通过隐藏 WebView 静默播放视频并取音频，支持后台续播、暂停、跳转
• 后台播放通知：iOS 通过 MPNowPlayingInfoCenter 在锁屏与控制中心显示标题、作者与封面；Android 通过 NotificationCompat 显示相同信息
• 全屏播放器：封面、标题、进度条、上一首/下一首、单曲循环、分 P 列表
• MV 视频播放：点击 MV 条目在应用内打开 bilibili html5player，通过 JS 注入 CSS 隐藏网页多余元素，仅保留播放器（含进度条与清晰度选项），全屏沉浸观看
• 搜索能力：支持 UP 主和视频关键词搜索；搜索采用回车触发，避免输入过程中频繁请求；搜索结果可按发行商筛选；筛选无结果时不再显示「继续加载」按钮
• 个人收藏：登录 bilibili 后可将视频一键收藏至"音乐收藏夹"
• 浏览器模式：在应用内浏览 bilibili 页面，顶部返回栏可退出
• 首次启动免责协议：首次开启需阅读并同意免责协议，不同意则退出应用；协议中包含联系方式
• 浅色毛玻璃 UI：所有 Toast 提示、mini 播放器统一采用浅色毛玻璃效果（backdrop-filter: blur(20px) saturate(180%)），与系统视觉一致
• 开屏动画：展示"由 bilibili 强力驱动"标语
• 跨平台一致体验：iOS / Android 双端 JS 桥接回调格式统一为 { ok, status, text }，搜索页样式与发行商选择行为完全一致

技术架构

应用采用多 WebView 分层架构：

关键设计：

• iOS 通过 WKScriptMessageHandler 实现 JS 与 Native 双向通信；Android 通过 @JavascriptInterface 暴露 NativeBridge 对象，并通过 evaluateJavascript 回调 JS
• 播放器状态采用 Native 轮询方案（每 500ms 查询 <video> 元素状态），避免事件转发不可靠问题；状态变化（playing / paused / ended / timeupdate）去重后通过 __onPlayerEvent 推送给前端，确保进度条与播放按钮在双端一致更新
• 进度条使用三层结构（底层背景、中层填充、顶层透明 input range）实现"已读部分白色实心"效果
• Android 端使用 Foreground Service + 静态引用机制实现后台播放与 UI 层回调；iOS 端通过 AVAudioSessionCategoryPlayback + 后台任务保证后台续播，在 playerWebView 初始化与进入后台时均重新激活会话
• 列表分页：发行商投稿与搜索均为单页加载（每页 30 条），列表底部「继续加载」按钮触发下一页请求；避免一次性爬取 20 页 600 条造成的等待过长与风控触发
• 视图栈版本号：_viewEpoch 在每次 pushView / popView / replaceTopView 时递增，异步加载完成后比对版本号，防止已切换视图被旧数据污染（典型场景：收藏夹未加载完成退出时丢弃结果）
• hasMore 判断：优先根据返回数量是否小于页大小判定为最后一页，再结合 total 字段精确判断，避免 total 不可靠时错误显示「继续加载」
• MV 纯视频展示：进入 MV 模式后，onPageFinished 回调中执行 injectMVCSS，通过 JS 找到 <video> 元素并向上遍历到 body 直接子节点（播放器容器），全屏 fixed 显示该容器，仅隐藏其兄弟元素；保留进度条、清晰度等所有播放器控件
• 后台播放元数据传递：前端 nativePlayAudio 调用时附带 { title, cover, author }，原生端接收后下载封面图并更新 MPNowPlayingInfoCenter（iOS）/ NotificationCompat（Android）

项目结构

.
├── README.md                        # 项目说明文档（本文件）
├── pilipala-ios/                    # iOS 项目（Theos）
│   ├── Makefile                     # theos 编译配置
│   ├── PiliPala.ipa                 # 预编译安装包（arm64，需自签）
│   ├── Payload/                     # IPA 打包目录
│   ├── .theos/                      # theos 构建产物
│   ├── Resources/
│   │   ├── Info.plist               # 应用配置
│   │   ├── AppIcon*.png             # 应用图标（黑胶唱机 + PiliPala 字样）
│   │   └── Web/                     # 前端资源（iOS 内嵌）
│   │       ├── index.html
│   │       ├── style.css
│   │       └── app.js
│   └── Sources/
│       ├── AppDelegate.h / .m      # 应用生命周期 + AVAudioSession 配置
│       ├── ViewController.h / .m   # 主控制器：WebView 管理、JSBridge、播放控制、后台播放、MV 注入
│       └── main.m
├── pilipala-android/                # Android 项目（Gradle）
│   ├── build.gradle                 # 根项目构建脚本
│   ├── settings.gradle
│   ├── gradle.properties
│   ├── local.properties             # 本地 SDK 路径配置
│   ├── release.keystore             # Release 签名密钥库
│   ├── gen_icons.py                 # 应用图标生成脚本（黑胶唱机）
│   ├── PiliPala-android-debug.apk   # 预编译 Debug 安装包
│   ├── PiliPala-android-v1.0.0.apk  # 预编译 Release 安装包（v1.0.0）
│   ├── PiliPala-android-v1.0.0.apk.idsig # APK 签名方案 v4
│   └── app/
│       ├── build.gradle             # 应用模块配置
│       ├── proguard-rules.pro
│       └── src/main/
│           ├── AndroidManifest.xml
│           ├── assets/Web/          # 前端资源（与 iOS 共用）
│           ├── java/com/pilipala/music/
│           │   ├── MainActivity.java         # 入口、WebView 与桥接初始化、MV 注入、原生对话框
│           │   ├── LoginActivity.java        # bilibili 登录页（CookieManager 共享登录态）
│           │   ├── MusicPlaybackService.java # 后台音频 Service（Foreground + 状态轮询 + 通知封面标题）
│           │   └── WebAppInterface.java      # JS <-> Native 桥接接口
│           └── res/                          # 图标、布局、字符串、样式
└── pilipala-website/                # 应用介绍网站（静态）
    ├── index.html
    ├── styles.css
    ├── script.js
    ├── config.json                  # 网站配置（应用信息、下载链接、截图列表）
    ├── favicon.svg                  # 黑胶唱机 + PiliPala 字样（与 App 图标一致）
    └── screenshots/                 # 基于 App HTML/CSS 绘制的 SVG 截图
        ├── screenshot-1-home.svg
        ├── screenshot-2-favorites.svg
        ├── screenshot-3-player.svg
        └── screenshot-4-search.svg

预编译安装包：本仓库已包含预编译的安装包，无需自行编译即可安装：

• iOS：pilipala-ios/PiliPala.ipa（arm64，需自签）
• Android：pilipala-android/PiliPala-android-debug.apk（Debug）与 PiliPala-android-v1.0.0.apk（Release v1.0.0，已 v1+v2+v3 三重签名）

环境要求

iOS

• macOS + Theos 工具链
• iOS SDK 16.5+（Makefile 中 TARGET := iphone:clang:16.5:14.0）
• 部署目标：iOS 14.0+
• 架构：arm64
• 依赖框架：UIKit / WebKit / Security / CoreGraphics / AVFoundation / MediaPlayer

Android

• JDK 17
• Android SDK Build-Tools 34.0.0、Platform 34
• Gradle 8.5+
• 最低部署版本：Android 5.0（API 21）
• 目标版本：Android 14（API 34）

编译与打包

iOS

在 pilipala-ios/ 目录执行：

# 编译
make clean && make

# 手动打包为 ipa
mkdir -p Payload
cp -R .theos/obj/debug/PiliPala.app Payload/PiliPala.app
cd Payload && zip -rq ../PiliPala.ipa PiliPala.app -x "*.DS_Store" && cd ..

生成的 PiliPala.ipa 文件位于项目根目录。

iOS 安装方式（需自签）：

本应用不上架 App Store，需通过以下方式自签安装：

• 越狱设备：使用 Filza 或 Sileo 直接安装
• 非越狱设备：配合开发者证书或免费 Apple ID，通过 Sideloadly / AltStore / TrollStore 等工具自签安装（免费证书每 7 天需重新签名）

Android

在 pilipala-android/ 目录执行：

# Debug APK
gradle :app:assembleDebug

# Release APK（需配置签名密钥）
gradle :app:assembleRelease

生成的 APK 位于 app/build/outputs/apk/debug/app-debug.apk（或 release/app-release.apk），可直接通过 adb install 或文件管理器安装。

沙箱/CI 环境编译提示：仓库的 gradle.properties 已写入代理配置（http.proxyHost=127.0.0.1、http.proxyPort=18080）和 -XX:-UseContainerSupport（规避 Java 17.0.2 在 cgroup v2 下的 NPE bug），普通开发机可移除这两段配置。

签名方案（Android 14 / 定制 ROM 兼容）

Android 14 要求 targetSdk ≥ 34 的应用必须使用 v2+ 签名，但部分定制 ROM（MIUI、EMUI 等）仍要求 v1 签名才能识别为合法安装包。仓库的 minSdkVersion 已设为 21，使 apksigner 默认启用 v1+v2+v3 三重签名，完整命令如下：

# 1. 移除旧签名
zip -d app-debug.apk "META-INF/*.MF" "META-INF/*.SF" "META-INF/*.RSA"

# 2. ZIP 4 字节对齐（apksigner 要求）
$ANDROID_HOME/build-tools/34.0.0/zipalign -f 4 app-debug.apk app-aligned.apk

# 3. 一次性生成 v1 + v2 + v3 签名
$ANDROID_HOME/build-tools/34.0.0/apksigner sign \
  --ks debug.keystore --ks-pass pass:android --ks-key-alias androiddebugkey --key-pass pass:android \
  --v1-signing-enabled true --v2-signing-enabled true --v3-signing-enabled true \
  --out app-signed.apk app-aligned.apk

# 4. 验证
apksigner verify --verbose app-signed.apk

期望输出：Verified using v1 scheme: true / v2 scheme: true / v3 scheme: true，三者全为 true 时才能在 Android 14 及定制 ROM 上同时正常安装。

介绍网站

pilipala-website/ 为纯静态网站，无构建步骤，直接用浏览器打开 index.html 或部署至任意静态托管即可。包含以下资源：

• config.json：网站配置文件，包含应用名称、版本、下载链接、系统要求与截图列表
• favicon.svg：黑胶唱机 + "P" 字样，与应用 App 图标视觉一致
• screenshots/screenshot-*.svg：基于应用源码（pilipala-ios/Resources/Web/ 的 HTML/CSS）绘制的 4 张矢量截图，分别呈现首页、收藏、全屏播放器、搜索页

重新生成应用图标

cd pilipala-android
python3 gen_icons.py

脚本会同时输出 Android app/src/main/res/mipmap-*/ic_launcher*.png 与 iOS pilipala-ios/Resources/AppIcon*.png。图标为粉色渐变背景 + 黑胶唱机 + "PiliPala" 字样。

使用说明

1. 首次启动会弹出免责协议，需点击"同意"才能进入应用；点击"不同意"将退出应用；协议中包含作者联系方式
2. 同意后协议状态保存在本地，后续启动不再提示
3. 主页顶部可点击头像登录 bilibili 账号，登录后可使用收藏功能
4. 顶部发行商快捷条点击切换发行商，点击"+"可粘贴 bilibili UP 主主页链接或 uid 添加自定义发行商
5. 点击歌曲项开始播放，底部出现 mini 播放器（半透明深色 + 强毛玻璃）；点击 mini 播放器展开全屏播放器
6. 全屏播放器支持拖动进度条跳转、上一首/下一首、单曲循环、查看分 P 列表
7. 点击 MV 按钮可在应用内观看 MV 视频（保留进度条与清晰度控件）
8. 搜索框输入关键词后按回车开始搜索；列表拉到底部时点击「继续加载」按钮加载下一页（每页 30 条）
9. 首页底部有作者 1n34 与致谢 Trae AI 的超链接，点击跳转至对应网站

隐私与免责

• 本应用不收集、不上传任何用户数据
• 所有内容均来源于 bilibili 公开接口，本应用不存储、不修改、不分发任何音视频内容
• 所有音视频作品著作权归原作者所有
• 本应用仅供个人学习与欣赏使用，严禁用于任何商业用途或二次分发
• 使用本应用产生的一切后果由用户自行承担，开发者不对因使用本应用而导致的任何直接或间接损失负责

致谢

• bilibili — 内容来源
• Theos — iOS 编译工具链
• Android Gradle Plugin — Android 构建系统
• Trae AI — AI 编程助手
• bilibili 开放接口提供数据支持

许可

本项目仅供学习交流使用，不提供任何明示或暗示的担保。请遵守所在国家/地区的法律法规及 bilibili 平台规则。