1. 项目概述从“Blob Radio”到“Supa-Haxor”的音频流媒体实践最近在折腾一个叫“Supa-Haxor/Blob-Radio”的项目名字听起来有点黑客范儿但本质上它是一个构建在现代化技术栈上的个人或社区音频流媒体服务。简单来说你可以把它理解为一个自建的、功能更灵活的“网络电台”或“播客平台”。在这个流媒体服务泛滥的时代为什么还要自己动手搭建一个原因其实很直接自主权、定制化和数据隐私。当你使用主流平台时你的内容分发、用户数据、甚至播放体验都受制于平台的规则和算法。而“Blob Radio”这类项目让你能完全掌控从音频上传、转码、存储到最终播放的每一个环节。“Supa-Haxor”这个前缀暗示了它很可能深度集成了Supabase——一个开源的Firebase替代品提供了数据库、认证、存储和实时功能等后端即服务BaaS。而“Blob”则直指其核心将音频文件作为二进制大对象Binary Large Object进行高效存储和管理。整个项目的魅力在于它用一套相对轻量但强大的现代工具链Supabase 前端框架 音频处理库实现了传统上需要复杂后端和流媒体服务器才能完成的功能。无论是想为自己喜欢的音乐创建一个私密分享空间还是为播客节目搭建一个专属站点亦或是学习现代全栈开发中媒体处理的绝佳案例这个项目都提供了一个清晰的蓝图。2. 技术架构深度解析为什么是这套组合拳拆解“Blob Radio”其技术选型体现了清晰的现代Web开发思路前后端分离、利用托管服务减少运维、专注于业务逻辑。下面我们来逐一剖析每个核心组件及其选型理由。2.1 核心支柱Supabase 的角色与优势Supabase 在这里绝非简单的数据库。它扮演了一体化后端引擎的角色。PostgreSQL 数据库存储所有元数据。这包括用户信息、电台频道、播放列表、单曲信息标题、艺术家、专辑、时长、以及最重要的——每条音频记录在 Supabase Storage 中对应的文件路径bucket和path。利用 PostgreSQL 的 JSONB 类型可以灵活地存储音频的元信息如 ID3 标签信息并进行高效的查询。Supabase Storage这是“Blob”的归宿。我们会在 Storage 中创建名为audio或tracks的存储桶Bucket用于存放上传的音频文件MP3, M4A, FLAC, OGG等。它的优势在于内置 CDN上传的文件会自动通过全球CDN分发极大提升了音频加载速度对于流媒体体验至关重要。细粒度权限控制RLS可以通过行级安全策略精确控制谁可以读取播放或管理上传/删除哪些音频文件。例如你可以设置“所有已验证用户可读仅管理员可写”。直接文件操作 API前端可以通过 Supabase 客户端库直接上传、下载、列出文件无需自建文件服务器。Supabase Auth处理用户注册、登录、会话管理。我们可以轻松实现基于邮箱/密码、OAuthGitHub, Google等的认证并将用户会话与数据库操作、存储权限无缝绑定。Supabase Realtime这是一个潜力股。虽然基础音频流播放不一定需要但可以用来实现实时同步的播放状态多设备间同步播放进度、聊天室听众互动或实时在线听众统计为电台增添社区活力。选型理由自建后端处理文件上传、存储、用户认证和数据库需要配置Nginx、设计REST API、处理CORS、管理服务器安全运维成本很高。Supabase 将这些繁琐的底层工作打包成服务开发者只需通过简单的JavaScript API调用就能获得生产就绪的后端能力让我们能聚焦在音频播放和用户体验这个核心业务上。2.2 前端框架交互体验的基石前端是用户直接接触的部分需要兼顾动态交互和性能。Next.js (React) 或 Nuxt.js (Vue) 是绝佳选择原因如下服务端渲染 (SSR) / 静态生成 (SSG)对于电台首页、频道列表等相对静态的内容使用SSR/SSG可以极大提升首屏加载速度和SEO。当用户访问时页面已经渲染好体验流畅。API Routes (Next.js) / Server Routes (Nuxt)虽然大部分逻辑可通过 Supabase 客户端直接在前端完成但有些敏感操作如触发音频转码任务、调用第三方元数据API不适合暴露在前端。这时可以利用框架的服务器端API路由在安全的环境下执行这些操作。现代化的开发体验热重载、组件化、丰富的生态系统UI库、音频播放器组件等能显著提升开发效率。一个典型的架构是使用 Next.js 构建前端页面利用supabase/supabase-js客户端库与后端交互使用一个强大的音频播放器库如howler.js或react-player来构建播放器组件。2.3 音频处理与播放专业级的核心这是项目的灵魂所在。直接播放原始上传的音频文件尤其是高码率无损格式会带来问题文件体积大加载慢且无法实现“流式传输”用户必须等待整个文件下载完才能播放。解决方案服务器端转码 HTTP 流式传输。转码工作流当用户上传一个音频文件如song.flac到 Supabase Storage 后我们需要一个“触发器”来启动转码。Supabase 提供了Database Webhooks或Storage Webhooks。当storage.objects表有新的插入记录时可以触发一个外部服务例如部署在 Vercel/Netlify 的 Serverless Function或一个常驻的轻量级服务器。转码服务这个外部服务接收到文件上传事件后会从 Supabase Storage 下载原始文件。使用FFmpeg音视频处理领域的瑞士军刀将文件转码为更适合网络流媒体的格式。通常选择Opus编码的Ogg容器.ogg或AAC编码的MP4容器.m4a。这两种格式在压缩效率和流媒体支持上都有很好表现。关键一步生成HLSHTTP Live Streaming片段。FFmpeg 可以将音频文件分割成一系列小的.ts传输流文件并生成一个.m3u8播放列表文件。前端播放器通过请求这个.m3u8文件就可以按需加载和播放这些小片段实现真正的“边下边播”、拖动进度条即时跳转。将生成的 HLS 片段一堆.ts文件和一个.m3u8文件上传回 Supabase Storage 的另一个目录例如audio-transcoded/[original_file_id]/。在数据库的tracks表中更新该音频记录的状态为“已转码”并存储转码后文件的路径。前端播放器前端播放器库如hls.js会读取.m3u8文件的地址并自动处理分段加载、缓冲和播放。它兼容现代浏览器的 Media Source Extensions (MSE) API提供平滑的流媒体体验。注意转码是计算密集型任务。对于个人项目可以使用 Serverless Function 按需执行但需要注意执行时长和冷启动问题。对于有一定负载的项目建议使用专用的虚拟机或容器来运行转码 worker。3. 从零到一的详细实现步骤理解了架构我们来一步步实现它。这里我们以Next.js Supabase FFmpeg (on Vercel Serverless)的技术栈为例。3.1 环境准备与项目初始化首先确保你拥有 Node.js ( 16) 环境。然后创建项目并安装核心依赖。# 使用 Next.js 官方模板创建项目 npx create-next-applatest blob-radio --typescript --tailwind --app cd blob-radio # 安装 Supabase 客户端库 npm install supabase/supabase-js # 安装用于处理音频播放和HLS的库 npm install howler hls.js # 安装用于前端UI组件可选但推荐 npm install lucide-react # 图标库 npm install radix-ui/react-slider # 美观的进度条组件 # 安装用于后端转码函数的相关依赖在对应的api目录下 # 我们稍后会在 /app/api/transcode/route.ts 中处理接下来去 Supabase官网 创建一个新项目。记下你的项目URL (https://xxxxx.supabase.co) 和anon/service_role密钥。在项目根目录创建.env.local文件填入这些信息NEXT_PUBLIC_SUPABASE_URL你的项目URL NEXT_PUBLIC_SUPABASE_ANON_KEY你的anon公钥 SUPABASE_SERVICE_ROLE_KEY你的service_role私钥务必保密仅用于后端3.2 数据库与存储架构设计进入 Supabase 项目的 SQL 编辑器执行以下 SQL 来创建核心表结构-- 1. 创建 tracks 表存储音频元数据 CREATE TABLE public.tracks ( id UUID DEFAULT gen_random_uuid() PRIMARY KEY, created_at TIMESTAMP WITH TIME ZONE DEFAULT TIMEZONE(utc::text, NOW()) NOT NULL, user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE NOT NULL, title TEXT NOT NULL, artist TEXT, album TEXT, duration INTEGER, -- 单位秒 file_path TEXT NOT NULL, -- 原始文件在Storage中的路径如 originals/song.flac transcoded_path TEXT, -- 转码后HLS主列表路径如 transcoded/song_id/master.m3u8 status TEXT DEFAULT pending CHECK (status IN (pending, processing, completed, failed)), metadata JSONB -- 用于存储额外的ID3信息如genre, year, cover_art_url等 ); -- 2. 启用行级安全策略 (RLS) ALTER TABLE public.tracks ENABLE ROW LEVEL SECURITY; -- 3. 创建策略用户只能查看状态为 completed 的曲目或自己上传的所有曲目 CREATE POLICY Users can view completed tracks ON public.tracks FOR SELECT USING (status completed OR auth.uid() user_id); CREATE POLICY Users can insert their own tracks ON public.tracks FOR INSERT WITH CHECK (auth.uid() user_id); CREATE POLICY Users can update their own tracks ON public.tracks FOR UPDATE USING (auth.uid() user_id); -- 4. 在Supabase Storage中创建两个存储桶可通过Dashboard界面或SQL创建 -- originals : 用于存放用户上传的原始音频文件。 -- transcoded : 用于存放转码后的HLS文件。 -- 注意需要在Storage设置中为这两个桶配置相应的RLS策略允许认证用户上传到originals允许公开读取transcoded。3.3 前端核心功能实现3.3.1 初始化 Supabase 客户端在lib/supabase.ts中创建客户端实例import { createClient } from supabase/supabase-js; const supabaseUrl process.env.NEXT_PUBLIC_SUPABASE_URL!; const supabaseAnonKey process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!; export const supabase createClient(supabaseUrl, supabaseAnonKey);3.3.2 实现音频上传组件创建一个组件components/Uploader.tsx。核心是利用 Supabase Storage 的upload方法。use client; import { useState } from react; import { supabase } from /lib/supabase; import { useRouter } from next/navigation; export default function Uploader() { const [uploading, setUploading] useState(false); const [file, setFile] useStateFile | null(null); const [title, setTitle] useState(); const router useRouter(); const handleUpload async () { if (!file || !title) return; setUploading(true); try { const user (await supabase.auth.getUser()).data.user; if (!user) throw new Error(未登录); // 1. 定义存储路径 const fileExt file.name.split(.).pop(); const fileName ${user.id}/${Date.now()}.${fileExt}; const filePath originals/${fileName}; // 2. 上传文件到 Supabase Storage const { error: uploadError } await supabase.storage .from(originals) .upload(filePath, file); if (uploadError) throw uploadError; // 3. 在数据库插入记录状态为 pending const { error: dbError } await supabase.from(tracks).insert({ user_id: user.id, title, file_path: filePath, status: pending, }); if (dbError) throw dbError; alert(上传成功转码将在后台进行。); setFile(null); setTitle(); router.refresh(); // 刷新页面数据 } catch (error) { console.error(上传失败:, error); alert(上传失败: (error as Error).message); } finally { setUploading(false); } }; return ( div classNamep-4 border rounded-lg space-y-4 input typetext placeholder曲目标题 value{title} onChange{(e) setTitle(e.target.value)} classNameborder p-2 w-full / input typefile acceptaudio/* onChange{(e) setFile(e.target.files?.[0] || null)} classNameblock w-full / button onClick{handleUpload} disabled{uploading} classNamebg-blue-500 text-white px-4 py-2 rounded disabled:opacity-50 {uploading ? 上传中... : 上传音频} /button p classNametext-sm text-gray-500支持 MP3, M4A, FLAC, WAV 等格式。上传后系统将自动转码。/p /div ); }实操心得在上传大文件时可以考虑使用supabase.storage.from().upload()的分块上传功能以提高大文件上传的可靠性。同时前端应提供上传进度条提升用户体验。3.3.3 构建音频播放器组件这是前端的核心。我们创建一个components/Player.tsx组件使用howler.js和hls.js来处理 HLS 流。use client; import { useEffect, useRef, useState } from react; import Hls from hls.js; import { Howl } from howler; import { Play, Pause, Volume2, SkipBack, SkipForward } from lucide-react; import * as Slider from radix-ui/react-slider; interface PlayerProps { trackUrl: string; // HLS master.m3u8 的公开URL trackName: string; } export default function Player({ trackUrl, trackName }: PlayerProps) { const [isPlaying, setIsPlaying] useState(false); const [duration, setDuration] useState(0); const [currentTime, setCurrentTime] useState(0); const [volume, setVolume] useState(0.7); const soundRef useRefHowl | null(null); const isHlsSupported Hls.isSupported(); useEffect(() { // 清理之前的实例 if (soundRef.current) { soundRef.current.unload(); } if (!trackUrl) return; let hls: Hls | null null; if (isHlsSupported) { // 使用 HLS.js Howler 处理 HLS 流 const audioElement document.createElement(audio); hls new Hls(); hls.loadSource(trackUrl); hls.attachMedia(audioElement); hls.on(Hls.Events.MANIFEST_PARSED, () { soundRef.current new Howl({ src: [trackUrl], // Howler 会通过 HLS 插件处理 html5: true, // 强制使用 HTML5 Audio API以便与 HLS 集成 format: [m3u8], volume, onplay: () setIsPlaying(true), onpause: () setIsPlaying(false), onstop: () setIsPlaying(false), onload: () setDuration(soundRef.current?.duration() || 0), onend: () setIsPlaying(false), }); }); } else if (audioElement.canPlayType(application/vnd.apple.mpegurl)) { // 对于 Safari (原生支持 HLS) soundRef.current new Howl({ src: [trackUrl], html5: true, format: [m3u8], volume, onplay: () setIsPlaying(true), // ... 其他事件回调 }); } else { console.error(当前浏览器不支持HLS播放); return; } // 定时器更新当前播放时间 const interval setInterval(() { if (soundRef.current soundRef.current.playing()) { setCurrentTime(soundRef.current.seek()); } }, 500); // 组件卸载时清理 return () { if (hls) { hls.destroy(); } if (soundRef.current) { soundRef.current.unload(); } clearInterval(interval); }; }, [trackUrl, isHlsSupported]); const togglePlay () { if (!soundRef.current) return; if (soundRef.current.playing()) { soundRef.current.pause(); } else { soundRef.current.play(); } }; const handleSeek (value: number[]) { const newTime value[0]; if (soundRef.current) { soundRef.current.seek(newTime); setCurrentTime(newTime); } }; const handleVolumeChange (value: number[]) { const newVolume value[0]; setVolume(newVolume); if (soundRef.current) { soundRef.current.volume(newVolume); } }; return ( div classNamefixed bottom-0 left-0 right-0 bg-white border-t p-4 shadow-lg div classNamemax-w-4xl mx-auto flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0 {/* 曲目信息 */} div classNameflex-1 min-w-0 p classNamefont-semibold truncate{trackName}/p p classNametext-sm text-gray-500 {Math.floor(currentTime / 60)}:{String(Math.floor(currentTime % 60)).padStart(2, 0)} / {Math.floor(duration / 60)}:{String(Math.floor(duration % 60)).padStart(2, 0)} /p /div {/* 播放控制 */} div classNameflex items-center space-x-4 button classNamep-2 hover:bg-gray-100 rounded-fullSkipBack size{20} //button button onClick{togglePlay} classNamep-3 bg-black text-white rounded-full hover:bg-gray-800 {isPlaying ? Pause size{24} / : Play size{24} /} /button button classNamep-2 hover:bg-gray-100 rounded-fullSkipForward size{20} //button /div {/* 进度条 */} div classNameflex-1 w-full md:w-auto Slider.Root classNamerelative flex items-center w-full h-5 cursor-pointer value{[currentTime]} max{duration || 100} step{1} onValueChange{handleSeek} Slider.Track classNamebg-gray-200 relative flex-1 rounded-full h-1 Slider.Range classNameabsolute bg-blue-600 rounded-full h-full / /Slider.Track Slider.Thumb classNameblock w-4 h-4 bg-blue-600 rounded-full hover:scale-110 focus:outline-none / /Slider.Root /div {/* 音量控制 */} div classNameflex items-center space-x-2 Volume2 size{20} / Slider.Root classNamerelative flex items-center w-24 h-5 cursor-pointer value{[volume]} max{1} step{0.01} onValueChange{handleVolumeChange} Slider.Track classNamebg-gray-200 relative flex-1 rounded-full h-1 Slider.Range classNameabsolute bg-gray-600 rounded-full h-full / /Slider.Track Slider.Thumb classNameblock w-3 h-3 bg-gray-700 rounded-full hover:scale-110 / /Slider.Root /div /div /div ); }这个播放器组件具备了基本的播放/暂停、进度条拖拽、音量控制功能并兼容了 HLS 流媒体播放。3.4 后端转码服务的实现关键环节这是最复杂但最关键的一步。我们需要创建一个 API 路由当文件上传到originals存储桶后自动触发转码。我们使用Vercel Serverless Functions或Supabase Edge Functions来实现。这里以 Next.js App Router 的 API Route 为例。首先安装必要的后端依赖在项目根目录npm install vercel/node ffmpeg/ffmpeg ffmpeg/util fluent-ffmpeg ffmpeg-static # 注意ffmpeg-static 会在部署时提供静态的 FFmpeg 二进制文件但 Vercel 无服务器环境可能受限。 # 更可靠的方案是使用一个支持 FFmpeg 的 Docker 容器作为独立的转码 Worker。考虑到 Serverless 环境对 FFmpeg 支持的限制和转码任务的长耗时特性更推荐的做法是使用一个独立的、长时间运行的服务器或容器服务作为“转码Worker”。这里我们描述一种基于Node.js Express BullMQ (Redis) 队列的独立服务方案它更健壮。转码 Worker 服务 (transcode-worker/index.js):const express require(express); const { createClient } require(supabase/supabase-js); const { Worker, Queue } require(bullmq); const IORedis require(ioredis); const ffmpeg require(fluent-ffmpeg); const fs require(fs).promises; const path require(path); const { tmpdir } require(os); const { Storage } require(google-cloud/storage); // 或使用 Supabase SDK 下载/上传 const app express(); const PORT process.env.PORT || 3001; // 连接 Redis (用于任务队列) const connection new IORedis(process.env.REDIS_URL); // 初始化 Supabase 管理客户端使用 service_role key const supabaseAdmin createClient(process.env.SUPABASE_URL, process.env.SUPABASE_SERVICE_ROLE_KEY); // 创建 BullMQ 队列 const transcodeQueue new Queue(audio-transcode, { connection }); // 定义处理任务的 Worker const worker new Worker(audio-transcode, async (job) { const { trackId, filePath, userId } job.data; console.log(开始处理任务: ${trackId}); try { // 1. 更新数据库状态为 processing await supabaseAdmin.from(tracks).update({ status: processing }).eq(id, trackId); // 2. 从 Supabase Storage 下载原始文件到临时目录 const tempInputPath path.join(tmpdir(), input_${trackId}${path.extname(filePath)}); const { data: fileData, error: downloadError } await supabaseAdmin.storage.from(originals).download(filePath); if (downloadError) throw downloadError; await fs.writeFile(tempInputPath, Buffer.from(await fileData.arrayBuffer())); // 3. 创建临时输出目录 const tempOutputDir path.join(tmpdir(), output_${trackId}); await fs.mkdir(tempOutputDir, { recursive: true }); const outputPlaylistPath path.join(tempOutputDir, master.m3u8); // 4. 使用 FFmpeg 进行转码和 HLS 分段 await new Promise((resolve, reject) { ffmpeg(tempInputPath) .audioCodec(libopus) // 使用 Opus 编码压缩率高音质好 .audioBitrate(128k) .outputOptions([ -f hls, // 输出格式为 HLS -hls_time 10, // 每个片段10秒 -hls_playlist_type vod, // 点播类型 -hls_segment_filename, path.join(tempOutputDir, segment_%03d.ts) // 片段命名 ]) .output(outputPlaylistPath) .on(end, resolve) .on(error, reject) .run(); }); // 5. 读取生成的 .m3u8 文件和所有 .ts 片段 const files await fs.readdir(tempOutputDir); for (const file of files) { const fileBuffer await fs.readFile(path.join(tempOutputDir, file)); const uploadPath transcoded/${trackId}/${file}; // 上传到 Supabase Storage 的 transcoded 桶 const { error: uploadError } await supabaseAdmin.storage .from(transcoded) .upload(uploadPath, fileBuffer, { contentType: file.endsWith(.m3u8) ? application/vnd.apple.mpegurl : video/mp2t }); if (uploadError) throw uploadError; } // 6. 更新数据库设置状态为 completed并存储转码后路径 const masterPlaylistPath transcoded/${trackId}/master.m3u8; const { error: updateError } await supabaseAdmin .from(tracks) .update({ status: completed, transcoded_path: masterPlaylistPath, duration: await getAudioDuration(tempInputPath) // 需要额外函数获取时长 }) .eq(id, trackId); if (updateError) throw updateError; console.log(任务处理完成: ${trackId}); // 7. 清理临时文件 await fs.unlink(tempInputPath); await fs.rm(tempOutputDir, { recursive: true }); } catch (error) { console.error(处理任务 ${trackId} 失败:, error); await supabaseAdmin.from(tracks).update({ status: failed }).eq(id, trackId); throw error; // 让 BullMQ 知道任务失败可能会重试 } }, { connection }); // 启动一个简单的 HTTP 服务器来接收 Webhook 或健康检查 app.post(/webhook, express.json(), async (req, res) { // 这里可以接收来自 Supabase Database Webhook 的请求 const { record } req.body; if (record record.status pending) { await transcodeQueue.add(transcode-job, { trackId: record.id, filePath: record.file_path, userId: record.user_id }); } res.status(200).send(OK); }); app.listen(PORT, () console.log(转码Worker运行在端口 ${PORT}));这个 Worker 服务需要部署在一台可以安装和运行 FFmpeg 的服务器上如 DigitalOcean Droplet, AWS EC2, 或 Railway 等容器平台。它监听一个队列当有新的转码任务加入时就会自动处理。如何触发转码我们需要设置一个Supabase Database Webhook。在 Supabase 仪表板中进入Database-Webhooks创建一个新的 Webhook。URL: 填写你的转码 Worker 服务的/webhook端点地址。Event: 选择INSERT事件。Table: 选择tracks表。Filters: 可以添加status eq pending确保只有新上传的待处理任务才会触发。这样每当前端上传音频并插入一条statuspending的记录到tracks表时Supabase 就会自动向你的 Worker 发送一个 POST 请求Worker 随即创建转码任务。3.5 前端数据获取与播放列表展示最后我们需要一个页面来展示已转码完成的音频列表。在app/page.tsx中import { supabase } from /lib/supabase; import Player from /components/Player; import Uploader from /components/Uploader; export default async function HomePage() { // 在服务端获取数据 const { data: tracks, error } await supabase .from(tracks) .select(*) .eq(status, completed) // 只获取已转码完成的 .order(created_at, { ascending: false }); if (error) { console.error(error); return div加载失败/div; } // 获取公开播放URL const tracksWithUrl tracks?.map(track ({ ...track, playUrl: track.transcoded_path ? supabase.storage.from(transcoded).getPublicUrl(track.transcoded_path).data.publicUrl : null })) || []; return ( div classNamecontainer mx-auto p-8 h1 classNametext-3xl font-bold mb-8Blob Radio/h1 Uploader / div classNamemt-12 h2 classNametext-2xl font-semibold mb-4曲库/h2 div classNamegrid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 {tracksWithUrl.map((track) ( div key{track.id} classNameborder rounded-lg p-4 hover:shadow-md transition-shadow div classNamefont-medium{track.title}/div div classNametext-sm text-gray-600{track.artist || 未知艺术家}/div {track.playUrl ( button onClick{() { // 这里需要将 track.playUrl 和 track.title 传递给全局的 Player 组件 // 通常使用状态管理如 Zustand, Context或将URL设置到某个全局状态 // 为简化示例我们假设有一个全局状态存储当前播放曲目 console.log(播放:, track.playUrl); }} classNamemt-3 text-sm bg-green-500 text-white px-3 py-1 rounded hover:bg-green-600 播放 /button )} div classNametext-xs text-gray-400 mt-2 上传于 {new Date(track.created_at).toLocaleDateString()} /div /div ))} /div /div {/* Player 组件可以放在布局layout.tsx中通过全局状态控制 */} {/* Player trackUrl{currentTrackUrl} trackName{currentTrackName} / */} /div ); }4. 部署、优化与高级功能探讨4.1 部署策略前端 (Next.js): 部署到Vercel。它与 Next.js 集成度最高配置简单自动支持 Serverless Functions虽然我们的转码主要不在它这里跑。转码 Worker: 部署到Railway或DigitalOcean App Platform。这些平台支持 Docker 容器可以轻松安装 FFmpeg。将上面的 Worker 代码打包成 Docker 镜像设置好环境变量SUPABASE_URL,SUPABASE_SERVICE_ROLE_KEY,REDIS_URL即可运行。Redis: 用于 BullMQ 队列可以使用Redis Cloud、Upstash或 Railway 提供的 Redis 插件。Supabase: 本身就是托管服务无需额外部署。4.2 性能与成本优化转码优化预设与码率根据音频类型选择合适的 FFmpeg 预设和码率。对于语音播客64kbps 的 Opus 就足够清晰对于音乐可能需要 128kbps 或 192kbps。并行处理BullMQ 可以启动多个 Worker 进程并行处理多个转码任务。硬件加速如果使用支持 GPU 转码的服务器如带有 NVIDIA GPU 的实例可以配置 FFmpeg 使用h264_nvenc视频或相应的音频硬件编码器大幅提升速度。存储与CDNSupabase Storage 自带 CDN但对于全球用户可以考虑将transcoded桶的文件进一步同步到更专业的 CDN如 Cloudflare R2, AWS CloudFront以降低出口流量成本Supabase 的带宽超出套餐后需付费。前端缓存使用 Service Worker 对已播放的音频片段进行缓存实现离线播放和减少重复请求。4.3 常见问题与排查技巧实录在开发和运营这样一个系统时你肯定会遇到各种问题。以下是一些常见坑点及解决方案问题现象可能原因排查步骤与解决方案上传后文件状态一直为pending1. Database Webhook 未正确配置或 URL 不可达。2. Worker 服务未运行或崩溃。3. RLS 策略导致 Worker使用 service_role无法更新表。1. 检查 Supabase Webhook 日志看是否有发送记录和错误响应。2. 登录 Worker 服务器查看应用日志和进程状态。3. 确保tracks表的 RLS 策略允许service_role通过通常 service_role 会绕过 RLS。可以临时为service_role创建一个策略或检查其权限。前端播放器无法加载 HLS 流控制台报错1.transcoded存储桶的 RLS 策略未设置为公开读取。2. 生成的.m3u8文件内容有误或.ts片段路径不对。3. 浏览器不支持 HLS老旧浏览器。1. 在 Supabase Storage 中确保transcoded桶的public权限设置为true或为authenticated用户配置SELECT策略。2. 手动下载一个生成的master.m3u8文件检查其内容。确保里面的.ts片段路径是有效的、可公开访问的 URL。可能是上传路径错误。3. 使用hls.js的Hls.isSupported()做兼容性检测并为不支持的回退到普通 MP3 播放需存储另一种格式。转码过程非常缓慢1. Worker 服务器 CPU 性能不足。2. FFmpeg 参数未优化使用了最慢的编码器预设。3. 同时处理的任务过多。1. 升级 Worker 服务器配置。2. 在 FFmpeg 命令中添加-preset fast或-preset superfast对于 libx264音频编码器也有类似选项。权衡速度与压缩率。3. 限制 BullMQ 的并发 Worker 数量避免服务器过载。播放时进度条无法拖拽 seeking HLS 流媒体 seeking 依赖正确的#EXT-X-BYTERANGE或分片列表。如果 FFmpeg 生成的是“点播(VOD)”模式但分片过大 seeking 可能不精确。确保 FFmpeg 命令中包含了-hls_playlist_type vod和合适的-hls_time参数如 10 秒。较小的分片时间有利于精确 seeking但会增加文件数量和.m3u8文件大小。移动端播放耗电快持续的网络请求和音频解码会消耗电量。1. 确保使用高效的编码格式如 Opus。2. 前端播放器在页面不可见时暂停播放。3. 考虑提供更低码率的流媒体选项自适应码率但这需要生成多套 HLS 流复杂度较高。4.4 扩展功能思路一个基础的“Blob Radio”搭建完成后你可以考虑以下方向进行扩展让它变得更强大用户系统与社交功能利用 Supabase Auth实现用户个人资料、关注、收藏歌单、创建电台频道等功能。实时互动使用 Supabase Realtime实现播放房间的同步播放、实时聊天、发送弹幕/礼物。智能推荐基于用户的播放历史在 PostgreSQL 中使用向量扩展如pgvector或简单的协同过滤算法实现“猜你喜欢”。播客支持扩展数据库 schema支持 RSS 订阅源导入、章节标记、播放速度调整等播客专属功能。后台管理为管理员构建一个仪表盘管理所有用户、审核内容、查看系统统计存储用量、播放量等。移动端应用使用 React Native 或 Flutter基于相同的 Supabase 后端构建原生移动端 App。搭建“Supa-Haxor/Blob-Radio”的过程是一次对现代全栈开发、云服务集成和流媒体技术的深度实践。它从零开始串联起了前端交互、后端逻辑、文件处理、实时通信等多个关键领域。虽然过程中会遇到不少挑战尤其是转码流水线的稳定性和性能优化但最终打造出一个完全受自己控制、功能可任意扩展的音频平台这种成就感和学到的实战经验是单纯使用第三方服务无法比拟的。如果你对某个细节还有疑问或者在实际部署中遇到了新的问题最好的办法就是查阅 Supabase、FFmpeg、HLS.js 等核心工具的官方文档并结合社区讨论来寻找答案。
基于Supabase与HLS构建自托管音频流媒体平台实战
发布时间：2026/5/16 15:20:10
1. 项目概述从“Blob Radio”到“Supa-Haxor”的音频流媒体实践最近在折腾一个叫“Supa-Haxor/Blob-Radio”的项目名字听起来有点黑客范儿但本质上它是一个构建在现代化技术栈上的个人或社区音频流媒体服务。简单来说你可以把它理解为一个自建的、功能更灵活的“网络电台”或“播客平台”。在这个流媒体服务泛滥的时代为什么还要自己动手搭建一个原因其实很直接自主权、定制化和数据隐私。当你使用主流平台时你的内容分发、用户数据、甚至播放体验都受制于平台的规则和算法。而“Blob Radio”这类项目让你能完全掌控从音频上传、转码、存储到最终播放的每一个环节。“Supa-Haxor”这个前缀暗示了它很可能深度集成了Supabase——一个开源的Firebase替代品提供了数据库、认证、存储和实时功能等后端即服务BaaS。而“Blob”则直指其核心将音频文件作为二进制大对象Binary Large Object进行高效存储和管理。整个项目的魅力在于它用一套相对轻量但强大的现代工具链Supabase 前端框架 音频处理库实现了传统上需要复杂后端和流媒体服务器才能完成的功能。无论是想为自己喜欢的音乐创建一个私密分享空间还是为播客节目搭建一个专属站点亦或是学习现代全栈开发中媒体处理的绝佳案例这个项目都提供了一个清晰的蓝图。2. 技术架构深度解析为什么是这套组合拳拆解“Blob Radio”其技术选型体现了清晰的现代Web开发思路前后端分离、利用托管服务减少运维、专注于业务逻辑。下面我们来逐一剖析每个核心组件及其选型理由。2.1 核心支柱Supabase 的角色与优势Supabase 在这里绝非简单的数据库。它扮演了一体化后端引擎的角色。PostgreSQL 数据库存储所有元数据。这包括用户信息、电台频道、播放列表、单曲信息标题、艺术家、专辑、时长、以及最重要的——每条音频记录在 Supabase Storage 中对应的文件路径bucket和path。利用 PostgreSQL 的 JSONB 类型可以灵活地存储音频的元信息如 ID3 标签信息并进行高效的查询。Supabase Storage这是“Blob”的归宿。我们会在 Storage 中创建名为audio或tracks的存储桶Bucket用于存放上传的音频文件MP3, M4A, FLAC, OGG等。它的优势在于内置 CDN上传的文件会自动通过全球CDN分发极大提升了音频加载速度对于流媒体体验至关重要。细粒度权限控制RLS可以通过行级安全策略精确控制谁可以读取播放或管理上传/删除哪些音频文件。例如你可以设置“所有已验证用户可读仅管理员可写”。直接文件操作 API前端可以通过 Supabase 客户端库直接上传、下载、列出文件无需自建文件服务器。Supabase Auth处理用户注册、登录、会话管理。我们可以轻松实现基于邮箱/密码、OAuthGitHub, Google等的认证并将用户会话与数据库操作、存储权限无缝绑定。Supabase Realtime这是一个潜力股。虽然基础音频流播放不一定需要但可以用来实现实时同步的播放状态多设备间同步播放进度、聊天室听众互动或实时在线听众统计为电台增添社区活力。选型理由自建后端处理文件上传、存储、用户认证和数据库需要配置Nginx、设计REST API、处理CORS、管理服务器安全运维成本很高。Supabase 将这些繁琐的底层工作打包成服务开发者只需通过简单的JavaScript API调用就能获得生产就绪的后端能力让我们能聚焦在音频播放和用户体验这个核心业务上。2.2 前端框架交互体验的基石前端是用户直接接触的部分需要兼顾动态交互和性能。Next.js (React) 或 Nuxt.js (Vue) 是绝佳选择原因如下服务端渲染 (SSR) / 静态生成 (SSG)对于电台首页、频道列表等相对静态的内容使用SSR/SSG可以极大提升首屏加载速度和SEO。当用户访问时页面已经渲染好体验流畅。API Routes (Next.js) / Server Routes (Nuxt)虽然大部分逻辑可通过 Supabase 客户端直接在前端完成但有些敏感操作如触发音频转码任务、调用第三方元数据API不适合暴露在前端。这时可以利用框架的服务器端API路由在安全的环境下执行这些操作。现代化的开发体验热重载、组件化、丰富的生态系统UI库、音频播放器组件等能显著提升开发效率。一个典型的架构是使用 Next.js 构建前端页面利用supabase/supabase-js客户端库与后端交互使用一个强大的音频播放器库如howler.js或react-player来构建播放器组件。2.3 音频处理与播放专业级的核心这是项目的灵魂所在。直接播放原始上传的音频文件尤其是高码率无损格式会带来问题文件体积大加载慢且无法实现“流式传输”用户必须等待整个文件下载完才能播放。解决方案服务器端转码 HTTP 流式传输。转码工作流当用户上传一个音频文件如song.flac到 Supabase Storage 后我们需要一个“触发器”来启动转码。Supabase 提供了Database Webhooks或Storage Webhooks。当storage.objects表有新的插入记录时可以触发一个外部服务例如部署在 Vercel/Netlify 的 Serverless Function或一个常驻的轻量级服务器。转码服务这个外部服务接收到文件上传事件后会从 Supabase Storage 下载原始文件。使用FFmpeg音视频处理领域的瑞士军刀将文件转码为更适合网络流媒体的格式。通常选择Opus编码的Ogg容器.ogg或AAC编码的MP4容器.m4a。这两种格式在压缩效率和流媒体支持上都有很好表现。关键一步生成HLSHTTP Live Streaming片段。FFmpeg 可以将音频文件分割成一系列小的.ts传输流文件并生成一个.m3u8播放列表文件。前端播放器通过请求这个.m3u8文件就可以按需加载和播放这些小片段实现真正的“边下边播”、拖动进度条即时跳转。将生成的 HLS 片段一堆.ts文件和一个.m3u8文件上传回 Supabase Storage 的另一个目录例如audio-transcoded/[original_file_id]/。在数据库的tracks表中更新该音频记录的状态为“已转码”并存储转码后文件的路径。前端播放器前端播放器库如hls.js会读取.m3u8文件的地址并自动处理分段加载、缓冲和播放。它兼容现代浏览器的 Media Source Extensions (MSE) API提供平滑的流媒体体验。注意转码是计算密集型任务。对于个人项目可以使用 Serverless Function 按需执行但需要注意执行时长和冷启动问题。对于有一定负载的项目建议使用专用的虚拟机或容器来运行转码 worker。3. 从零到一的详细实现步骤理解了架构我们来一步步实现它。这里我们以Next.js Supabase FFmpeg (on Vercel Serverless)的技术栈为例。3.1 环境准备与项目初始化首先确保你拥有 Node.js ( 16) 环境。然后创建项目并安装核心依赖。# 使用 Next.js 官方模板创建项目 npx create-next-applatest blob-radio --typescript --tailwind --app cd blob-radio # 安装 Supabase 客户端库 npm install supabase/supabase-js # 安装用于处理音频播放和HLS的库 npm install howler hls.js # 安装用于前端UI组件可选但推荐 npm install lucide-react # 图标库 npm install radix-ui/react-slider # 美观的进度条组件 # 安装用于后端转码函数的相关依赖在对应的api目录下 # 我们稍后会在 /app/api/transcode/route.ts 中处理接下来去 Supabase官网 创建一个新项目。记下你的项目URL (https://xxxxx.supabase.co) 和anon/service_role密钥。在项目根目录创建.env.local文件填入这些信息NEXT_PUBLIC_SUPABASE_URL你的项目URL NEXT_PUBLIC_SUPABASE_ANON_KEY你的anon公钥 SUPABASE_SERVICE_ROLE_KEY你的service_role私钥务必保密仅用于后端3.2 数据库与存储架构设计进入 Supabase 项目的 SQL 编辑器执行以下 SQL 来创建核心表结构-- 1. 创建 tracks 表存储音频元数据 CREATE TABLE public.tracks ( id UUID DEFAULT gen_random_uuid() PRIMARY KEY, created_at TIMESTAMP WITH TIME ZONE DEFAULT TIMEZONE(utc::text, NOW()) NOT NULL, user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE NOT NULL, title TEXT NOT NULL, artist TEXT, album TEXT, duration INTEGER, -- 单位秒 file_path TEXT NOT NULL, -- 原始文件在Storage中的路径如 originals/song.flac transcoded_path TEXT, -- 转码后HLS主列表路径如 transcoded/song_id/master.m3u8 status TEXT DEFAULT pending CHECK (status IN (pending, processing, completed, failed)), metadata JSONB -- 用于存储额外的ID3信息如genre, year, cover_art_url等 ); -- 2. 启用行级安全策略 (RLS) ALTER TABLE public.tracks ENABLE ROW LEVEL SECURITY; -- 3. 创建策略用户只能查看状态为 completed 的曲目或自己上传的所有曲目 CREATE POLICY Users can view completed tracks ON public.tracks FOR SELECT USING (status completed OR auth.uid() user_id); CREATE POLICY Users can insert their own tracks ON public.tracks FOR INSERT WITH CHECK (auth.uid() user_id); CREATE POLICY Users can update their own tracks ON public.tracks FOR UPDATE USING (auth.uid() user_id); -- 4. 在Supabase Storage中创建两个存储桶可通过Dashboard界面或SQL创建 -- originals : 用于存放用户上传的原始音频文件。 -- transcoded : 用于存放转码后的HLS文件。 -- 注意需要在Storage设置中为这两个桶配置相应的RLS策略允许认证用户上传到originals允许公开读取transcoded。3.3 前端核心功能实现3.3.1 初始化 Supabase 客户端在lib/supabase.ts中创建客户端实例import { createClient } from supabase/supabase-js; const supabaseUrl process.env.NEXT_PUBLIC_SUPABASE_URL!; const supabaseAnonKey process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!; export const supabase createClient(supabaseUrl, supabaseAnonKey);3.3.2 实现音频上传组件创建一个组件components/Uploader.tsx。核心是利用 Supabase Storage 的upload方法。use client; import { useState } from react; import { supabase } from /lib/supabase; import { useRouter } from next/navigation; export default function Uploader() { const [uploading, setUploading] useState(false); const [file, setFile] useStateFile | null(null); const [title, setTitle] useState(); const router useRouter(); const handleUpload async () { if (!file || !title) return; setUploading(true); try { const user (await supabase.auth.getUser()).data.user; if (!user) throw new Error(未登录); // 1. 定义存储路径 const fileExt file.name.split(.).pop(); const fileName ${user.id}/${Date.now()}.${fileExt}; const filePath originals/${fileName}; // 2. 上传文件到 Supabase Storage const { error: uploadError } await supabase.storage .from(originals) .upload(filePath, file); if (uploadError) throw uploadError; // 3. 在数据库插入记录状态为 pending const { error: dbError } await supabase.from(tracks).insert({ user_id: user.id, title, file_path: filePath, status: pending, }); if (dbError) throw dbError; alert(上传成功转码将在后台进行。); setFile(null); setTitle(); router.refresh(); // 刷新页面数据 } catch (error) { console.error(上传失败:, error); alert(上传失败: (error as Error).message); } finally { setUploading(false); } }; return ( div classNamep-4 border rounded-lg space-y-4 input typetext placeholder曲目标题 value{title} onChange{(e) setTitle(e.target.value)} classNameborder p-2 w-full / input typefile acceptaudio/* onChange{(e) setFile(e.target.files?.[0] || null)} classNameblock w-full / button onClick{handleUpload} disabled{uploading} classNamebg-blue-500 text-white px-4 py-2 rounded disabled:opacity-50 {uploading ? 上传中... : 上传音频} /button p classNametext-sm text-gray-500支持 MP3, M4A, FLAC, WAV 等格式。上传后系统将自动转码。/p /div ); }实操心得在上传大文件时可以考虑使用supabase.storage.from().upload()的分块上传功能以提高大文件上传的可靠性。同时前端应提供上传进度条提升用户体验。3.3.3 构建音频播放器组件这是前端的核心。我们创建一个components/Player.tsx组件使用howler.js和hls.js来处理 HLS 流。use client; import { useEffect, useRef, useState } from react; import Hls from hls.js; import { Howl } from howler; import { Play, Pause, Volume2, SkipBack, SkipForward } from lucide-react; import * as Slider from radix-ui/react-slider; interface PlayerProps { trackUrl: string; // HLS master.m3u8 的公开URL trackName: string; } export default function Player({ trackUrl, trackName }: PlayerProps) { const [isPlaying, setIsPlaying] useState(false); const [duration, setDuration] useState(0); const [currentTime, setCurrentTime] useState(0); const [volume, setVolume] useState(0.7); const soundRef useRefHowl | null(null); const isHlsSupported Hls.isSupported(); useEffect(() { // 清理之前的实例 if (soundRef.current) { soundRef.current.unload(); } if (!trackUrl) return; let hls: Hls | null null; if (isHlsSupported) { // 使用 HLS.js Howler 处理 HLS 流 const audioElement document.createElement(audio); hls new Hls(); hls.loadSource(trackUrl); hls.attachMedia(audioElement); hls.on(Hls.Events.MANIFEST_PARSED, () { soundRef.current new Howl({ src: [trackUrl], // Howler 会通过 HLS 插件处理 html5: true, // 强制使用 HTML5 Audio API以便与 HLS 集成 format: [m3u8], volume, onplay: () setIsPlaying(true), onpause: () setIsPlaying(false), onstop: () setIsPlaying(false), onload: () setDuration(soundRef.current?.duration() || 0), onend: () setIsPlaying(false), }); }); } else if (audioElement.canPlayType(application/vnd.apple.mpegurl)) { // 对于 Safari (原生支持 HLS) soundRef.current new Howl({ src: [trackUrl], html5: true, format: [m3u8], volume, onplay: () setIsPlaying(true), // ... 其他事件回调 }); } else { console.error(当前浏览器不支持HLS播放); return; } // 定时器更新当前播放时间 const interval setInterval(() { if (soundRef.current soundRef.current.playing()) { setCurrentTime(soundRef.current.seek()); } }, 500); // 组件卸载时清理 return () { if (hls) { hls.destroy(); } if (soundRef.current) { soundRef.current.unload(); } clearInterval(interval); }; }, [trackUrl, isHlsSupported]); const togglePlay () { if (!soundRef.current) return; if (soundRef.current.playing()) { soundRef.current.pause(); } else { soundRef.current.play(); } }; const handleSeek (value: number[]) { const newTime value[0]; if (soundRef.current) { soundRef.current.seek(newTime); setCurrentTime(newTime); } }; const handleVolumeChange (value: number[]) { const newVolume value[0]; setVolume(newVolume); if (soundRef.current) { soundRef.current.volume(newVolume); } }; return ( div classNamefixed bottom-0 left-0 right-0 bg-white border-t p-4 shadow-lg div classNamemax-w-4xl mx-auto flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0 {/* 曲目信息 */} div classNameflex-1 min-w-0 p classNamefont-semibold truncate{trackName}/p p classNametext-sm text-gray-500 {Math.floor(currentTime / 60)}:{String(Math.floor(currentTime % 60)).padStart(2, 0)} / {Math.floor(duration / 60)}:{String(Math.floor(duration % 60)).padStart(2, 0)} /p /div {/* 播放控制 */} div classNameflex items-center space-x-4 button classNamep-2 hover:bg-gray-100 rounded-fullSkipBack size{20} //button button onClick{togglePlay} classNamep-3 bg-black text-white rounded-full hover:bg-gray-800 {isPlaying ? Pause size{24} / : Play size{24} /} /button button classNamep-2 hover:bg-gray-100 rounded-fullSkipForward size{20} //button /div {/* 进度条 */} div classNameflex-1 w-full md:w-auto Slider.Root classNamerelative flex items-center w-full h-5 cursor-pointer value{[currentTime]} max{duration || 100} step{1} onValueChange{handleSeek} Slider.Track classNamebg-gray-200 relative flex-1 rounded-full h-1 Slider.Range classNameabsolute bg-blue-600 rounded-full h-full / /Slider.Track Slider.Thumb classNameblock w-4 h-4 bg-blue-600 rounded-full hover:scale-110 focus:outline-none / /Slider.Root /div {/* 音量控制 */} div classNameflex items-center space-x-2 Volume2 size{20} / Slider.Root classNamerelative flex items-center w-24 h-5 cursor-pointer value{[volume]} max{1} step{0.01} onValueChange{handleVolumeChange} Slider.Track classNamebg-gray-200 relative flex-1 rounded-full h-1 Slider.Range classNameabsolute bg-gray-600 rounded-full h-full / /Slider.Track Slider.Thumb classNameblock w-3 h-3 bg-gray-700 rounded-full hover:scale-110 / /Slider.Root /div /div /div ); }这个播放器组件具备了基本的播放/暂停、进度条拖拽、音量控制功能并兼容了 HLS 流媒体播放。3.4 后端转码服务的实现关键环节这是最复杂但最关键的一步。我们需要创建一个 API 路由当文件上传到originals存储桶后自动触发转码。我们使用Vercel Serverless Functions或Supabase Edge Functions来实现。这里以 Next.js App Router 的 API Route 为例。首先安装必要的后端依赖在项目根目录npm install vercel/node ffmpeg/ffmpeg ffmpeg/util fluent-ffmpeg ffmpeg-static # 注意ffmpeg-static 会在部署时提供静态的 FFmpeg 二进制文件但 Vercel 无服务器环境可能受限。 # 更可靠的方案是使用一个支持 FFmpeg 的 Docker 容器作为独立的转码 Worker。考虑到 Serverless 环境对 FFmpeg 支持的限制和转码任务的长耗时特性更推荐的做法是使用一个独立的、长时间运行的服务器或容器服务作为“转码Worker”。这里我们描述一种基于Node.js Express BullMQ (Redis) 队列的独立服务方案它更健壮。转码 Worker 服务 (transcode-worker/index.js):const express require(express); const { createClient } require(supabase/supabase-js); const { Worker, Queue } require(bullmq); const IORedis require(ioredis); const ffmpeg require(fluent-ffmpeg); const fs require(fs).promises; const path require(path); const { tmpdir } require(os); const { Storage } require(google-cloud/storage); // 或使用 Supabase SDK 下载/上传 const app express(); const PORT process.env.PORT || 3001; // 连接 Redis (用于任务队列) const connection new IORedis(process.env.REDIS_URL); // 初始化 Supabase 管理客户端使用 service_role key const supabaseAdmin createClient(process.env.SUPABASE_URL, process.env.SUPABASE_SERVICE_ROLE_KEY); // 创建 BullMQ 队列 const transcodeQueue new Queue(audio-transcode, { connection }); // 定义处理任务的 Worker const worker new Worker(audio-transcode, async (job) { const { trackId, filePath, userId } job.data; console.log(开始处理任务: ${trackId}); try { // 1. 更新数据库状态为 processing await supabaseAdmin.from(tracks).update({ status: processing }).eq(id, trackId); // 2. 从 Supabase Storage 下载原始文件到临时目录 const tempInputPath path.join(tmpdir(), input_${trackId}${path.extname(filePath)}); const { data: fileData, error: downloadError } await supabaseAdmin.storage.from(originals).download(filePath); if (downloadError) throw downloadError; await fs.writeFile(tempInputPath, Buffer.from(await fileData.arrayBuffer())); // 3. 创建临时输出目录 const tempOutputDir path.join(tmpdir(), output_${trackId}); await fs.mkdir(tempOutputDir, { recursive: true }); const outputPlaylistPath path.join(tempOutputDir, master.m3u8); // 4. 使用 FFmpeg 进行转码和 HLS 分段 await new Promise((resolve, reject) { ffmpeg(tempInputPath) .audioCodec(libopus) // 使用 Opus 编码压缩率高音质好 .audioBitrate(128k) .outputOptions([ -f hls, // 输出格式为 HLS -hls_time 10, // 每个片段10秒 -hls_playlist_type vod, // 点播类型 -hls_segment_filename, path.join(tempOutputDir, segment_%03d.ts) // 片段命名 ]) .output(outputPlaylistPath) .on(end, resolve) .on(error, reject) .run(); }); // 5. 读取生成的 .m3u8 文件和所有 .ts 片段 const files await fs.readdir(tempOutputDir); for (const file of files) { const fileBuffer await fs.readFile(path.join(tempOutputDir, file)); const uploadPath transcoded/${trackId}/${file}; // 上传到 Supabase Storage 的 transcoded 桶 const { error: uploadError } await supabaseAdmin.storage .from(transcoded) .upload(uploadPath, fileBuffer, { contentType: file.endsWith(.m3u8) ? application/vnd.apple.mpegurl : video/mp2t }); if (uploadError) throw uploadError; } // 6. 更新数据库设置状态为 completed并存储转码后路径 const masterPlaylistPath transcoded/${trackId}/master.m3u8; const { error: updateError } await supabaseAdmin .from(tracks) .update({ status: completed, transcoded_path: masterPlaylistPath, duration: await getAudioDuration(tempInputPath) // 需要额外函数获取时长 }) .eq(id, trackId); if (updateError) throw updateError; console.log(任务处理完成: ${trackId}); // 7. 清理临时文件 await fs.unlink(tempInputPath); await fs.rm(tempOutputDir, { recursive: true }); } catch (error) { console.error(处理任务 ${trackId} 失败:, error); await supabaseAdmin.from(tracks).update({ status: failed }).eq(id, trackId); throw error; // 让 BullMQ 知道任务失败可能会重试 } }, { connection }); // 启动一个简单的 HTTP 服务器来接收 Webhook 或健康检查 app.post(/webhook, express.json(), async (req, res) { // 这里可以接收来自 Supabase Database Webhook 的请求 const { record } req.body; if (record record.status pending) { await transcodeQueue.add(transcode-job, { trackId: record.id, filePath: record.file_path, userId: record.user_id }); } res.status(200).send(OK); }); app.listen(PORT, () console.log(转码Worker运行在端口 ${PORT}));这个 Worker 服务需要部署在一台可以安装和运行 FFmpeg 的服务器上如 DigitalOcean Droplet, AWS EC2, 或 Railway 等容器平台。它监听一个队列当有新的转码任务加入时就会自动处理。如何触发转码我们需要设置一个Supabase Database Webhook。在 Supabase 仪表板中进入Database-Webhooks创建一个新的 Webhook。URL: 填写你的转码 Worker 服务的/webhook端点地址。Event: 选择INSERT事件。Table: 选择tracks表。Filters: 可以添加status eq pending确保只有新上传的待处理任务才会触发。这样每当前端上传音频并插入一条statuspending的记录到tracks表时Supabase 就会自动向你的 Worker 发送一个 POST 请求Worker 随即创建转码任务。3.5 前端数据获取与播放列表展示最后我们需要一个页面来展示已转码完成的音频列表。在app/page.tsx中import { supabase } from /lib/supabase; import Player from /components/Player; import Uploader from /components/Uploader; export default async function HomePage() { // 在服务端获取数据 const { data: tracks, error } await supabase .from(tracks) .select(*) .eq(status, completed) // 只获取已转码完成的 .order(created_at, { ascending: false }); if (error) { console.error(error); return div加载失败/div; } // 获取公开播放URL const tracksWithUrl tracks?.map(track ({ ...track, playUrl: track.transcoded_path ? supabase.storage.from(transcoded).getPublicUrl(track.transcoded_path).data.publicUrl : null })) || []; return ( div classNamecontainer mx-auto p-8 h1 classNametext-3xl font-bold mb-8Blob Radio/h1 Uploader / div classNamemt-12 h2 classNametext-2xl font-semibold mb-4曲库/h2 div classNamegrid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 {tracksWithUrl.map((track) ( div key{track.id} classNameborder rounded-lg p-4 hover:shadow-md transition-shadow div classNamefont-medium{track.title}/div div classNametext-sm text-gray-600{track.artist || 未知艺术家}/div {track.playUrl ( button onClick{() { // 这里需要将 track.playUrl 和 track.title 传递给全局的 Player 组件 // 通常使用状态管理如 Zustand, Context或将URL设置到某个全局状态 // 为简化示例我们假设有一个全局状态存储当前播放曲目 console.log(播放:, track.playUrl); }} classNamemt-3 text-sm bg-green-500 text-white px-3 py-1 rounded hover:bg-green-600 播放 /button )} div classNametext-xs text-gray-400 mt-2 上传于 {new Date(track.created_at).toLocaleDateString()} /div /div ))} /div /div {/* Player 组件可以放在布局layout.tsx中通过全局状态控制 */} {/* Player trackUrl{currentTrackUrl} trackName{currentTrackName} / */} /div ); }4. 部署、优化与高级功能探讨4.1 部署策略前端 (Next.js): 部署到Vercel。它与 Next.js 集成度最高配置简单自动支持 Serverless Functions虽然我们的转码主要不在它这里跑。转码 Worker: 部署到Railway或DigitalOcean App Platform。这些平台支持 Docker 容器可以轻松安装 FFmpeg。将上面的 Worker 代码打包成 Docker 镜像设置好环境变量SUPABASE_URL,SUPABASE_SERVICE_ROLE_KEY,REDIS_URL即可运行。Redis: 用于 BullMQ 队列可以使用Redis Cloud、Upstash或 Railway 提供的 Redis 插件。Supabase: 本身就是托管服务无需额外部署。4.2 性能与成本优化转码优化预设与码率根据音频类型选择合适的 FFmpeg 预设和码率。对于语音播客64kbps 的 Opus 就足够清晰对于音乐可能需要 128kbps 或 192kbps。并行处理BullMQ 可以启动多个 Worker 进程并行处理多个转码任务。硬件加速如果使用支持 GPU 转码的服务器如带有 NVIDIA GPU 的实例可以配置 FFmpeg 使用h264_nvenc视频或相应的音频硬件编码器大幅提升速度。存储与CDNSupabase Storage 自带 CDN但对于全球用户可以考虑将transcoded桶的文件进一步同步到更专业的 CDN如 Cloudflare R2, AWS CloudFront以降低出口流量成本Supabase 的带宽超出套餐后需付费。前端缓存使用 Service Worker 对已播放的音频片段进行缓存实现离线播放和减少重复请求。4.3 常见问题与排查技巧实录在开发和运营这样一个系统时你肯定会遇到各种问题。以下是一些常见坑点及解决方案问题现象可能原因排查步骤与解决方案上传后文件状态一直为pending1. Database Webhook 未正确配置或 URL 不可达。2. Worker 服务未运行或崩溃。3. RLS 策略导致 Worker使用 service_role无法更新表。1. 检查 Supabase Webhook 日志看是否有发送记录和错误响应。2. 登录 Worker 服务器查看应用日志和进程状态。3. 确保tracks表的 RLS 策略允许service_role通过通常 service_role 会绕过 RLS。可以临时为service_role创建一个策略或检查其权限。前端播放器无法加载 HLS 流控制台报错1.transcoded存储桶的 RLS 策略未设置为公开读取。2. 生成的.m3u8文件内容有误或.ts片段路径不对。3. 浏览器不支持 HLS老旧浏览器。1. 在 Supabase Storage 中确保transcoded桶的public权限设置为true或为authenticated用户配置SELECT策略。2. 手动下载一个生成的master.m3u8文件检查其内容。确保里面的.ts片段路径是有效的、可公开访问的 URL。可能是上传路径错误。3. 使用hls.js的Hls.isSupported()做兼容性检测并为不支持的回退到普通 MP3 播放需存储另一种格式。转码过程非常缓慢1. Worker 服务器 CPU 性能不足。2. FFmpeg 参数未优化使用了最慢的编码器预设。3. 同时处理的任务过多。1. 升级 Worker 服务器配置。2. 在 FFmpeg 命令中添加-preset fast或-preset superfast对于 libx264音频编码器也有类似选项。权衡速度与压缩率。3. 限制 BullMQ 的并发 Worker 数量避免服务器过载。播放时进度条无法拖拽 seeking HLS 流媒体 seeking 依赖正确的#EXT-X-BYTERANGE或分片列表。如果 FFmpeg 生成的是“点播(VOD)”模式但分片过大 seeking 可能不精确。确保 FFmpeg 命令中包含了-hls_playlist_type vod和合适的-hls_time参数如 10 秒。较小的分片时间有利于精确 seeking但会增加文件数量和.m3u8文件大小。移动端播放耗电快持续的网络请求和音频解码会消耗电量。1. 确保使用高效的编码格式如 Opus。2. 前端播放器在页面不可见时暂停播放。3. 考虑提供更低码率的流媒体选项自适应码率但这需要生成多套 HLS 流复杂度较高。4.4 扩展功能思路一个基础的“Blob Radio”搭建完成后你可以考虑以下方向进行扩展让它变得更强大用户系统与社交功能利用 Supabase Auth实现用户个人资料、关注、收藏歌单、创建电台频道等功能。实时互动使用 Supabase Realtime实现播放房间的同步播放、实时聊天、发送弹幕/礼物。智能推荐基于用户的播放历史在 PostgreSQL 中使用向量扩展如pgvector或简单的协同过滤算法实现“猜你喜欢”。播客支持扩展数据库 schema支持 RSS 订阅源导入、章节标记、播放速度调整等播客专属功能。后台管理为管理员构建一个仪表盘管理所有用户、审核内容、查看系统统计存储用量、播放量等。移动端应用使用 React Native 或 Flutter基于相同的 Supabase 后端构建原生移动端 App。搭建“Supa-Haxor/Blob-Radio”的过程是一次对现代全栈开发、云服务集成和流媒体技术的深度实践。它从零开始串联起了前端交互、后端逻辑、文件处理、实时通信等多个关键领域。虽然过程中会遇到不少挑战尤其是转码流水线的稳定性和性能优化但最终打造出一个完全受自己控制、功能可任意扩展的音频平台这种成就感和学到的实战经验是单纯使用第三方服务无法比拟的。如果你对某个细节还有疑问或者在实际部署中遇到了新的问题最好的办法就是查阅 Supabase、FFmpeg、HLS.js 等核心工具的官方文档并结合社区讨论来寻找答案。
